عناصر فرم
انواع ورودی
رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
\u003cdiv class\u003d\
برچسب های شناور
یک جفت بپیچید<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., ~).
مثال
Textareas
انتخاب می کند
چیدمان
\u003cdiv class\u003d\
انتخاب کنید
<select> menus need only a custom class, .form-select to trigger the custom styles.
\u003cselect class\u003d\
سوئیچ ها
یک سوئیچ دارای نشانه گذاری یک چک باکس سفارشی است اما از آن استفاده می کند.form-switch class to render a toggle switch. Switches also support the disabled attribute.
\u003c!-- سوئیچ سفارشی --\u003e\n
چک باکس ها
هر چک باکس و رادیو<input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.
چک باکس ها
درون خطی
معلول
رنگ ها
\u003c!-- چک باکس ها--\u003e\n
رادیوها
هر چک باکس و رادیو<input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.
رادیوها
درون خطی
معلول
رنگ ها
\u003c!-- رادیوها--\u003e\n\n
اندازه های ورودی
تنظیم ارتفاع با استفاده از کلاس هایی مانند.input-lg, and set widths using grid column classes like .col-lg-*.
\u003cdiv class\u003d\
گروه ورودی
با افزودن متن، دکمه‌ها یا گروه‌های دکمه در دو طرف ورودی‌های متنی، انتخاب‌های سفارشی و ورودی‌های فایل سفارشی، کنترل‌های فرم را به راحتی گسترش دهید.
\u003cفرم\u003e\n
مثال پایه
در اینجا یک مثال سریع برای نشان دادن سبک های فرم Bootstrap آورده شده است.
\u003cفرم\u003e\n
فرم افقی
با اضافه کردن عبارت، فرم های افقی را با شبکه ایجاد کنید.row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
\u003cform class\u003d\
فرم درون خطی
استفاده کنید.row-cols-lg-auto, .g-3 & .align-items-center class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
اندازه گیری خودکار
\u003cform class\u003d\
اندازه برچسب فرم افقی
حتما استفاده کنید.col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
\u003cفرم\u003e\n
ردیف را تشکیل دهید
با اضافه کردن.row & .g-2, you can have control over the gutter width in as well the inline as block direction.
\u003cفرم\u003e\n