Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

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.

Na tejto stránke

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 hodnoty type="submit", takže sa snažte byť konkrétny a vždy zahrňte type.

Keďže Bootstrap platí display: blocktakmer 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-bottompomô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.

html 
<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-classesaby bola povolená premenná Sass (predvolene zapnutá).

html 
<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-classesaby bola povolená premenná Sass (predvolene zapnutá).

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

html 
<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 .rowtriedy 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-labelaj 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.

Rádia
html 
<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-smalebo .col-form-label-lgna vaše <label>s alebo <legend>s, aby ste správne dodržiavali veľkosť .form-control-lga .form-control-sm.

html 
<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 .cols 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é .cols rovnomerne rozdelia zvyšok so špecifickými triedami stĺpcov, ako je .col-sm-7.

html 
<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 .coltak .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.

@
html 
<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ť.

@
html 
<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-12pomáha ukladať ovládacie prvky formulára a ďalšie. .align-items-centerZarovnáva prvky formulára na stred, čím je zarovnanie .form-checksprávne.

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