دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • مرداد

جلسه ۲۴ : اندازه های Input در Bootstrap 3

  • دسته‌بندی‌ها :
جلسه ۲۴ : اندازه های Input در Bootstrap 3
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تاکنون در جلسات اخیر شما را با کنترل های ورودی (input) در bootstrap 3 آشنا کردیم. همچنین چگونگی استفاده از وروردی های پیشرفته در bootstrap 3 را نیز شرح دادیم. در این آموزش نیز در تکمیل مباحث اخیر به مبحث اندازه های input در bootstrap 3 می پردازیم. و شما را با چگونگی تعیین و تغییر اندازه ی input ها در bootstrap 3 آشنا خواهیم کرد.

      اندازه های input در bootstrap 3

      اندازه ی input ها در form

      برای تنظیم ارتفاع input ها می توانید. از کلاسهای .input-lg و .input-sm  استفاده کنید.

      برای تنظیم عرض (width) فیلدهای ورودی نیز، می توانید از کلاسهای سیستم grid از جمله .col-lg-*و .col-sm-*  استفاده کنید.

      اندازه ی Input ها در form

      اندازه ی input ها در form

      مثال زیر تنظیم ارتفاع های مختلف را در عناصر input نشان می دهد:

      مثال : 

      شما می توانید خیلی سریع در فرم های افقی (Horizontal ) با افزودن کلاس .form-group-* به تگ <div class="form-group"> اندازه ی برچسب و کنترل های فرم را تعیین کنید.

      مثال:

      مثال : 

      همچنین می توانید برای تغییر اندازه سریع، تمام کنترل های input و سایر عناصر را در داخل کلاس .input-group با کلاسهای .input-group-sm یا .input-group-lg  قرار دهید:

      مثال:

      مثال : 

      اندازه ستونی

      اندازه ستونی

      اندازه ستونی

      مثال زیر عناصر input را در عرض (width) های مختلف، با استفاده از سری کلاسهای .col-xs-* نمایش می دهد:

      مثال : 

      متن کمکی

      با استفاده از کلاس .help-block می توانید یک سطح block از متن کمکی داخل فرم، ایجاد کنید:

      مثال : 

      کلام آخر

      این بخش آخرین بخش از آموزشهای مربوط به فرم ها و عناصر ورودی فرم در bootstrap 3 می باشد. در این بخش آموزشهای لازم برای چگونگی تغییر اندازه inputها در bootstrap 3 تقدیم شما شد. امیدواریم که از مباحث آشنایی با اندازه های input در bootstrap 3 بهره ی لازم را برده باشید.

      QR:  جلسه ۲۴ : اندازه های Input در Bootstrap 3
      به اشتراک بگذارید