Rozloženie
Dajte svojim formulárom určitú štruktúru – od vložených cez horizontálne až po implementáciu vlastnej mriežky – s našimi možnosťami rozloženia formulárov.
Formuláre
Každá skupina polí formulára by sa mala nachádzať v <form>
prvku. Bootstrap neposkytuje pre prvok žiadny predvolený štýl <form>
, existujú však niektoré výkonné funkcie prehliadača, ktoré sú štandardne poskytované.
- Ste novým používateľom formulárov prehliadača? Zvážte prezretie si dokumentov formulára MDN , kde nájdete prehľad a úplný zoznam dostupných atribútov.
<button>
s v rámci<form>
predvolenej hodnotytype="submit"
, takže sa snažte byť konkrétny a vždy zahrňtetype
.- Každý prvok formulára vo formulári môžete zakázať pomocou
disabled
atribútu na<form>
.
Keďže Bootstrap platí display: block
takmer width: 100%
pre všetky naše ovládacie prvky formulárov, formuláre sa štandardne ukladajú vertikálne. Na zmenu tohto rozloženia na základe jednotlivých formulárov možno použiť ďalšie triedy.
Verejné služby
Okrajové nástroje sú najjednoduchším spôsobom, ako pridať určitú štruktúru do formulárov. Poskytujú základné zoskupenie štítkov, ovládacích prvkov, voliteľného textu formulára a správ na overenie formulára. Odporúčame držať sa margin-bottom
pomôcok a použiť jeden smer v celom formulári kvôli konzistencii.
Neváhajte a vytvorte si formuláre, ako sa vám páči, s <fieldset>
s, <div>
s alebo takmer s akýmkoľvek iným prvkom.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
Mriežka formulára
Zložitejšie formuláre je možné zostaviť pomocou našich tried mriežky. Použite ich pre rozloženia formulárov, ktoré vyžadujú viacero stĺpcov, rôzne šírky a ďalšie možnosti zarovnania. Vyžaduje, $enable-grid-classes
aby bola povolená premenná Sass (predvolene zapnutá).
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Odkvapy
Pridaním tried modifikátorov odkvapov môžete mať kontrolu nad šírkou odkvapu v smere inline aj v smere bloku. Vyžaduje tiež, $enable-grid-classes
aby bola povolená premenná Sass (predvolene zapnutá).
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Pomocou mriežkového systému je možné vytvárať aj zložitejšie rozloženia.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
Horizontálny tvar
Vytvorte vodorovné formuláre s mriežkou pridaním .row
triedy do skupín formulárov a použitím .col-*-*
tried na určenie šírky štítkov a ovládacích prvkov. Nezabudnite pridať .col-form-label
aj do svojich <label>
s, aby boli vertikálne vycentrované s príslušnými ovládacími prvkami formulára.
Niekedy možno budete musieť použiť pomocné nástroje pre okraje alebo výplň, aby ste vytvorili dokonalé zarovnanie, ktoré potrebujete. Odstránili sme napríklad padding-top
štítok naskladaných rádiových vstupov, aby sme lepšie zarovnali základňu textu.
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Horizontálne formátovanie štítkov
Uistite sa, že používate .col-form-label-sm
alebo .col-form-label-lg
na vaše <label>
s alebo <legend>
s, aby ste správne dodržiavali veľkosť .form-control-lg
a .form-control-sm
.
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="row mb-3">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
Dimenzovanie stĺpcov
Ako je uvedené v predchádzajúcich príkladoch, náš mriežkový systém vám umožňuje umiestniť ľubovoľný počet .col
s do .row
. Rovnomerne rozdelia dostupnú šírku medzi seba. Môžete si tiež vybrať podmnožinu svojich stĺpcov, aby zaberali viac alebo menej miesta, zatiaľ čo zvyšné .col
s rovnomerne rozdelia zvyšok so špecifickými triedami stĺpcov, ako je .col-sm-7
.
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
Automatické nastavenie veľkosti
V nižšie uvedenom príklade sa používa nástroj flexbox na vertikálne vycentrovanie obsahu a zmeny .col
tak .col-auto
, aby vaše stĺpce zaberali len toľko miesta, koľko je potrebné. Inak povedané, veľkosť stĺpca závisí od obsahu.
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Potom to môžete znova zmiešať s triedami stĺpcov špecifických pre veľkosť.
<form class="row gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Inline formuláre
Použite .row-cols-*
triedy na vytvorenie responzívnych horizontálnych rozložení. Pridaním tried modifikátorov odkvapov získame odkvapy v horizontálnom a vertikálnom smere. V úzkych mobilných zobrazovacích poliach .col-12
pomáha ukladať ovládacie prvky formulára a ďalšie. .align-items-center
Zarovnáva prvky formulára na stred, čím je zarovnanie .form-checkbox
správne.
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>