سبد (0)

کلاس های form در بوت استرپ

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

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

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

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

  • همواره از <form role="form"> استفاده کنید(دسترسی کسانی که از screen reader استفاده می کنند را بهتر می کند).
  • برچسب ها(label) و کنترل های فرم(form control) را درون یک <div class="form-group"> بسته بندی کنید(در بهینه سازی فاصله گذاری مورد نیاز می باشد).
  • کلاس form-control. را به تمام عناصر <input> و <textarea>  و <select> اضافه کنید.

مثال زیر یک فرم ساده ی بوتسترپ را به همراه دو فیلد ورودی(input) و یک چک باکس و یک دکمه ی submit ایجاد می کند:

Bootstrap Form مثال

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

خودتان امتحان کنید »

<form> Classes

Class توضیحات مثال
form-inline.

ایجاد یک فرم چپ چین شده به همراه تنظیمات inline-block( این تنها در فرم هایی که در صفحه با عرض منطقه ی دید حداقل 768px، قرار دارند، اعمال می شود). 

امتحان کنید
form-horizontal.

تراز بندی کردن برچسب ها و گروه های تنظیمات فرم در یک طرح بندی افقی.

امتحان کنید

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه