آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش فرم های BootStrap

دوره های مرتبط با این مقاله

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

در BootStrap، ساختار و استایل بندی های مختلفی برای فرم ها وجود دارد. به صورت پیش فرض، تمامیِ عناصرِ <input>، <textarea>، و <select> ، به همراهِ کلاسِ .form-control ، دارای پهنای 100% می باشند.

طرح و ساختار فرم های BootStrap (BootStrap Forms Layout)

BootStrap سه طرح(Layout) را برای فرم ها فراهم نموده است:

  • فرم های عمودی یا Vertical (پیش فرض)
  • فرم های افقی یا Horizontal
  • فرم های درون خطی یا Inline

استاندارهای موجود برای هر سه طرح عبارتند از:

  • تنظیماتِ مربوط به فرم ها و لیبل ها (Labels) را درونِ <div class="form-group"> بگنجانید.
  • کلاسِ .form-control را به تمامیِ عنصرهای <input>، <textarea>، و<select> اضافه کنید.

فرم های عمودی (Vertical Forms) در BootStrap

مثال زیر، یک فرم عمودی با دو فیلدِ ورودی ( Input Field) را نشان می دهد که یکی checkbox و دیگری دکمه ی submit می باشد:

نمونه 1


  
امتحان کنید

فرمِ Inline یا درون خطیِ BootStrap

در یک فرمِ Inline، تمامیِ عوامل به صورت درون خطی (inline) و چپ چین(left-aligned) بوده و برچسب ها(labels) در قسمت های جانبی (alongside) قرار گرفته اند. نکته: این ویژگیِ ذکر شده تنها برای فرم هایی که دارای دامنه ی دیدِ حداقل768 پیکسلی هستند، به کار می رود
ضابطه ی اضافی برای یک فرمِ Inline:

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

مثال پایین، یک فرمِ Inline با دو فیلدِ ورودی ( Input Field) را فراهم می کند که یکی checkbox و دیگری دکمه ی submit می باشد:

نمونه 2

امتحان کنید
نکته:

: اگر برای هر ورودی یک برچسب (Label) در نظر نگیرید، screen reader ها در رابطه با فرم های شما به مشکل بر خواهند خورد. با به کار گیریِ کلاسِ .sr-only ، قادر خواهید بود که تمامی برچسب ها(Labels) را برای تمامیِ وسایل، بجز screen reader، مخفی نمایید:

نمونه 3

امتحان کنید

فرم های افقی (Horizontal Forms) در BootStrap

فرم افقی هم از نظرِ میزان Markup و هم از نظرِ ارائه ی فرم، با بقیه ی فرم ها متفاوت است.
قوانین بیشتر برای فرم های افقی:

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

به منظورِ تراز کردنِ برچسب ها و گروهی از کنترل کننده های فرم ها در یک طرحِ افقی (Horizontal Layout)، از کلاس های Grid که از پیش تعریف شده اند، استفاده کنید. مثال پایین، یک فرم افقی با دو فیلدِ ورودی که یکی checkbox و دیگریِ دکمه ی submit است، را نشان می دهد:

نمونه 4

امتحان کنید
  • 1430
  •    826
  • تاریخ ارسال :   1395/10/13

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .