ورودی‌های فرم
کنترل های فرم پشتیبانی شده
بوت استرپ از کنترل‌های فرم زیر پشتیبانی می‌کند:[۱]
- ورودی
- فضای متنی
- چک باکس
- Radio
- انتخاب
ورودی بوت استرپ
بوت استرپ همهٔ انواع ورودی HTML را پشتیبانی می‌کند: متن، رمز عبور، تاریخ وزمان، تاریخ محلی، تاریخ، ماه، زمان، هفته، عدد، ایمیل، آدرس (URL)، جستجو، تلفن و رنگ.
مثال زیر دارای دو عنصر ورودی است؛ یکی از type="text" و دیگری از type="password". همان‌طور که در بخش فرم‌ها اشاره کردیم، از کلاس .form-control برای استایل دهی ورودی‌ها با عرض کامل و حاشیه درونی مناسب و غیره استفاده می‌کنیم:
مثال
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
فضای متنی (Textarea) بوت استرپ
مثال زیر حاوی یک حوزه متن است:
مثال
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
چک باکس های بوت استرپ
اگر قرار باشد کاربر از بین مواردی از لیست تعدادی از آنها را انتخاب کند، از چک باکس‌ها استفاده می‌شود.
مثال زیر دارای سه چک باکس است. مورد آخر غیرفعال است:
مثال
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
شرح مثال
از یک عنصر پوشاننده (Wrapper) با class="form-check" برای تضمین حاشیه‌های مناسب برای برچسب‌ها و چک باکس‌ها استفاده می‌کنیم:
کلاس .form-check-label را به عناصر برچسب و کلاس .form-check-input را برای استایل دهی مناسب به چک باکس‌های داخل ظرف .form-check اضافه می‌کنیم.
چک باکس های درون خطی (Inline)
اگر می‌خواهید چک باکس‌ها در یک خط قرار بگیرند، از کلاس .form-check-inline استفاده کنید:
مثال
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Radio Buttonها در بوت استرپ
اگر قرار باشد کاربر از بین موارد یک لیست فقط یک مورد را انتخاب کند، از Radio Buttonها استفاده می‌شود.
مثال زیر حاوی سه Radio Button است. آخرین مورد غیرفعال است:
مثال
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
درست مانند چک باکس‌ها، در صورتیکه می‌خواهید Radio Buttonها در یک خط ظاهر شوند، از کلاس .form-check-inline استفاده کنید:
مثال
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
لیست انتخابی بوت استرپ
لیست انتخابی (یک انتخاب):
لیست چند انتخابی (Ctrl یا Shift را نگه دارید (یا با ماوس drag کنید) تا چند آیتم را انتخاب شود):
لیست‌های انتخابی زمانی استفاده می‌شوند که کاربر بخواهد از بین چند مورد انتخاب کند.
مثال زیر دارای یک لیست کرکره ای (لیست انتخابی) است:
مثال
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
سایز دهی به کنترل فرم
با استفاده از .form-control-sm یا .form-control-lg می‌توان اندازه کنترل فرم را تغییر دهید:
مثال
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
کنترل فرم با متن ساده
اگر می‌خواهید به فیلد ورودی بعنوان متن ساده استایل دهی کنید، از .form-control-plaintext استفاده کنید:
مثال
<input type="text" class="form-control-plaintext">
کنترل فرم محدوده (Range) و فایل
برای استایل دهی به کنترل محدوده یا فیلد فایل با عرض کامل کلاس .form-control-range را به input type"range" یا .form-control-file را به input type"file" اضافه کنید.
مثال
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
منابع آموزشی