Layout
Gitt Är Formen eng Struktur - vun inline bis horizontal bis personaliséiert Gitterimplementatiounen - mat eise Formlayoutoptiounen.
Formen
All Grupp vu Formfelder soll an engem <form>
Element wunnen. Bootstrap stellt kee Standard Styling fir d' <form>
Element, awer et ginn e puer mächteg Browserfeatures déi standardiséiert ginn.
- Nei zu Browser Formen? Betruecht d'MDN Form Dokumenter ze iwwerpréiwen fir en Iwwerbléck a komplett Lëscht vun verfügbaren Attributer.
<button>
s bannent engem<form>
Default zetype="submit"
, also striewen spezifesch ze sinn an ëmmer eng enthalentype
.- Dir kënnt all Formelement an enger Form mat dem
disabled
Attribut op der<form>
.
Zënter Bootstrap gëlt display: block
a width: 100%
fir bal all eis Form Kontrollen, Forme ginn standardiséiert vertikal gestapelt. Zousätzlech Klassen kënne benotzt ginn fir dëse Layout op enger Performbasis ze variéieren.
Utilities
Margin Utilities sinn deen einfachste Wee fir eng Struktur op Formen ze addéieren. Si bidden Basis Gruppéierung vun Etiketten, Kontrollen, optional Form Text, a Form Validatioun Messagerie. Mir recommandéieren Iech un margin-bottom
Utilities ze halen, an eng eenzeg Richtung uechter d'Form ze benotzen fir Konsistenz.
Fillt gratis Är Formen ze bauen wéi Dir wëllt, mat <fieldset>
s, <div>
s, oder bal all aner Element.
<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>
Form Gitter
Méi komplex Forme kënne mat eise Gitterklassen gebaut ginn. Benotzt dës fir Form Layouten déi verschidde Kolonnen, variéiert Breeten an zousätzlech Ausriichtungsoptiounen erfuerderen. Verlaangt datt d' $enable-grid-classes
Sass Variabel aktivéiert ass (op Standard).
<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>
Gutters
Andeems Dir Rennmodifikateur Klassen bäidréit , kënnt Dir Kontroll iwwer d'Grennebreet an der Inline wéi och an der Blockrichtung hunn. Erfuerdert och datt d' $enable-grid-classes
Sass Variabel aktivéiert ass (op Standard).
<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>
Méi komplex Layouten kënnen och mam Gittersystem erstallt ginn.
<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>
Horizontal Form
Erstellt horizontale Forme mam Gitter andeems Dir d' .row
Klass bäidréit fir Gruppen ze bilden an d' .col-*-*
Klassen ze benotzen fir d'Breet vun Ären Etiketten a Kontrollen ze spezifizéieren. Gitt sécher och .col-form-label
op Är <label>
s ze addéieren sou datt se vertikal mat hiren assoziéierte Formkontrolle zentréiert sinn.
Heiansdo musst Dir vläicht Margin oder Padding Utilities benotzen fir déi perfekt Ausrichtung ze kreéieren déi Dir braucht. Zum Beispill hu mir den padding-top
op eisem gestapelten Radio-Input Label geläscht fir d'Textbaseline besser auszegläichen.
<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>
Horizontal Form Label Gréisst
Gitt sécher ze benotzen .col-form-label-sm
oder .col-form-label-lg
op Är <label>
s oder <legend>
s fir d'Gréisst vun .form-control-lg
a richteg ze verfollegen .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>
Kolonn Gréisst
Wéi an de fréiere Beispiller gewisen, erlaabt eise Gittersystem Iech all Zuel vu .col
s an engem .row
. Si verdeelen déi verfügbar Breet gläich tëscht hinnen. Dir kënnt och e Subset vun Äre Kolonnen auswielen fir méi oder manner Plaz opzehuelen, während déi verbleiwen .col
s de Rescht gläich opgedeelt hunn, mat spezifesche Kolonnklassen wéi .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>
Automatesch Gréisst
D'Beispill hei drënner benotzt e Flexbox Utility fir den Inhalt vertikal ze zentréieren an z'änneren .col
sou .col-auto
datt Är Kolonnen nëmmen esou vill Plaz ophuelen wéi néideg. Anescht gesot, d'Kolonngréisst selwer baséiert op den Inhalt.
<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>
Dir kënnt dat dann nach eng Kéier mat Gréisst-spezifesch Kolonn Klassen remixen.
<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 Formen
Benotzt d' .row-cols-*
Klassen fir reaktiounsfäeger horizontal Layouten ze kreéieren. Andeems Dir Rennenmodifizéierungsklassen bäidréit , hu mir Rennen an horizontalen a vertikale Richtungen. Op schmuel mobil viewports .col-12
hëlleft der Form Kontrollen Stack a méi. D' .align-items-center
alignéiert d'Formelementer an d'Mëtt, sou datt d' .form-checkbox
Ausrichtung richteg ass.
<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>