Bootstrap 4 benutzerdefinierte Formulare
Bootstrap 4 benutzerdefinierte Formulare
Bootstrap 4 enthält angepasste Formularelemente, die die Standardeinstellungen des Browsers ersetzen sollen:
Benutzerdefinierten Bereich:
Standardbereich:
Benutzerdefiniertes Kontrollkästchen
Um ein benutzerdefiniertes Kontrollkästchen zu erstellen, umschließen Sie ein Containerelement wie <div> mit einer Klasse von .custom-controlund .custom-checkboxum das Kontrollkästchen. Fügen Sie .custom-control-inputdann die mit type="checkbox" zur Eingabe hinzu.
Tipp: Wenn Sie Beschriftungen für begleitenden Text verwenden, fügen Sie die .custom-control-labelKlasse hinzu. Beachten Sie, dass der Wert des for-Attributs mit der ID des Kontrollkästchens übereinstimmen sollte:
Beispiel
<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>
Benutzerdefinierter Schalter
Um einen benutzerdefinierten „Umschalter“ zu erstellen, umschließen Sie ein Containerelement wie <div> mit einer Klasse von .custom-controlund .custom-switchum ein Kontrollkästchen. Fügen Sie dann die .custom-control-inputKlasse zum Kontrollkästchen hinzu:
Beispiel
<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>
Benutzerdefinierte Optionsfelder
Um ein benutzerdefiniertes Optionsfeld zu erstellen, umschließen Sie ein Containerelement wie <div> mit einer Klasse von .custom-controlund .custom-radioum das Optionsfeld. Fügen Sie .custom-control-inputdann die mit type="radio" zur Eingabe hinzu.
Tipp: Wenn Sie Beschriftungen für begleitenden Text verwenden, fügen Sie die .custom-control-labelKlasse hinzu. Beachten Sie, dass der Wert des for-Attributs mit der ID des Radios übereinstimmen sollte:
Beispiel
<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-Steuerelemente für benutzerdefinierte Formulare
Wenn Sie möchten, dass die benutzerdefinierten Formularsteuerelemente nebeneinander (inline) angeordnet sind, fügen Sie .custom-control-inlinedem Wrapper/Container Folgendes hinzu:
Beispiel
<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>
Benutzerdefiniertes Auswahlmenü
Um ein benutzerdefiniertes Auswahlmenü zu erstellen, fügen Sie die .custom-selectKlasse zum <select>-Element hinzu:
Beispiel
<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>
Benutzerdefiniert Menügröße auswählen
Verwenden Sie die .custom-select-smKlasse, um ein kleines Auswahlmenü zu erstellen, und die .custom-select-lgKlasse für ein großes:
Beispiel
<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>
Benutzerdefinierten Bereich
Um ein benutzerdefiniertes Bereichsmenü zu erstellen, fügen Sie die .custom-rangeKlasse mit type="<range>" zu einer Eingabe hinzu:
Beispiel
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Benutzerdefinierter Datei-Upload
Um einen benutzerdefinierten Dateiupload zu erstellen, umschließen Sie .custom-filedie Eingabe mit type="file" mit einem Containerelement mit einer Klasse von . Fügen Sie dann die hinzu .custom-file-input.
Tipp: Wenn Sie Beschriftungen für begleitenden Text verwenden, fügen Sie die .custom-file-labelKlasse hinzu. Beachten Sie, dass der Wert des for-Attributs mit der ID des Kontrollkästchens übereinstimmen sollte:
Beachten Sie, dass Sie auch etwas jQuery-Code einfügen müssen, wenn Sie möchten, dass der Name der Datei angezeigt wird, wenn Sie eine bestimmte Datei auswählen:
Beispiel
<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>