Bootstrap 4 moduli personalizzati

Bootstrap 4 viene fornito con elementi di modulo personalizzati, che hanno lo scopo di sostituire le impostazioni predefinite del browser:

Intervallo personalizzato:

Intervallo predefinito:

Casella di controllo personalizzata

Per creare una casella di controllo personalizzata, avvolgi un elemento contenitore, come <div>, con una classe di .custom-controle .custom-checkboxattorno alla casella di controllo. Quindi aggiungi .custom-control-inputall'input con type="checkbox".

Suggerimento: se utilizzi etichette per il testo di accompagnamento, aggiungi la .custom-control-labelclasse. Nota che il valore dell'attributo for deve corrispondere all'id della casella di controllo:

Esempio

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

Interruttore personalizzato

Per creare un "interruttore a levetta" personalizzato, avvolgi un elemento contenitore, come <div>, con una classe di .custom-controle .custom-switchattorno a una casella di controllo. Quindi aggiungi la .custom-control-inputclasse alla casella di controllo:

Esempio

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

Pulsanti radio personalizzati

Per creare un pulsante di opzione personalizzato, avvolgi un elemento contenitore, come <div>, con una classe di .custom-controle .custom-radioattorno al pulsante di opzione. Quindi aggiungi .custom-control-inputall'input con type="radio".

Suggerimento: se utilizzi etichette per il testo di accompagnamento, aggiungi la .custom-control-labelclasse. Nota che il valore dell'attributo for deve corrispondere all'id della radio:

Esempio

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

Controlli dei moduli personalizzati in linea

Se desideri che i controlli dei moduli personalizzati siano affiancati (in linea), aggiungi .custom-control-inlineal wrapper/contenitore:

Esempio

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

Menu di selezione personalizzato

Per creare un menu di selezione personalizzato, aggiungi la .custom-selectclasse all'elemento <select>:

Esempio

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

Personalizzato Seleziona la dimensione del menu

Usa la .custom-select-smclasse per creare un piccolo menu di selezione e la .custom-select-lgclasse per uno grande:

Esempio

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

Intervallo personalizzato

Per creare un menu di intervallo personalizzato, aggiungi la .custom-rangeclasse a un input con type="<range>":

Esempio

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

Caricamento file personalizzato

Per creare un caricamento di file personalizzato, avvolgi un elemento contenitore con una classe .custom-fileattorno all'input con type="file". Quindi aggiungilo .custom-file-inputad esso.

Suggerimento: se utilizzi etichette per il testo di accompagnamento, aggiungi la .custom-file-labelclasse. Nota che il valore dell'attributo for deve corrispondere all'id della casella di controllo:

Nota che devi anche includere del codice jQuery se vuoi che il nome del file appaia quando selezioni un file specifico:

Esempio

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

Esercitazione Bootstrap 4

Griglia Bootstrap 4

Bootstrap 4 Altro

Bootstrap 4 Rif

Bootstrap 4 moduli personalizzati