Postavitev
Z našimi možnostmi postavitve obrazcev dajte svojim obrazcem nekaj strukture – od vgrajenih do vodoravnih do implementacij mreže po meri.
Obrazci
Vsaka skupina polj obrazca mora biti v <form>
elementu. Bootstrap ne ponuja privzetega sloga za <form>
element, vendar je privzeto na voljo nekaj zmogljivih funkcij brskalnika.
- Prvič uporabljate obrazce brskalnika? Razmislite o pregledu dokumentov obrazca MDN za pregled in popoln seznam razpoložljivih atributov.
<button>
je znotraj<form>
privzetegatype="submit"
, zato si prizadevajte biti natančni in vedno vključitetype
.- Onemogočite lahko vsak element obrazca znotraj obrazca z
disabled
atributom na<form>
.
Ker se Bootstrap uporablja display: block
za width: 100%
skoraj vse naše kontrolnike obrazcev, bodo obrazci privzeto zloženi navpično. Dodatne razrede je mogoče uporabiti za spreminjanje te postavitve glede na obrazec.
Pripomočki
Pripomočki za robove so najlažji način, da obrazcem dodate nekaj strukture. Zagotavljajo osnovno združevanje oznak, kontrolnike, neobvezno besedilo obrazca in sporočila za preverjanje obrazca. Priporočamo, da se držite margin-bottom
pripomočkov in zaradi doslednosti uporabite eno smer v obrazcu.
Svoje obrazce lahko gradite, kakor želite, s <fieldset>
s, <div>
s ali skoraj katerim koli 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 obrazca
Bolj zapletene oblike je mogoče zgraditi z uporabo naših mrežnih razredov. Uporabite jih za postavitve obrazcev, ki zahtevajo več stolpcev, različne širine in dodatne možnosti poravnave. Zahteva, da je $enable-grid-classes
spremenljivka Sass omogočena (privzeto vklopljena).
<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>
Žlebovi
Z dodajanjem razredov modifikatorjev žlebov lahko nadzorujete širino žlebov tako v smeri kot v bloku. Prav tako zahteva, $enable-grid-classes
da je omogočena spremenljivka Sass (privzeto vklopljena).
<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>
Z mrežnim sistemom je mogoče ustvariti tudi bolj zapletene postavitve.
<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>
Horizontalna oblika
Ustvarite vodoravne obrazce z mrežo tako, da dodate .row
razred skupinam obrazcev in z uporabo .col-*-*
razredov določite širino svojih oznak in kontrolnikov. Prepričajte se, da dodate .col-form-label
tudi svojim <label>
s, da bodo navpično centrirani s svojimi povezanimi kontrolniki obrazca.
Včasih boste morda morali uporabiti pripomočke za rob ali oblazinjenje, da ustvarite popolno poravnavo, ki jo potrebujete. Odstranili smo na primer oznako padding-top
na naših zloženih radijskih vhodih, da bi bolje poravnali osnovno črto besedila.
<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>
Dimenzioniranje etikete vodoravne oblike
Bodite prepričani, da uporabite .col-form-label-sm
ali .col-form-label-lg
za vaš <label>
s ali <legend>
s, da pravilno sledite velikosti .form-control-lg
in .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>
Velikost stolpca
Kot je prikazano v prejšnjih primerih, vam naš mrežni sistem omogoča, da postavite poljubno število .col
s znotraj .row
. Razpoložljivo širino si bodo enakomerno razdelili. Izberete lahko tudi podmnožico vaših stolpcev, ki bo zavzela več ali manj prostora, medtem ko preostali .col
s enakomerno razdelijo preostanek s posebnimi razredi stolpcev, kot 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>
Samodejno določanje velikosti
Spodnji primer uporablja pripomoček flexbox za navpično centriranje vsebine in spremembe .col
, .col-auto
tako da vaši stolpci zavzamejo le toliko prostora, kot je potrebno. Povedano drugače, velikost stolpca je odvisna od vsebine.
<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>
Nato lahko to znova zmešate z razredi stolpcev, specifičnih za velikost.
<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 obrazci
Uporabite .row-cols-*
razrede za ustvarjanje odzivnih vodoravnih postavitev. Z dodajanjem razredov modifikatorjev žlebov bomo imeli žlebove v vodoravni in navpični smeri. Na ozkih mobilnih vidnih oknih .col-12
pomaga zložiti kontrolnike obrazca in drugo. Elemente .align-items-center
obrazca poravna na sredino, kar poskrbi za .form-checkbox
pravilno poravnavo.
<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>