عناصر فرم
انواع ورودی
رایج ترین کنترل فرم، فیلدهای ورودی مبتنی بر متن. شامل پشتیبانی از همه انواع 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>باید اول باشد تا بتوانیم از یک انتخابگر خواهر و برادر استفاده کنیم (به عنوان مثال،~).
مثال
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>s نیز به طوری که آنها به صورت عمودی با کنترل های فرم مرتبط خود در مرکز قرار می گیرند.
فرم درون خطی
استفاده کنید.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، می توانید بر عرض ناودان در جهت خطی و بلوک کنترل داشته باشید.