Bootstrap 4 vlastní formuláře
Bootstrap 4 vlastní formuláře
Bootstrap 4 přichází s přizpůsobenými prvky formuláře, které mají nahradit výchozí nastavení prohlížeče:
Vlastní rozsah:
Výchozí rozsah:
Vlastní zaškrtávací políčko
Chcete-li vytvořit vlastní zaškrtávací políčko, obalte prvek kontejneru, například <div>, třídou zaškrtávacího políčka .custom-controla .custom-checkboxkolem něj. Poté přidejte .custom-control-inputdo vstupu pomocí type="checkbox".
Tip: Pokud pro doprovodný text používáte štítky, přidejte .custom-control-labelk němu třídu. Všimněte si, že hodnota atributu for by měla odpovídat id zaškrtávacího políčka:
Příklad
<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>
Vlastní přepínač
Chcete-li vytvořit vlastní „přepínač“, obalte prvek kontejneru, například <div>, třídou .custom-controla .custom-switchkolem zaškrtávacího políčka. Poté přidejte .custom-control-inputtřídu do zaškrtávacího políčka:
Příklad
<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>
Vlastní rádiová tlačítka
Chcete-li vytvořit vlastní přepínač, obalte prvek kontejneru, například <div>, třídou přepínače .custom-controla kolem něj. .custom-radioPoté přidejte .custom-control-inputdo vstupu pomocí type="radio".
Tip: Pokud pro doprovodný text používáte štítky, přidejte .custom-control-labelk němu třídu. Všimněte si, že hodnota atributu for by měla odpovídat id rádia:
Příklad
<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>
Vložené ovládací prvky vlastního formuláře
Pokud chcete, aby ovládací prvky vlastního formuláře seděly vedle sebe (inline), přidejte .custom-control-inlinedo obálky/kontejneru:
Příklad
<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>
Vlastní výběrová nabídka
Chcete-li vytvořit vlastní výběrovou nabídku, přidejte .custom-selecttřídu do prvku <select>:
Příklad
<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>
Custom Select Menu Size
Pomocí .custom-select-smtřídy vytvořte malou výběrovou nabídku a .custom-select-lgtřídu pro velkou:
Příklad
<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>
Vlastní rozsah
Chcete-li vytvořit vlastní nabídku rozsahu, přidejte .custom-rangetřídu do vstupu s type="<range>":
Příklad
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Vlastní nahrání souboru
Chcete-li vytvořit vlastní nahrání souboru, obalte prvek kontejneru s třídou .custom-filekolem vstupu s type="file". Pak .custom-file-inputk tomu přidejte.
Tip: Pokud pro doprovodný text používáte štítky, přidejte .custom-file-labelk němu třídu. Všimněte si, že hodnota atributu for by měla odpovídat id zaškrtávacího políčka:
Pokud chcete, aby se název souboru zobrazil při výběru konkrétního souboru, musíte také zahrnout nějaký kód jQuery:
Příklad
<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>