عناصر اساسی
انواع ورودی
رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. شامل پشتیبانی از همه انواع HTML5 است: text
, password
, datetime
,
datetime-local
, date
, month
,
time
, week
, number
, email
,
url
, search
, tel
و color
.
Select menu
Custom <select>
menus need only a custom class,
.form-select
to trigger the custom styles.
Switches
A switch has the markup of a custom checkbox but uses the
.form-switch
class to render a toggle switch. Switches also
support the disabled
attribute.
چک باکس ها و رادیوها
برچسب های شناور
برای فعال کردن برچسبهای شناور با فیلدهای فرم متنی Bootstrap،
یک جفت از <input class="form-control">
و
<label>
عناصر را بپیچید. .form-floating
A placeholder
برای هر یک مورد نیاز است <input>
زیرا روش ما برای برچسبهای شناور فقط CSS از :placeholder-shown
شبه عنصر استفاده میکند. همچنین توجه داشته باشید که
<input>
باید اول باشد تا بتوانیم از یک انتخابگر خواهر و برادر استفاده کنیم (مثلاً ~
).
مثال شناور
انتخاب می کند
اندازه های ورودی
ارتفاع را با استفاده از کلاس هایی مانند .input-lg
تنظیم کنید و عرض ها را با استفاده از کلاس های ستون شبکه مانند تنظیم .col-lg-*
کنید.
گروه ورودی
با افزودن متن، دکمهها یا گروههای دکمه در دو طرف ورودیهای متنی، انتخابهای سفارشی و ورودیهای فایل سفارشی، کنترلهای فرم را به راحتی گسترش دهید.
مثال پایه
فرم افقی
اندازه ستون
همانطور که در مثال های قبلی نشان داده شد، سیستم گرید ما به شما امکان می دهد هر تعداد
.col
s را در یک قرار دهید .row
.
اندازه گیری خودکار
ناودان
طرحبندیهای پیچیدهتری را نیز میتوان با سیستم شبکه ایجاد کرد.
چک باکس سفارشی - پایه
پشتیبانی از رنگ های برند بوت استرپ: .form-check
و
.form-check-*
غیره
کادر انتخاب سفارشی - دایره شده
.rounded-circle
برای گرد بودن
چک باکس سفارشی - غیرفعال است
حالت غیر فعال نیز پشتیبانی می شود.
رادیو سفارشی - پایه
پشتیبانی از رنگ های برند بوت استرپ: .form-check
و
.form-check-*
غیره
رادیو سفارشی - غیرفعال است
حالت غیر فعال نیز پشتیبانی می شود.