آموزش کار با فرم های بوت استرپReviewed by صابر بوستانی on Jul 2Rating: 4.5آموزش کار با فرم های بوت استرپآموزش کار با فرم های بوت استرپ
آموزش کار با فرم های بوت استرپ

آموزش کار با فرم های بوت استرپ

در ادامه دوره آموزش متنی بوت استرپ توی جلسه پانزدهم، آموزش کار با فرم های بوت استرپ رو برای شما دوستان عزیز قرار داده ایم. لطفا با ما همراه باشید.

آموزش کار با فرم های بوت استرپ :

تنظیمات پیش فرض بوت استرپ :

کنترل های فرم (form controls) به طور اتوماتیک یک سری تنظیمات و استایل دهی عمومی را دریافت میکنند.

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

 

طرح فرم های بوت استرپ : Bootstrap Form Layouts

بوت استرپ سه نوع طرح به ما ارائه میدهد :

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

قوانین استاندارد برای هر سه طرح فرم ها :

  • همیشه از <form role=”form”> استفاده کنید (باعث بهبود دسترسی افرادی میشود که از صفحه خوان ها استفاده میکنند )
  • برچسب ها و کنترل های فرم را درون یک <div class=”form-group”> قرار دهید (برای بهینه سازی فاصله گذاری استفاده میشود )
  • کلاس .form-control را به همه عناصر متنی <input>, <textarea> و <select> اضافه کنید .

 

فرم عمودی بوت استرپ (پیش فرض) :

1

مثال زیر یک فرم عمودی به همراه دو بخش ورودی ، یک چک باکس ، با یک دکمه ثبت (submit) را میسازد :

 

فرم درون خطی بوت استرپ :

2

در یک فرم خطی ، تمام عناصر در یک خط با تراز بندی سمت چپ هستند و برچسب هایشان کنارشان قرار دارند.

توجه : این ویژگی تنها به فرم هایی که زاویه دیدشان حداقل ۷۶۸px است اعمال میشود .

قوانین مخصوص فرم های خطی  :

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

مثال زیر یک فرم درون خطی با دو بخش ورودی ، یک چک باکس و یک دکمه Submit میسازد :

نکته!!! اگر برای هر ورودی یک برچسب قرار ندهید ، صفحه خوان ها با فرم هایتان به مشکل بر خواهند خورد . میتوانید بر چسب ها را  توسط کلاس .sr-only برای تمام دستگاه ها به جز صفحه خوان ها مخفی کنید

 

فرم افقی بوت استرپ :

3یک فرم افقی با بقیه فرم ها از نظر مقدار و نحوه ارائه فرم تفاوت دارد .

قوانین مخصوص فرم افقی :

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

 

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

 

مثال زیر یک فرم افقی به همراه دو بخش ورودی ، یک چک باکس ، و یک دکمه submit میسازد :

 

برای تازه شدن دیر نیست

موفق و پیروز باشید