BS4 maxsus formalar
Bootstrap 4 maxsus formalari
Bootstrap 4 brauzerning standart forma elementlari o‘rniga ishlatish uchun mo‘ljallangan maxsus (custom) forma elementlarini taqdim etadi:
Custom Range:
Default Range:
Maxsus checkbox
Maxsus checkbox yaratish uchun checkbox’ni .custom-control va .custom-checkbox klasslariga ega konteyner element (masalan, <div>) bilan o‘rang. So‘ngra type="checkbox" bo‘lgan input elementiga .custom-control-input ni qo‘shing.
Maslahat: Agar izoh matni uchun label ishlatsangiz, unga .custom-control-label klassini qo‘shing. E’tibor bering, for atributining qiymati checkbox’ning id’siga mos kelishi kerak:
Misol
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</form>
O‘zingiz sinab ko‘ring »
Maxsus almashtirgich (switch)
Maxsus "almashtirgich" (toggle switch) yaratish uchun checkbox’ni .custom-control va .custom-switch klasslariga ega konteyner element (masalan, <div>) bilan o‘rang. So‘ngra checkbox’ga .custom-control-input klassini qo‘shing:
Misol
<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>
O‘zingiz sinab ko‘ring »
Maxsus radio tugmalar
Maxsus radio tugma yaratish uchun radio tugmani .custom-control va .custom-radio klasslariga ega konteyner element (masalan, <div>) bilan o‘rang. So‘ngra type="radio" bo‘lgan input elementiga .custom-control-input ni qo‘shing.
Maslahat: Agar izoh matni uchun label ishlatsangiz, unga .custom-control-label klassini qo‘shing. E’tibor bering, for atributining qiymati radio tugmaning id’siga mos kelishi kerak:
Misol
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>
O‘zingiz sinab ko‘ring »
Bir qatordagi maxsus forma elementlari
Agar maxsus forma elementlari yonma-yon (bir qatorda) joylashishini istasangiz, o‘rovchi element/konteynerga .custom-control-inline ni qo‘shing:
Misol
<form>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
<label class="custom-control-label" for="customRadio">Custom radio 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
<label class="custom-control-label" for="customRadio2">Custom radio 2</label>
</div>
</form>
O‘zingiz sinab ko‘ring »
Maxsus tanlash menyusi (select)
Maxsus tanlash menyusini yaratish uchun <select> elementiga .custom-select klassini qo‘shing:
Misol
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
O‘zingiz sinab ko‘ring »
Maxsus tanlash menyusi o‘lchami
Kichik tanlash menyusini yaratish uchun .custom-select-sm klassidan, kattasi uchun esa .custom-select-lg klassidan foydalaning:
Misol
<form>
<!-- Small -->
<select name="cars" class="custom-select custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select custom-select-lg">
<option selected>Large Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
O‘zingiz sinab ko‘ring »
Maxsus diapazon (range)
Maxsus diapazon (range) elementini yaratish uchun type="<range>" bo‘lgan input elementiga .custom-range klassini qo‘shing:
Misol
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
O‘zingiz sinab ko‘ring »
Maxsus fayl yuklash maydoni
Maxsus fayl yuklash maydonini yaratish uchun type="file" bo‘lgan input elementini .custom-file klassiga ega konteyner element bilan o‘rang. So‘ngra unga .custom-file-input ni qo‘shing.
Maslahat: Agar izoh matni uchun label ishlatsangiz, unga .custom-file-label klassini qo‘shing. E’tibor bering, for atributining qiymati checkbox’ning id’siga mos kelishi kerak:
E’tibor bering, muayyan faylni tanlaganingizda uning nomi ko‘rinishini istasangiz, biroz jQuery kodini ham qo‘shishingiz kerak:
Misol
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!