Mpangilio
Ipe fomu zako muundo fulani—kutoka kwa mstari hadi ulalo hadi utekelezaji wa gridi maalum—kwa chaguo zetu za mpangilio wa fomu.
Fomu
Kila kikundi cha sehemu za fomu kinapaswa kukaa katika <form>
kipengele. Bootstrap haitoi mtindo chaguo-msingi kwa <form>
kipengele, lakini kuna baadhi ya vipengele vikali vya kivinjari ambavyo vinatolewa na chaguo-msingi.
- Je, ni mpya kwa fomu za kivinjari? Fikiria kukagua hati za fomu ya MDN kwa muhtasari na orodha kamili ya sifa zinazopatikana.
<button>
s ndani ya<form>
chaguo-msingi kwatype="submit"
, kwa hivyo jitahidi kuwa mahususi na kila wakati ujumuishe atype
.- Unaweza kulemaza kila kipengee cha fomu ndani ya fomu na
disabled
sifa kwenye<form>
.
Kwa kuwa Bootstrap inatumika display: block
na width: 100%
kwa karibu vidhibiti vyetu vyote vya fomu, fomu kwa chaguo-msingi zitapangwa kiwima. Madarasa ya ziada yanaweza kutumika kubadilisha mpangilio huu kwa misingi ya kila fomu.
Huduma
Huduma za ukingo ndio njia rahisi zaidi ya kuongeza muundo fulani kwenye fomu. Hutoa upangaji wa kimsingi wa lebo, vidhibiti, maandishi ya fomu ya hiari, na utumaji ujumbe wa uthibitishaji wa fomu. Tunapendekeza ushikamane na margin-bottom
huduma, na utumie mwelekeo mmoja katika fomu yote kwa uthabiti.
Jisikie huru kuunda fomu zako jinsi unavyopenda, na <fieldset>
s, <div>
s, au karibu kipengele kingine chochote.
<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>
Gridi ya fomu
Fomu ngumu zaidi zinaweza kujengwa kwa kutumia madarasa yetu ya gridi ya taifa. Tumia hizi kwa miundo ya fomu inayohitaji safu wima nyingi, upana tofauti, na chaguo za ziada za upatanishi. Inahitaji utofauti wa $enable-grid-classes
Sass kuwezeshwa (kuwashwa kwa chaguomsingi).
<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>
Mifereji ya maji
Kwa kuongeza madarasa ya kurekebisha gutter , unaweza kuwa na udhibiti juu ya upana wa gutter pamoja na inline kama mwelekeo wa kuzuia. Pia inahitaji utofauti wa $enable-grid-classes
Sass kuwezeshwa (kuwashwa kwa chaguo-msingi).
<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>
Mipangilio ngumu zaidi inaweza pia kuundwa kwa mfumo wa gridi ya taifa.
<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>
Fomu ya usawa
Unda fomu za mlalo ukitumia gridi ya taifa kwa kuongeza .row
darasa ili kuunda vikundi na kutumia .col-*-*
madarasa kubainisha upana wa lebo na vidhibiti vyako. Hakikisha kuwa umeongeza .col-form-label
kwenye <label>
s zako pia ili ziwe katikati wima na vidhibiti vyao vinavyohusiana vya fomu.
Wakati mwingine, labda utahitaji kutumia pambizo au huduma za kuweka pedi ili kuunda upatanishi bora unaohitaji. Kwa mfano, tumeondoa padding-top
lebo ya pembejeo za redio zilizopangwa kwa rafu ili kupanga vyema msingi wa maandishi.
<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>
Upimaji wa lebo ya fomu mlalo
Hakikisha unatumia .col-form-label-sm
au .col-form-label-lg
kwa <label>
s au <legend>
s zako kufuata kwa usahihi saizi ya .form-control-lg
na .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>
Upimaji wa safu wima
Kama inavyoonyeshwa katika mifano iliyotangulia, mfumo wetu wa gridi ya taifa hukuruhusu kuweka nambari yoyote ya .col
s ndani ya .row
. Watagawanya upana unaopatikana kwa usawa kati yao. Unaweza pia kuchagua kikundi kidogo cha safu wima zako kuchukua nafasi zaidi au kidogo, huku .col
s iliyobaki ikigawanya iliyosalia kwa usawa, na madarasa maalum ya safu kama .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>
Kuweka ukubwa kiotomatiki
Mfano ulio hapa chini hutumia matumizi ya flexbox kuweka kiwima maudhui na mabadiliko .col
ili .col-auto
safu wima zako zichukue nafasi nyingi inavyohitajika. Weka njia nyingine, saizi ya safu yenyewe kulingana na yaliyomo.
<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>
Kisha unaweza kuichanganya tena na madarasa ya safu wima ya saizi mahususi.
<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>
Fomu za ndani
Tumia .row-cols-*
madarasa kuunda mipangilio ya mlalo inayoitikia. Kwa kuongeza madarasa ya kurekebisha mifereji ya maji , tutakuwa na mifereji ya maji katika mwelekeo mlalo na wima. Kwenye tovuti finyu za kutazama za rununu, .col-12
husaidia kuweka vidhibiti vya fomu na zaidi. Inalinganisha vipengele .align-items-center
vya fomu hadi katikati, na kufanya .form-checkbox
kulandanisha vizuri.
<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>