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



  • ۲۲
  • مرداد

جلسه ۲۱ : فرم ها (forms) در Bootstrap 3

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

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. تمام وب سایت ها برای دریافت اطلاعات از کاربران به فرم ها (forms) و عناصر آن، نیاز دارند. با توجه به کاربرد بسیار مهم و گسترده ی فرم ها، در اغلب وب سایت ها حداقل از یک فرم برای اقداماتی نظیر ثبت نام کاربران و … استفاده می شود. فریم ورک bootstrap نیز طرح هایی را به همراه ویژگی responsive از فرم ها ارائه می دهد. غالبا طرح های form در bootstrap 3 بسیار ساده است. برای آشنایی بیشتر با فرم ها در bootstrap 3 در ادامه ی مباحث آموزش کار با فرم  ها در bootstrap 3 با ما همراه باشید.

      کار با فرم ها در bootstrap 3

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

      کنترل ها و عناصر فرم، بطور خودکار از style های فریم ورک bootstrap استفاده می کنند:

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

       طراحی های فرم در bootstrap

      bootstrap 3 سه طرح کلی از فرم ها را ارائه می دهد:

      • Vertical form (پیش فرض)
      • Horizontal form
      • Inline form

      قوانین استاندارد طرح های فوق، بصورت زیر است:

      • برچسب ها و عناصر فرم در کد <div class="form-group"> قرار می گیرند.
      • کلاس .form-control به تمام عناصر ورودی <input><textarea> و <select> اضافه می شود.

      فرم های عمودی bootstrap 3 (طرح پیش فرض)

      فرم های عمودی bootstrap 3 (طرح پیش فرض)

      فرم های عمودی bootstrap 3 (طرح پیش فرض)

      مثال زیر چگونگی ایجاد فرم فوق، را نشان می دهد:

      مثال : 

      فرم های خطی (inline) در bootstrap

      فرم های خطی (inline) در bootstrap

      فرم های خطی (inline) در bootstrap

      در حالت inline تمام عناصر فرم در یک سطر با ترازبندی چپ قرار می گیرند.

      نکته: این حالت فقط برای صفحه نمایش هایی با حداقل عرض ۷۶۸px پاسخگو می باشد.

      قوانین فرم های inline:

      • کلاس .form-inline را به عنصر <form> اضافه کنید.

      کد زیر، چگونگی ایجاد یک فرم inline ساده را نشان می دهد:

      مثال : 

      اگر می خواهید که برچسب(label) ها، باشند. از کلاس .sr-only در فرم بصورت زیر استفاده کنید:

      مثال : 

      فرم های افقی (horizontal ) در bootstrap

      فرم های افقی (horizontal ) در bootstrap

      فرم های افقی (horizontal ) در bootstrap

      در فرم horizontal ،در هر سطری یک کنترل ورودی فرم با برچسب مربوط به آن قرار می گیرد. و عرض فیلدهای ورودی برابر با عرض عنصر والد خواهد بود.

      اما در صفحه نمایش های کوچکتر (با عرض کمتر از ۷۶۷px) عرض عناصر فرم بصورت خودکار کوچک می شود.

      برای ایجاد فرم horizontal بصورت زیر عمل کنید:

      • کلاس .form-horizontal را به عنصر <form> اضافه کنید.
      • کلاس .control-label را نیز به عناصر <label> اضافه کنید.

      نکته: از کلاسهای grid در bootstrap 3 استفاده کنید تا برچسب ها و گروه های کنترل فرم را در یک طرح افقی ترکیب کنید.

      مثال زیر چگونگی ایجاد یک فرم horizontal را مانند نمونه ی فوق، نشان می دهد:

      مثال : 

      کلام آخر

      مباحث فوق، به منظور آشنایی شما با نمونه ها و طرح های مختلف فرم در bootstrap 3 ارائه شده است. با مرور مباحث آموش فوق، می توانید از طرح های مختلف فرم در bootstrap 3 بر اساس کاربرد هر یک در قالب صفحات وب خود استفاده کنید. امیدواریم که از مباحث آموزش کار با فرم ها (forms) در bootstrap 3 بخوبی استفاد کرده باشید.

       

      QR:  جلسه ۲۱ : فرم ها (forms) در Bootstrap 3
      به اشتراک بگذارید