عناصر فرم
انواع ورودی
رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. شامل پشتیبانی برای همه است انواع HTML5:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel، وcolor.
برچسب های شناور
یک جفت بپیچید<input class="form-control">و<label>عناصر در.form-floatingفعال کردن برچسب های شناور با فیلدهای فرم متنی Bootstrap. الفplaceholderبرای هر یک مورد نیاز است<input>به عنوان روش ما فقط برای CSS برچسب شناور استفاده می کند:placeholder-shownشبه عنصر همچنین توجه داشته باشید که<input>باید اول باشد تا بتوانیم از a استفاده کنیم انتخابگر خواهر و برادر (به عنوان مثال،~).
مثال
Textareas
انتخاب می کند
طرح بندی
انتخاب و سوئیچ ها
انتخاب کنید
<select>منوها فقط به یک کلاس سفارشی نیاز دارند،.form-selectبرای فعال کردن سبک های سفارشی
سوئیچ ها
یک سوئیچ دارای نشانه گذاری یک چک باکس سفارشی است اما از آن استفاده می کند.form-switchکلاس برای رندر کردن یک سوئیچ. سوئیچ ها نیز حمایت کنیدdisabledویژگی
چک باکس ها
هر چک باکس و رادیو<input>و<label>جفت شدن در یک پیچیده شده است<div>به کنترل سفارشی ما را ایجاد کنید. از نظر ساختاری، این همان رویکرد ما است پیش فرض.form-check.
چک باکس ها
درون خطی
از کار افتاده است
رنگ ها
رادیوها
هر چک باکس و رادیو<input>و<label>جفت شدن در یک پیچیده شده است<div>به کنترل سفارشی ما را ایجاد کنید. از نظر ساختاری، این همان رویکرد ما است پیش فرض.form-check.
رادیوها
درون خطی
از کار افتاده است
رنگ ها
اندازه های ورودی
تنظیم ارتفاع با استفاده از کلاس هایی مانند.input-lgو عرض ها را با استفاده از شبکه تنظیم کنید کلاس های ستون مانند.col-lg-*.
گروه ورودی
با افزودن متن، دکمهها یا گروههای دکمهها به راحتی کنترلهای فرم را گسترش دهید سمت ورودی های متنی، انتخاب های سفارشی و ورودی های فایل سفارشی
مثال پایه
در اینجا یک مثال سریع برای نشان دادن فرم Bootstrap آورده شده است سبک ها برای دریافت مستندات مربوط به کلاس های مورد نیاز، طرح بندی فرم ها، و بیشتر
فرم افقی
با اضافه کردن عبارت، فرم های افقی را با شبکه ایجاد کنید.rowکلاس برای تشکیل گروه و استفاده از.col-*-*کلاس ها برای تعیین عرض برچسب ها و کنترل های شما. حتما اضافه کنید.col-form-labelبه شما<label>همینطور آنها به صورت عمودی با کنترل های فرم مرتبط با خود در مرکز قرار دارند.
فرم درون خطی
استفاده کنید.row-cols-lg-auto, .g-3 & .align-items-centerکلاس برای نمایش یک سری برچسب، فرم کنترل ها و دکمه های روی یک ردیف افقی. کنترل های فرم درون خطی فرم ها کمی از حالت های پیش فرض خود متفاوت هستند. کنترل ها فقط به صورت درون خطی ظاهر می شوند درگاههای دیدی که حداقل 576 پیکسل عرض دارند تا درگاههای دید باریک در تلفن همراه را در نظر بگیرند دستگاه ها
اندازه گیری خودکار
اندازه برچسب فرم افقی
حتما استفاده کنید.col-form-label-smیا.col-form-label-lgبه شما<label>s یا<legend>s به درستی از اندازه پیروی کنید.form-control-lgو.form-control-sm.
ردیف را تشکیل دهید
با اضافه کردن.row & .g-2، شما می توانید کنترل داشته باشید عرض ناودان در خطی به عنوان جهت بلوک.