Bootstrap formuláře
Výchozí nastavení bootstrapu
Ovládací prvky formuláře automaticky získají určitý globální styl s Bootstrap:
Všechny textové prvky <input>, <textarea>a
<select>prvky s třídou .form-controlmají šířku 100 %.
Bootstrap Form Layouts
Bootstrap nabízí tři typy rozvržení formuláře:
- Vertikální forma (toto je výchozí)
- Horizontální tvar
- Inline formulář
Standardní pravidla pro všechna tři rozvržení formuláře:
- Zabalte štítky a ovládací prvky formuláře
<div class="form-group">(potřebné pro optimální rozestupy) - Přidejte třídu
.form-controlke všem textovým prvkům<input>,<textarea>a<select>
Bootstrap Vertical Form (výchozí)
Následující příklad vytvoří vertikální formulář se dvěma vstupními poli, jedním zaškrtávacím políčkem a tlačítkem Odeslat:
Příklad
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Inline Form
V inline formě jsou všechny prvky vložené, zarovnané doleva a štítky jsou vedle sebe.
Poznámka: Toto platí pouze pro formuláře ve výřezech, které jsou široké alespoň 768 pixelů!
Další pravidlo pro vložený formulář:
- Přidejte
.form-inlinedo<form>prvku třídu
Následující příklad vytvoří vložený formulář se dvěma vstupními poli, jedním zaškrtávacím políčkem a jedním tlačítkem pro odeslání:
Příklad
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Tip: Pokud nezahrnete štítek pro každý vstup, budou mít čtečky obrazovky potíže s vašimi formuláři. Štítky pro všechna zařízení kromě čteček obrazovky můžete skrýt pomocí
.sr-onlytřídy:
Příklad
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap Horizontální forma
Vodorovná forma znamená, že štítky jsou na velkých a středních obrazovkách zarovnány vedle vstupního pole (vodorovně). Na malých obrazovkách (767px a méně) se transformuje do svislé formy (štítky jsou umístěny nad každým vstupem).
Další pravidla pro horizontální formulář:
- Přidejte
.form-horizontaldo<form>prvku třídu - Přidejte třídu
.control-labelke všem<label>prvkům
Tip: Pomocí předdefinovaných tříd mřížky Bootstrapu zarovnejte popisky a skupiny ovládacích prvků formuláře ve vodorovném rozvržení.
Následující příklad vytvoří vodorovný formulář se dvěma vstupními poli, jedním zaškrtávacím políčkem a jedním tlačítkem pro odeslání.
Příklad
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>