انواع ورودی
رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
منو را انتخاب کنید
سفارشی<select>
menus need only a custom class, .form-select
to trigger the custom styles.
سوئیچ ها
یک سوئیچ دارای نشانه گذاری یک چک باکس سفارشی است اما از آن استفاده می کند.form-switch
class to render a toggle switch. Switches also support the disabled
attribute.
چک باکس ها و رادیوها
برچسب های شناور
یک جفت بپیچید<input class="form-control">
and <label>
elements in .form-floating
to enable floating labels with Bootstrap’s textual form fields. A placeholder
is required on each <input>
as our method of CSS-only floating labels uses the :placeholder-shown
pseudo-element. Also note that the <input>
must come first so we can utilize a sibling selector (e.g., ~
).
مثال شناور
انتخاب می کند
اندازه های ورودی
تنظیم ارتفاع با استفاده از کلاس هایی مانند.input-lg
, and set widths using grid column classes like .col-lg-*
.
گروه ورودی
با افزودن متن، دکمهها یا گروههای دکمه در دو طرف ورودیهای متنی، انتخابهای سفارشی و ورودیهای فایل سفارشی، کنترلهای فرم را به راحتی گسترش دهید.
مثال پایه
فرم افقی
اندازه ستون
همانطور که در مثال های قبلی نشان داده شد، سیستم شبکه ما به شما امکان می دهد هر تعداد را قرار دهید.col
s within a .row
.
اندازه گیری خودکار
ناودان
طرحبندیهای پیچیدهتری را نیز میتوان با سیستم شبکه ایجاد کرد.
چک باکس سفارشی - پایه
پشتیبانی از رنگ های برند بوت استرپ:.form-check
,
.form-check-*
etc.
چک باکس سفارشی - حلقه شده
.rounded-circle
for roundness.
چک باکس سفارشی - غیرفعال است
حالت غیر فعال نیز پشتیبانی می شود.
رادیو سفارشی - پایه
پشتیبانی از رنگ های برند بوت استرپ:.form-check
,
.form-check-*
etc.
رادیو سفارشی - غیرفعال است
حالت غیر فعال نیز پشتیبانی می شود.