Paraqitja
Jepini formularëve tuaj një strukturë - nga inline në horizontale deri te zbatimet e rrjetit të personalizuar - me opsionet tona të paraqitjes së formularit.
Format
Çdo grup i fushave të formës duhet të qëndrojë në një <form>
element. Bootstrap nuk ofron një stil të paracaktuar për <form>
elementin, por ka disa veçori të fuqishme të shfletuesit që ofrohen si parazgjedhje.
- I ri në format e shfletuesit? Merrni parasysh rishikimin e dokumenteve të formularit MDN për një përmbledhje dhe listë të plotë të atributeve të disponueshme.
<button>
s brenda një<form>
parazgjedhjeje nëtype="submit"
, prandaj përpiquni të jeni specifik dhe gjithmonë përfshini njëtype
.- Ju mund të çaktivizoni çdo element të formës brenda një formulari me
disabled
atributin në<form>
.
Meqenëse Bootstrap zbatohet display: block
dhe width: 100%
pothuajse në të gjitha kontrollet tona të formave, format si parazgjedhje do të grumbullohen vertikalisht. Klasa shtesë mund të përdoren për të ndryshuar këtë plan urbanistik në bazë të formës.
Shërbimet komunale
Shërbimet e marzhit janë mënyra më e lehtë për të shtuar një strukturë në forma. Ato ofrojnë grupimin bazë të etiketave, kontrolleve, tekstit opsional të formularit dhe mesazheve të vërtetimit të formularit. Ne rekomandojmë t'u përmbaheni margin-bottom
shërbimeve dhe të përdorni një drejtim të vetëm në të gjithë formularin për qëndrueshmëri.
Mos ngurroni të ndërtoni format tuaja si të doni, me <fieldset>
s, <div>
s ose pothuajse çdo element tjetër.
<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>
Rrjeti i formës
Forma më komplekse mund të ndërtohen duke përdorur klasat tona të rrjetit. Përdorni këto për paraqitjet e formave që kërkojnë kolona të shumta, gjerësi të ndryshme dhe opsione shtesë të shtrirjes. Kërkon që $enable-grid-classes
ndryshorja Sass të aktivizohet (e ndezur si parazgjedhje).
<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>
Ulluqe
Duke shtuar klasat e modifikuesve të ulluqit , ju mund të keni kontroll mbi gjerësinë e ulluqit si në drejtimin brenda ashtu edhe në bllok. Gjithashtu kërkon që $enable-grid-classes
ndryshorja Sass të aktivizohet (e ndezur si parazgjedhje).
<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>
Paraqitjet më komplekse mund të krijohen gjithashtu me sistemin e rrjetit.
<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>
Forma horizontale
Krijoni forma horizontale me rrjetin duke shtuar .row
klasën për të formuar grupe dhe duke përdorur .col-*-*
klasat për të specifikuar gjerësinë e etiketave dhe kontrolleve tuaja. Sigurohuni që t'i shtoni .col-form-label
edhe s-ve tuaja <label>
në mënyrë që ato të jenë të përqendruara vertikalisht me kontrollet e formave të lidhura me to.
Ndonjëherë, mund t'ju duhet të përdorni shërbimet e marzhit ose mbushjes për të krijuar atë shtrirje të përsosur që ju nevojitet. Për shembull, ne kemi hequr padding-top
etiketën e hyrjeve të radios së grumbulluar për të përafruar më mirë vijën bazë të tekstit.
<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>
Madhësia e etiketës së formës horizontale
Sigurohuni që të përdorni .col-form-label-sm
ose .col-form-label-lg
në <label>
s ose <legend>
s tuaj për të ndjekur saktë madhësinë e .form-control-lg
dhe .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>
Madhësia e kolonës
Siç tregohet në shembujt e mëparshëm, sistemi ynë i rrjetit ju lejon të vendosni çdo numër .col
s brenda një .row
. Ata do të ndajnë gjerësinë e disponueshme në mënyrë të barabartë midis tyre. Ju gjithashtu mund të zgjidhni një nëngrup të kolonave tuaja për të zënë pak a shumë hapësirë, ndërsa pjesa e mbetur .col
të ndajë në mënyrë të barabartë pjesën tjetër, me klasa të veçanta kolonash si .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>
Përmasat automatike
Shembulli më poshtë përdor një mjet flexbox për të përqendruar vertikalisht përmbajtjen dhe ndryshon .col
në .col-auto
mënyrë që kolonat tuaja të zënë vetëm aq hapësirë sa nevojitet. E thënë ndryshe, madhësia e kolonës bëhet në bazë të përmbajtjes.
<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>
Më pas mund ta ripërzieni atë edhe një herë me klasa kolone specifike për madhësi.
<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>
Format inline
Përdorni .row-cols-*
klasat për të krijuar paraqitje horizontale të përgjegjshme. Duke shtuar klasat e modifikuesve të ulluqeve , do të kemi ulluqe në drejtime horizontale dhe vertikale. Në portat e ngushta të shikimit celular, kjo .col-12
ndihmon në grumbullimin e kontrolleve të formularit dhe më shumë. .align-items-center
Rreshton elementët e formës në mes, duke e bërë rreshtimin .form-checkbox
siç duhet.
<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>