عناصر فرم
مثال و دستورالعمل های استفاده برای سبک های کنترل فرم، گزینه های طرح بندی، و کامپوننت های سفارشی برای ایجاد طیف گسترده ای از فرم ها. در اینجا یک مثال سریع برای نشان دادن سبک های فرم آورده شده است، بنابراین از این کلاس ها برای انتخاب نمایش های سفارشی سازی شده آن ها استفاده کنید.
کنترل های فرم
کنترل های فرم متنی مانند <input> ها، <select> ها، و <textarea>ها با کلاس .form-control سبک دهی شدند. شامل سبک هایی برای ظاهر کلی، حالت فوکوس، اندازه و موارد دیگر است. می توان از کلاس های اضافی برای تغییر این طرح بر اساس هر فرم استفاده کرد.
پیش نمایش حالت
پیش نمایش اندازه
برای کادر ورودی بزرگ یا کوچک از .form-control-lg یا .form-control-sm با .form-control استفاده کنید.
مثال کد
<div class="form-group">
<label class="form-label" for="default-01">متن برچسب ورودی</label>
<div class="form-control-wrap">
<input type="text" class="form-control" id="default-01" placeholder="نگهدارنده متن ورودی">
</div>
</div>
<div class="form-group">
<label class="form-label" for="default-02">برچسب ناحیه متنی</label>
<div class="form-control-wrap">
<textarea class="form-control" id="default-textarea">محتوای ناحیه متنی بزرگ</textarea>
</div>
</div>
فرم خط بیرونی دار
کنترل های فرم متنی مانند <input> ها، <select> ها، و <textarea>ها با کلاس .form-control سبک دهی شدند. شامل سبک هایی برای ظاهر کلی، حالت فوکوس، اندازه و موارد دیگر است. می توان از کلاس های اضافی برای تغییر این طرح بر اساس هر فرم استفاده کرد.
اندازه های خط بیرونی دار
برای عنصر فرم خط بیرونی دار از .form-control-outlined با .form-control استفاده کنید و .form-label را با .form-label-outlined جایگزین کنید، همچنین برچسب را بعد از عنصر ورودی/انتخاب قرار دهید.
مثال کد
<div class="form-group">
<div class="form-control-wrap">
<input type="text" class="form-control form-control-outlined" id="outlined" placeholder="نگهدارنده متن ورودی">
<label class="form-label-outlined" for="outlined">متن برچسب ورودی</label>
</div>
</div>
انتخاب با Select2
به عنوان کلاس .form-select برای پیش فرض <select> استفاده کنید، از کلاس .js-select2 در عنصر <select> برای جایگزینی سبک پیش فرض مرورگر با Select2 استفاده کنید، به عنوان یک کادر انتخاب قابل تنظیم با پشتیبانی از جستجو، برچسب گذاری و بسیاری از گزینه های پرکاربرد دیگر به شما ارائه می دهد. مستندات Select2 را می توانید در اینجا پیدا کنید.
برای اندازه بزرگ یا کوچک Select2، از lg، sm در ویژگی data-ui="" عنصر <select> استفاده کنید. و می توانید از on در ویژگی data-search="" برای نمایش گزینه جستجو در select2 استفاده کنید.
مثال کد
<div class="form-group">
<label class="form-label">Select2 پیش فرض</label>
<div class="form-control-wrap">
<select class="form-select js-select2">
...
</select>
</div>
</div>
