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



  • ۲۳
  • مرداد

جلسه ۲۱ : طراحی عناصر فرم ها در Bootstrap 4

  • دسته‌بندی‌ها :
جلسه ۲۱ : طراحی عناصر فرم ها در Bootstrap 4
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. خب در دو بخش اخیر آموزشها ، ما به مبحث بسیار مهم و گسترده ای در طراحی  وب سایت ها اشاره کردیم. و موضوعات طراحی منوها و کار با Nav در ۴ Bootstrap و در ادامه آن مبحث navigation در Bootstrap 4  ، را نیز بررسی کردیم.در این بخش نیز، قصد داریم، به موضوع طراحی عناصر فرم ها در Bootstrap 4 ،بپردازیم

      عناصر فرم ها نیز در Bootstrap 4 ، طراحی های متنوع و گسترد های دارند. همچنین تمام عناصر ویژگی responsive را دارند.

      اکنون به سراغ موضوع اصلی این بخش ، طراحی عناصر فرم ها در Bootstrap 4 ، می رویم.

      طراحی عناصر فرم ها در Bootstrap 4

      تنظیمات پیش فرض

      کنترل های فرم به طور خودکار یک style عمومی را با بوت استرپ دریافت می کنند:

      عناصر <input> ، <textarea> و <select> ، با کلاس .form-control و خصوصیت عرض (width) با مقدار ۱۰۰% ، قرار می گیرند.

      چهار چوب فرم ها در  Bootstrap 4

      Bootstrap 4 دو چهار چوب را برای فرم ها ارائه کرده است:

      • Stacked (full-width) form
      • Inline form

      نمونه اول (Stacked)

      نمونه اول (Stacked) - طراحی عناصر فرم ها در Bootstrap 4

      نمونه اول (Stacked)

       

      مثال زیر یک فرم جمع شده با دو فیلد ورودی، یک چک باکس و دکمه ارسال را ایجاد می کند.

      و یک عنصر <div> ، برای با کلاس .form-group ، برای گروه بندی کنترل های فرم، قرار می گیرد.

      مثال : 

      نوع دوم فرم های خطی (Inline form)

       

      نوع دوم فرم های خطی (Inline form)

      نوع دوم فرم های خطی (Inline form)

       

      در حالت خطی، تمام عناصر به صورت خطی و چپ تراز هستند.

      نکته: فقط در نمایشگرهایی با اندازه  ۵۷۶px  و کوچکتر از آن ، این نوع فرم ها نیز ، به دلیل responsive بودن. به حالت عمودی نمایش داده می شود.

      مثال زیر یک فرم Inline ، را با دو فیلد input ، یک checkbox و یک button ارسال را ایجاد می کند:

      مثال : 

      فرم inline با فاصله تنظیم شده

      فرم خطی مثال بالا احساس می شود. که “فشرده” است. و با امکانات Utility فاصله بوت استرپ بسیار بهتر خواهد شد.

      در این مثال خصوصیت margin ، در سمت راست، با کلاس .mr-sm-2 اعمال شده است. و ویژگی margin پایین، با کلاس .mb-2 ، اعمال شده است. (زمانیکه فرم ها در نمایشگرهای کوچکتر بصورت عمودی نمایش داده می شود. عمل می کند).

      فرم inline با فاصله تنظیم شده

      فرم inline با فاصله تنظیم شده

       

      مثال:
      مثال : 

      کلام آخر

      در این بخش نیز از اساسی ترین و پایه ترین طراحی های عناصر html در Bootstrap ، را ارائه کردیم. فرم تقریبا در تمام وب سایت ها استفاده می شود. از این رو طراحی صحیح آن ها در وب سایت از اهمیت خاصی برخوردار است. ما نیز در این بخش موضوع طراحی عناصر فرم ها در Bootstrap 4 ، را جهت آشنایی بیشتر با فرم ها، مطرح کردیم.

      QR:  جلسه ۲۱ : طراحی عناصر فرم ها در Bootstrap 4
      به اشتراک بگذارید