Bootstrap 4 aangepaste formulieren
Bootstrap 4 aangepaste formulieren
Bootstrap 4 wordt geleverd met aangepaste formulierelementen, die bedoeld zijn om de standaardinstellingen van de browser te vervangen:
Aangepast bereik:
Standaard bereik:
Aangepast selectievakje
Om een aangepast selectievakje te maken, plaatst u een containerelement, zoals <div>, met een klasse van .custom-controlen .custom-checkboxrond het selectievakje. Voeg vervolgens de toe .custom-control-inputaan de invoer met type="checkbox".
Tip: Als je labels gebruikt voor begeleidende tekst, voeg dan de .custom-control-labelklasse toe. Merk op dat de waarde van het for-attribuut overeen moet komen met de id van het selectievakje:
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>
Aangepaste schakelaar
Om een aangepaste "tuimelschakelaar" te maken, plaatst u een containerelement, zoals <div>, met een klasse van .custom-controlen .custom-switchrond een selectievakje. Voeg vervolgens de .custom-control-inputklasse toe aan het selectievakje:
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>
Aangepaste keuzerondjes
Om een aangepast keuzerondje te maken, plaatst u een containerelement, zoals <div>, met een klasse van .custom-controlen .custom-radiorond het keuzerondje. Voeg vervolgens de toe .custom-control-inputaan de invoer met type="radio".
Tip: Als je labels gebruikt voor begeleidende tekst, voeg dan de .custom-control-labelklasse toe. Merk op dat de waarde van het for-attribuut overeen moet komen met de id van de 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>
Inline aangepaste formulierbesturingen
Als u wilt dat de besturingselementen voor aangepaste formulieren naast elkaar (inline) staan, voegt u het volgende toe .custom-control-inlineaan de wrapper/container:
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>
Aangepast keuzemenu
Om een aangepast selectiemenu te maken, voegt u de .custom-selectklasse toe aan het <select>-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>
Aangepaste menugrootte selecteren
Gebruik de .custom-select-smklas om een klein selectiemenu te maken en de .custom-select-lgklas voor een groot menu:
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>
Aangepast bereik
Om een aangepast bereikmenu te maken, voegt u de .custom-rangeklasse toe aan een invoer met type="<bereik>":
Voorbeeld
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Aangepast bestand uploaden
Om een aangepaste bestandsupload te maken, wikkelt u een containerelement met een klasse van .custom-filerond de invoer met type="file". Voeg er dan de .custom-file-inputaan toe.
Tip: Als je labels gebruikt voor begeleidende tekst, voeg dan de .custom-file-labelklasse toe. Merk op dat de waarde van het for-attribuut overeen moet komen met de id van het selectievakje:
Merk op dat je ook wat jQuery-code moet opnemen als je wilt dat de naam van het bestand verschijnt wanneer je een specifiek bestand selecteert:
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>