Izgled
Dajte svojim obrascima određenu strukturu—od inline preko vodoravne do prilagođene implementacije rešetke—s našim opcijama izgleda obrasca.
Obrasci
Svaka grupa polja obrasca trebala bi se nalaziti u <form>
elementu. Bootstrap ne nudi zadani stil za <form>
element, ali postoje neke moćne značajke preglednika koje su dostupne prema zadanim postavkama.
- Novi ste u obrascima preglednika? Razmislite o pregledu dokumenata MDN obrazaca za pregled i potpuni popis dostupnih atributa.
<button>
unutar<form>
zadanogtype="submit"
, stoga nastojte biti specifični i uvijek uključitetype
.- Možete onemogućiti svaki element obrasca unutar obrasca s
disabled
atributom na<form>
.
Budući da se Bootstrap primjenjuje display: block
na width: 100%
gotovo sve naše kontrole obrazaca, obrasci će se prema zadanim postavkama slagati okomito. Dodatne klase mogu se koristiti za mijenjanje ovog izgleda na temelju obrasca.
Komunalije
Pomoćni programi za margine najlakši su način za dodavanje neke strukture obrascima. Omogućuju osnovno grupiranje oznaka, kontrola, izbornog teksta obrasca i poruka za potvrdu valjanosti obrasca. Preporučujemo da se držite margin-bottom
uslužnih programa i koristite jedan smjer kroz obrazac radi dosljednosti.
Slobodno gradite svoje oblike kako god želite, sa <fieldset>
s, <div>
s ili gotovo bilo kojim drugim elementom.
<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>
Mreža oblika
Složenije forme mogu se izgraditi korištenjem naših mrežnih klasa. Koristite ih za rasporede obrazaca koji zahtijevaju više stupaca, različite širine i dodatne mogućnosti poravnanja. Zahtijeva da $enable-grid-classes
varijabla Sass bude omogućena (uključena prema zadanim postavkama).
<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>
Oluci
Dodavanjem klasa modifikatora oluka možete imati kontrolu nad širinom oluka u smjeru unutarnjeg i bloka. Također zahtijeva da $enable-grid-classes
varijabla Sass bude omogućena (uključena prema zadanim postavkama).
<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>
Složeniji izgledi također se mogu stvoriti pomoću sustava rešetki.
<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>
Horizontalni oblik
Stvorite vodoravne forme s mrežom dodavanjem .row
klase u grupe obrazaca i korištenjem .col-*-*
klasa za određivanje širine vaših oznaka i kontrola. Obavezno dodajte .col-form-label
i svojim <label>
s tako da budu okomito centrirani s pripadajućim kontrolama obrasca.
Ponekad ćete možda trebati koristiti pomoćne programe za margine ili podstave kako biste stvorili ono savršeno poravnanje koje vam je potrebno. Na primjer, uklonili smo padding-top
oznaku s naslaganih radijskih ulaza kako bismo bolje poravnali osnovnu liniju teksta.
<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>
Određivanje veličine naljepnice vodoravnog oblika
Obavezno koristite .col-form-label-sm
ili .col-form-label-lg
za svoje <label>
s ili <legend>
s kako biste točno pratili veličinu .form-control-lg
i .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>
Dimenzioniranje stupaca
Kao što je prikazano u prethodnim primjerima, naš mrežni sustav omogućuje postavljanje bilo kojeg broja .col
s unutar .row
. Oni će ravnomjerno podijeliti dostupnu širinu. Također možete odabrati podskup svojih stupaca koji će zauzeti više ili manje prostora, dok preostali .col
podjednako dijele ostatak, s određenim klasama stupaca poput .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>
Automatsko određivanje veličine
Primjer u nastavku koristi uslužni program flexbox za okomito centriranje sadržaja i promjene tako .col
da .col-auto
vaši stupci zauzimaju onoliko prostora koliko je potrebno. Drugim riječima, veličina stupca ovisi o sadržaju.
<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>
Zatim to možete ponovno pomiješati s klasama stupaca specifičnih za veličinu.
<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 obrasci
Upotrijebite .row-cols-*
klase za stvaranje odgovarajućih vodoravnih izgleda. Dodavanjem klasa modifikatora oluka imat ćemo oluke u vodoravnom i okomitom smjeru. Na uskim mobilnim prikazima, .col-12
pomaže u slaganju kontrola obrazaca i više. .align-items-center
Poravnava elemente obrasca prema sredini, čineći .form-checkbox
pravilno poravnanje .
<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>