Bootstrap 4 persoonlike vorms
Bootstrap 4 persoonlike vorms
Bootstrap 4 kom met pasgemaakte vormelemente, wat bedoel is om blaaier verstek te vervang:
Pasgemaakte reeks:
Verstek reeks:
Pasgemaakte merkblokkie
Om 'n gepasmaakte merkblokkie te skep, draai 'n houerelement, soos <div>, met 'n klas van .custom-controlen .custom-checkboxom die merkblokkie. Voeg dan die .custom-control-inputby die invoer met type="checkbox".
Wenk: As jy byskrifte vir meegaande teks gebruik, voeg die .custom-control-labelklas daarby. Let daarop dat die waarde van die for-kenmerk moet ooreenstem met die ID van die merkblokkie:
Voorbeeld
<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>
Pasgemaakte skakelaar
Om 'n pasgemaakte "wisselskakelaar" te skep, draai 'n houerelement, soos <div>, met 'n klas van .custom-controlen .custom-switchom 'n merkblokkie. Voeg dan die .custom-control-inputklas by die merkblokkie:
Voorbeeld
<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>
Pasgemaakte radioknoppies
Om 'n gepasmaakte radioknoppie te skep, draai 'n houerelement, soos <div>, met 'n klas van .custom-controlen .custom-radioom die radioknoppie. Voeg dan die .custom-control-inputby die invoer met type="radio".
Wenk: As jy byskrifte vir meegaande teks gebruik, voeg die .custom-control-labelklas daarby. Let daarop dat die waarde van die for-kenmerk moet ooreenstem met die id van die radio:
Voorbeeld
<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>
Inlyn persoonlike vormkontroles
As jy wil hê dat die pasgemaakte vormkontroles langs mekaar (inlyn) moet sit, voeg die .custom-control-inlineby die omhulsel/houer:
Voorbeeld
<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>
Gepasmaakte kieskieslys
Om 'n pasgemaakte kieslys te skep, voeg die .custom-selectklas by die <kies> element:
Voorbeeld
<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>
Pasgemaak Kies Kieslysgrootte
Gebruik die .custom-select-smklas om 'n klein kieslys te skep en die .custom-select-lgklas vir 'n groot een:
Voorbeeld
<form>
<!-- Small -->
<select name="cars" class="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-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>
Pasgemaakte reeks
Om 'n pasgemaakte reekskieslys te skep, voeg die .custom-rangeklas by 'n invoer met tipe="<reeks>":
Voorbeeld
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Pasgemaakte lêer oplaai
Om 'n pasgemaakte lêeroplaai te skep, draai 'n houerelement met 'n klas van .custom-fileom die invoer met tipe="file". Voeg dan die .custom-file-inputdaarby.
Wenk: As jy byskrifte vir meegaande teks gebruik, voeg die .custom-file-labelklas daarby. Let daarop dat die waarde van die for-kenmerk moet ooreenstem met die ID van die merkblokkie:
Let daarop dat jy ook 'n paar jQuery-kode moet insluit as jy wil hê dat die naam van die lêer moet verskyn wanneer jy 'n spesifieke lêer kies:
Voorbeeld
<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>