Vuandlalo
Nyika tifomo ta wena xivumbeko xo karhi—ku suka eka layini ku ya eka horizontal ku ya eka ku tirhisiwa ka gridi ya ntolovelo—hi swihlawulekisi swa hina swa layout ya tifomo.
Swivumbeko
Ntlawa wun’wana na wun’wana wa tinsimu ta xivumbeko wu fanele ku tshama eka <form>
elemente. Bootstrap a yi nyiki xitayili xa xiviri xa <form>
elemente, kambe ku na swihlawulekisi swin’wana swa matimba swa browser leswi nyikiwaka hi ku tiyimisela.
- Xana untshwa eka tifomo ta browser? Anakanya hi ku kambisisa tidokisi ta fomo ya MDN ku kuma nkatsakanyo na nxaxamelo lowu heleleke wa swihlawulekisi leswi nga kona.
<button>
s endzeni ka<form>
default totype="submit"
, kutani lwela ku va wo kongoma naswona minkarhi hinkwayo u katsa atype
.- U nga tshikisa xiphemu xin'wana na xin'wana xa fomo endzeni ka fomo hi
disabled
xihlawulekisi eka<form>
.
Tanihi leswi Bootstrap yi tirhaka display: block
na width: 100%
kwalomu ka vulawuri bya hina hinkwabyo bya tifomo, tifomo hi ku tiyimisela ti ta stack hi ku kongoma. Titlilasi to engetela ti nga tirhisiwa ku cinca-cinca layout leyi hi ku ya hi fomo yin’wana na yin’wana.
Switirhisiwa
Switirhisiwa swa margin i ndlela yo olova yo engetela xivumbeko xo karhi eka tifomo. Va nyika ku hlengeletiwa ka masungulo ka malebvu, vulawuri, tsalwa ra fomo leri nga hlawuriwa, na marungula ya ku tiyisisa fomo. Hi ringanyeta ku namarhela margin-bottom
switirhisiwa, na ku tirhisa nkongomiso wun’we eka fomo hinkwayo ku kuma ku nga cinci.
Titwele u ntshunxekile ku aka tifomo ta wena hilaha u lavaka hakona, hi <fieldset>
s, <div>
s, kumbe kwalomu ka elemente yin’wana na yin’wana.
<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>
Fomo ya gridi
Tifomo leti rharhanganeke swinene ti nga akiwa hi ku tirhisa titlilasi ta hina ta gridi. Tirhisa leswi eka swivumbeko swa tifomo leswi lavaka tikholomu to tala, ku anama ko hambana-hambana, na swihlawulekisi swo engetela swa ku ringanisa. Swi lava leswaku $enable-grid-classes
xihlawulekisi xa Sass xi tirhisiwa (ku pfula hi ku tiyimisela).
<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>
Swidziva swa le matini
By adding gutter modifier classes , ungava na vulawuri eka ku anama ka gutter eka xikan’we na inline tani hi block direction. Nakambe swi lava leswaku $enable-grid-classes
xihlawulekisi xa Sass xi tirhisiwa (on hi ku tiyimisela).
<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>
Ti layouts leti rharhanganeke swinene tinga tlhela ti endliwa hi sisiteme ya grid.
<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>
Xivumbeko xa horizontal
Endla tifomo ta horizontal hi gridi hi ku engetela .row
tlilasi ku vumba mintlawa na ku tirhisa .col-*-*
titlilasi ku boxa ku anama ka malebvu ya wena na vulawuri. Tiyisisa leswaku u engetela .col-form-label
eka s ya wena <label>
na yona leswaku yi va vertically centered na vulawuri bya yona bya xivumbeko lebyi fambelanaka.
Minkarhi yin’wana, kumbexana u fanele u tirhisa switirhisiwa swa margin kumbe swa padding leswaku u endla ku ringanana koloko loku hetisekeke loku u ku lavaka. Xikombiso, hi susile padding-top
lebula ya hina ya swingheniso swa xiya-ni-moya leswi hlanganisiweke ku ringanisa ku antswa masungulo ya tsalwa.
<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>
Ku ringanisiwa ka lebula ya xivumbeko xa horizontal
Tiyisisa leswaku u tirhisa .col-form-label-sm
kumbe .col-form-label-lg
eka <label>
s kumbe <legend>
s ya wena ku landzelela kahle vukulu bya .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>
Ku pima mpimo wa tikholomu
Hilaha swi kombisiweke hakona eka swikombiso leswi hundzeke, sisiteme ya hina ya giridi yi ku pfumelela ku veka nhlayo yihi na yihi ya .col
s endzeni ka .row
. Va ta avanyisa ku anama loku nga kona hi ku ringana exikarhi ka vona. U nga ha tlhela u hlawula ntlawa lowutsongo wa tikholomu ta wena ku teka ndhawu yo tala kumbe yitsongo, kasi .col
s leyi saleke yi avanyisa hi ku ringana leswi seleke, hi titlilasi to karhi ta tikholomu to fana na .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>
Ku endla vukulu hi ku tisungulela
Xikombiso lexi nga laha hansi xi tirhisa xitirhisiwa xa flexbox ku veka exikarhi hi ndlela yo yima leswi nga endzeni na ku cinca .col
leswaku .col-auto
tikholomu ta wena ti teka ntsena ndhawu yo tala hilaha swi lavekaka hakona. Hi ndlela yin’wana, kholomo yi tisayisa hi yoxe hi ku ya hi leswi nga endzeni.
<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>
U nga ha tlhela u hlanganisa sweswo nakambe hi titlilasi ta tikholomu leti kongomeke hi sayizi.
<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>
Tifomo ta le ndzeni ka layini
Tirhisa .row-cols-*
titlilasi ku tumbuluxa swivumbeko swa horizontal leswi hlamulaka. By adding gutter modifier classes , hi ta va na ti gutters eka matlhelo ya horizontal na vertical. Eka swivono swa tiselfoni leswitsongo, .col-12
swi pfuna ku hlanganisa swilawuri swa fomo na swin’wana. The .align-items-center
yi ringanisa swiaki swa xivumbeko exikarhi, yi endla ku .form-checkbox
ringanisa kahle.
<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>