Izkārtojums
Izmantojot mūsu veidlapu izkārtojuma opcijas, piešķiriet savām veidlapām kādu struktūru — no iekļautas līdz horizontālai līdz pielāgotai režģa ieviešanai.
Veidlapas
Katrai veidlapas lauku grupai ir jāatrodas <form>
elementā. Bootstrap nenodrošina <form>
elementa noklusējuma stilu, taču ir dažas jaudīgas pārlūkprogrammas funkcijas, kas tiek nodrošinātas pēc noklusējuma.
- Vai neesat izmantojis pārlūkprogrammas veidlapas? Apsveriet iespēju pārskatīt MDN veidlapas dokumentus , lai iegūtu pārskatu un pilnu pieejamo atribūtu sarakstu.
<button>
<form>
Noklusējuma robežās irtype="submit"
, tāpēc centieties būt precīzs un vienmēr iekļaujiettype
.- Varat atspējot katru formas elementu veidlapā, izmantojot
disabled
atribūtu<form>
.
Tā kā Bootstrap tiek lietots display: block
un width: 100%
gandrīz visām mūsu veidlapu vadīklām, veidlapas pēc noklusējuma tiks krautas vertikāli. Papildu klases var izmantot, lai mainītu šo izkārtojumu atkarībā no veidlapas.
Komunālie pakalpojumi
Margin utilītas ir vienkāršākais veids, kā veidlapām pievienot kādu struktūru. Tie nodrošina pamata iezīmju grupēšanu, vadīklas, izvēles veidlapas tekstu un veidlapas validācijas ziņojumu. Mēs iesakām pieturēties pie margin-bottom
komunālajiem pakalpojumiem un konsekvences nodrošināšanai visā veidlapā izmantot vienu virzienu.
Jūtieties brīvi veidot savas veidlapas, kā vēlaties, izmantojot <fieldset>
s, <div>
s vai gandrīz jebkuru citu elementu.
<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>
Veidlapas režģis
Sarežģītākas formas var izveidot, izmantojot mūsu režģa klases. Izmantojiet tos veidlapu izkārtojumiem, kuriem nepieciešamas vairākas kolonnas, dažādi platumi un papildu līdzināšanas opcijas. Nepieciešams, lai $enable-grid-classes
Sass mainīgais būtu iespējots (ieslēgts pēc noklusējuma).
<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>
Notekcaurules
Pievienojot noteku modifikatoru klases , varat kontrolēt notekas platumu, kā arī iekšā un bloka virzienā. Nepieciešams arī $enable-grid-classes
iespējot Sass mainīgo (ieslēgts pēc noklusējuma).
<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>
Ar režģa sistēmu var izveidot arī sarežģītākus izkārtojumus.
<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ālā forma
Izveidojiet horizontālas veidlapas ar režģi, pievienojot .row
klasi grupām un izmantojot .col-*-*
klases, lai norādītu iezīmju un vadīklu platumu. Noteikti pievienojiet .col-form-label
arī savas <label>
s, lai tās būtu vertikāli centrētas ar tām saistītajām veidlapu vadīklām.
Reizēm jums, iespējams, ir jāizmanto piemaļu vai polsterējuma utilītas, lai izveidotu vajadzīgo perfekto līdzinājumu. Piemēram, mēs esam noņēmuši padding-top
no mūsu salikto radio ievades etiķetes, lai labāk saskaņotu teksta bāzes līniju.
<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ālās formas etiķetes izmēru noteikšana
Noteikti izmantojiet .col-form-label-sm
vai .col-form-label-lg
savam <label>
s vai s, lai pareizi ievērotu un <legend>
izmēru ..form-control-lg
.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>
Kolonnu izmēra noteikšana
Kā parādīts iepriekšējos piemēros, mūsu režģa sistēma ļauj ievietot jebkuru .col
s skaitu .row
. Viņi sadalīs pieejamo platumu vienādi. Varat arī izvēlēties sleju apakškopu, lai tā aizņemtu vairāk vai mazāk vietas, bet atlikušās .col
s vienādi sadala pārējās, izmantojot noteiktas kolonnu klases, piemēram, .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>
Automātiska izmēra noteikšana
Tālāk sniegtajā piemērā tiek izmantota flexbox utilīta, lai vertikāli centrētu saturu un mainītu tā, .col
lai .col-auto
kolonnas aizņemtu tikai tik daudz vietas, cik nepieciešams. Citiem vārdiem sakot, kolonnas izmērs tiek noteikts atkarībā no satura.
<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>
Pēc tam varat to vēlreiz sajaukt ar lieluma kolonnu klasēm.
<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>
Iekļautās veidlapas
Izmantojiet .row-cols-*
klases, lai izveidotu adaptīvus horizontālus izkārtojumus. Pievienojot noteku modifikatoru klases , mēs iegūsim notekas horizontālā un vertikālā virzienā. Šauros mobilo ierīču skata portos .col-12
palīdz salikt veidlapas vadīklas un daudz ko citu. Veidlapas .align-items-center
elementus izlīdzina ar vidu, padarot .form-checkbox
līdzināšanu pareizi.
<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>