فرم‌های سفارشی
بوت استرپ ۴ عناصر فرم شخصی سازی شده دارد که بمنظور جایگزین کردن پیش فرض مرورگر ایجاد شده‌اند:[۱]
چک باکس سفارشی
برای ایجاد چک باکس سفارشی، آن را داخل یک عنصر ظرف مانند <div> با کلاس .custom-control و .custom-checkbox قرار دهید. سپس .custom-control-input به ورودی با type="checkbox" اضافه کنید.
.custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با id چک باکس مطابقت داشته باشد.مثال
1 <form>
2 <div class="custom-control custom-checkbox">
3 <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
4 <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
5 </div>
6 </form>
سوئیچ سفارشی
برای ایجاد یک “toggle switch” سفارشی، چک باکس را داخل یک عنصر ظرف، مانند <div> ، با کلاس .custom-control و .custom-switch قرار دهید. سپس کلاس .custom-control-input را به چک باکس اضافه کنید:
مثال
1 <form>
2 <div class="custom-control custom-switch">
3 <input type="checkbox" class="custom-control-input" id="switch1">
4 <label class="custom-control-label" for="switch1">Toggle me</label>
5 </div>
6 </form>
Radio Buttonهای سفارشی
برای ایجاد یک radio button، آن را داخل یک عنصر ظرف، مانند <div>، با کلاس .custom-control و .custom-radio قرار دهید. سپس کلاس .custom-control-input را به ورودی با type="radio" اضافه کنید.
.custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با id مربوط به radio button مطابقت داشته باشد.مثال
1 <form>
2 <div class="custom-control custom-radio">
3 <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
4 <label class="custom-control-label" for="customRadio">Custom radio</label>
5 </div>
6 </form>
کنترل های فرم درون خطی سفارشی
اگر می‌خواهید کنترل‌های فرم کنار هم قرار بگیرند (به انگلیسی: inline), کد .custom-control-inline را به ظرف/wrapper اضافه کنید:
مثال
1 <form>
2 <div class="custom-control custom-radio custom-control-inline">
3 <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
4 <label class="custom-control-label" for="customRadio">Custom radio 1</label>
5 </div>
6 <div class="custom-control custom-radio custom-control-inline">
7 <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
8 <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
9 </div>
10 </form>
منوی انتخاب سفارشی
برای ایجاد منوی سفارشی، کلاس .custom-select را به یک عنصر <select> اضافه کنید:
مثال
1 <form>
2 <select name="cars" class="custom-select">
3 <option selected>Custom Select Menu</option>
4 <option value="volvo">Volvo</option>
5 <option value="fiat">Fiat</option>
6 <option value="audi">Audi</option>
7 </select>
8 </form>
اندازه منوی انتخاب سفارشی
از کلاس .custom-select-sm برای ایجاد منوی انتخاب کوچک و از کلاس .custom-select-lg برای ایجاد منوی انتخاب بزرگ استفاده کنید:
مثال
1 <form>
2 <!-- Small -->
3 <select name="cars" class="custom-select-sm">
4 <option selected>Small Custom Select Menu</option>
5 <option value="volvo">Volvo</option>
6 <option value="fiat">Fiat</option>
7 <option value="audi">Audi</option>
8 </select>
9
10 <!-- Large -->
11 <select name="cars" class="custom-select-lg">
12 <option selected>Large Custom Select Menu</option>
13 <option value="volvo">Volvo</option>
14 <option value="fiat">Fiat</option>
15 <option value="audi">Audi</option>
16 </select>
17 </form>
Range سفارشی
برای ایجاد منوی range سفارشی، کلاس .custom-range را به یک ورودی با type=”<range>” اضافه کنید:
مثال
1 <form>
2 <label for="customRange">Custom range</label>
3 <input type="range" class="custom-range" id="customRange" name="points1">
4 </form>
بارگذاری فایل سفارشی
برای ایجاد آپلود فایل سفارشی، ورودی با type=”file” را داخل یک ظرف با کلاس .custom-file قرار دهید. سپس .custom-file-input را به ورودی اضافه کنید.
.custom-file-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با id چک باکس مطابقت داشته باشد.دقت کنید اگر می‌خواهید هنگام انتخاب یک فایل خاص، نام آن نمایش داده شود، باید کد jQuery را نیز اضافه کنید:
مثال
1 <form>
2 <div class="custom-file">
3 <input type="file" class="custom-file-input" id="customFile">
4 <label class="custom-file-label" for="customFile">Choose file</label>
5 </div>
6 </form>
7
8 <script>
9 // Add the following code if you want the name of the file appear on select
10 $(".custom-file-input").on("change", function() {
11 var fileName = $(this).val().split("\\").pop();
12 $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
13 });
14 </script>
منابع آموزشی