Bootstrap 4 niestandardowe formularze

Bootstrap 4 zawiera niestandardowe elementy formularzy, które mają zastąpić domyślne ustawienia przeglądarki:

Zakres niestandardowy:

Zakres domyślny:

Niestandardowe pole wyboru

Aby utworzyć niestandardowe pole wyboru, zawiń element kontenera, taki jak <div>, klasą .custom-controli .custom-checkboxwokół pola wyboru. Następnie dodaj .custom-control-inputdo wejścia z typem = "pole wyboru".

Porada: Jeśli używasz etykiet do towarzyszącego tekstu, dodaj do .custom-control-labelniego klasę. Zwróć uwagę, że wartość atrybutu for powinna odpowiadać identyfikatorowi pola wyboru:

Przykład

<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>

Przełącznik niestandardowy

Aby utworzyć niestandardowy „przełącznik”, otocz element kontenera, taki jak <div>, klasą .custom-controli .custom-switchwokół pola wyboru. Następnie dodaj .custom-control-inputklasę do pola wyboru:

Przykład

<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>

Niestandardowe przyciski radiowe

Aby utworzyć niestandardowy przycisk radiowy, zawiń element kontenera, taki jak <div>, klasą .custom-controli .custom-radiowokół przycisku radiowego. Następnie dodaj .custom-control-inputdo wejścia z typem = "radio".

Porada: Jeśli używasz etykiet do towarzyszącego tekstu, dodaj do .custom-control-labelniego klasę. Zauważ, że wartość atrybutu for powinna odpowiadać identyfikatorowi radia:

Przykład

<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>

Wbudowane kontrolki formularzy niestandardowych

Jeśli chcesz, aby niestandardowe kontrolki formularza znajdowały się obok siebie (w linii), dodaj .custom-control-inlinedo opakowania/kontenera:

Przykład

<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>

Niestandardowe menu wyboru

Aby utworzyć niestandardowe menu wyboru, dodaj .custom-selectklasę do elementu <select>:

Przykład

<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>

Niestandardowy rozmiar menu wyboru

Użyj .custom-select-smklasy, aby utworzyć małe menu wyboru, a .custom-select-lgklasę dla dużego:

Przykład

<form>

<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>


<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>

Zakres niestandardowy

Aby utworzyć niestandardowe menu zakresu, dodaj .custom-rangeklasę do danych wejściowych z typem="<range>":

Przykład

<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>

Przesyłanie plików niestandardowych

Aby utworzyć niestandardowe przesyłanie pliku, owiń element kontenera klasą .custom-filewokół danych wejściowych z typem="file". Następnie dodaj .custom-file-inputdo tego.

Porada: Jeśli używasz etykiet do towarzyszącego tekstu, dodaj do .custom-file-labelniego klasę. Zwróć uwagę, że wartość atrybutu for powinna odpowiadać identyfikatorowi pola wyboru:

Pamiętaj, że musisz również dołączyć trochę kodu jQuery, jeśli chcesz, aby nazwa pliku pojawiała się po wybraniu konkretnego pliku:

Przykład

<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>

Samouczek Bootstrap 4

Siatka Bootstrap 4

Bootstrap 4 Inne

Bootstrap 4 Ref

Bootstrap 4 niestandardowe formularze