با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تاکنون در جلسات اخیر شما را با کنترل های ورودی (input) در bootstrap 3 آشنا کردیم. همچنین چگونگی استفاده از وروردی های پیشرفته در bootstrap 3 را نیز شرح دادیم. در این آموزش نیز در تکمیل مباحث اخیر به مبحث اندازه های input در bootstrap 3 می پردازیم. و شما را با چگونگی تعیین و تغییر اندازه ی input ها در bootstrap 3 آشنا خواهیم کرد.
برای تنظیم ارتفاع input ها می توانید. از کلاسهای .input-lg
و .input-sm
استفاده کنید.
برای تنظیم عرض (width) فیلدهای ورودی نیز، می توانید از کلاسهای سیستم grid از جمله .col-lg-*
و .col-sm-*
استفاده کنید.
مثال زیر تنظیم ارتفاع های مختلف را در عناصر input نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form> <div class="form-group"> <label for="inputsm">Small input</label> <input class="form-control input-sm" id="inputsm" type="text"> </div> <div class="form-group"> <label for="inputdefault">Default input</label> <input class="form-control" id="inputdefault" type="text"> </div> <div class="form-group"> <label for="inputlg">Large input</label> <input class="form-control input-lg" id="inputlg" type="text"> </div> </form> |
شما می توانید خیلی سریع در فرم های افقی (Horizontal ) با افزودن کلاس .form-group-*
به تگ <div class="form-group">
اندازه ی برچسب و کنترل های فرم را تعیین کنید.
مثال:
1 | <div class="form-group form-group-lg"> |
همچنین می توانید برای تغییر اندازه سریع، تمام کنترل های input و سایر عناصر را در داخل کلاس .input-group
با کلاسهای .input-group-sm
یا .input-group-lg
قرار دهید:
مثال:
1 | <div class="input-group input-group-lg"> |
مثال زیر عناصر input را در عرض (width) های مختلف، با استفاده از سری کلاسهای .col-xs-*
نمایش می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="form-group row"> <div class="col-xs-2"> <label for="ex1">col-xs-2</label> <input class="form-control" id="ex1" type="text"> </div> <div class="col-xs-3"> <label for="ex2">col-xs-3</label> <input class="form-control" id="ex2" type="text"> </div> <div class="col-xs-4"> <label for="ex3">col-xs-4</label> <input class="form-control" id="ex3" type="text"> </div> </div> |
با استفاده از کلاس .help-block
می توانید یک سطح block از متن کمکی داخل فرم، ایجاد کنید:
1 2 3 4 5 | <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> <span class="help-block">This is some help text...</span> </div> |
این بخش آخرین بخش از آموزشهای مربوط به فرم ها و عناصر ورودی فرم در bootstrap 3 می باشد. در این بخش آموزشهای لازم برای چگونگی تغییر اندازه inputها در bootstrap 3 تقدیم شما شد. امیدواریم که از مباحث آشنایی با اندازه های input در bootstrap 3 بهره ی لازم را برده باشید.