Imiterere
Tanga ifishi yawe imiterere-kuva kumurongo ugana kuri horizontal kugeza kugiti cyihariye cyo gushyira mubikorwa-hamwe nuburyo bwo guhitamo imiterere.
Ifishi
Buri tsinda ryimiterere yimirima igomba gutura <form>
mubintu. Bootstrap ntabwo itanga stile yuburyo busanzwe <form>
, ariko haribintu bimwe na bimwe bikomeye bya mushakisha bitangwa kubisanzwe.
- Gishya kuri fomu ya mushakisha? Tekereza gusubiramo ifishi ya MDN kugirango ubone incamake nurutonde rwuzuye rwibiranga.
<button>
s muburyo<form>
busanzwetype="submit"
, bityo rero uharanire kuba umwihariko kandi burigihe ushiramo atype
.- Urashobora guhagarika buri fomu yibintu muburyo hamwe
disabled
nibiranga kuri<form>
.
Kubera ko Bootstrap ikoreshwa display: block
kandi width: 100%
hafi ya fomu yacu yose igenzura, amafishi azahagarikwa muburyo buhagaritse. Amasomo yinyongera arashobora gukoreshwa muguhindura iyi miterere kumurongo.
Ibikorwa
Margin utilities ninzira yoroshye yo kongeramo imiterere kumiterere. Batanga amatsinda yibanze ya labels, igenzura, inyandiko yuburyo butemewe, hamwe nubutumwa bwo kwemeza. Turasaba gukomera margin-bottom
kubikorwa byingirakamaro, no gukoresha icyerekezo kimwe muburyo bwose bwo guhuzagurika.
Wumve neza ko wubaka imiterere yawe uko ubishaka, hamwe na <fieldset>
s, <div>
s, cyangwa hafi yikindi kintu icyo aricyo cyose.
<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>
Urusobemiyoboro
Ifishi nyinshi zirashobora kubakwa dukoresheje amasomo ya grid. Koresha ibi kugirango ubone imiterere isaba inkingi nyinshi, ubugari butandukanye, hamwe nuburyo bwo guhuza. Irasaba $enable-grid-classes
impinduka ya Sass kugirango ishoboke (kuri byanze bikunze).
<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>
Gutera
Mugushyiramo ibyuma bihindura ibyiciro , urashobora kugira ubugenzuzi bwubugari bwimyanda kimwe no kumurongo nkicyerekezo cyo guhagarika. Irasaba kandi $enable-grid-classes
impinduka ya Sass kugirango ishoboke (kuri default).
<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>
Imiterere igoye irashobora kandi gushirwaho hamwe na sisitemu ya gride.
<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>
Ifishi itambitse
Kora imiterere itambitse hamwe na gride wongeyeho urwego .row
rwo gushinga amatsinda no gukoresha .col-*-*
amasomo kugirango ugaragaze ubugari bwibirango byawe hamwe nubugenzuzi. Witondere kongera .col-form-label
kuri <label>
s yawe kugirango bahagarike hagati hamwe nuburyo bugenzurwa.
Rimwe na rimwe, birashoboka ko ukeneye gukoresha margin cyangwa padi yingirakamaro kugirango ukore ibyo uhuza neza ukeneye. Kurugero, twakuyeho padding-top
kuri radio yacu yinjije ibirango kugirango duhuze neza ibyingenzi.
<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>
Ifishi itambitse ikirango ingana
Witondere gukoresha .col-form-label-sm
cyangwa .col-form-label-lg
kuri <label>
s cyangwa <legend>
s kugirango ukurikize neza ingano 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>
Ingano yinkingi
Nkuko bigaragara mu ngero zabanjirije iyi, sisitemu ya grid igufasha gushyira umubare uwo ariwo wose wa .col
s muri a .row
. Bazagabanya ubugari buboneka bingana hagati yabo. Urashobora kandi gutoranya igice cyinkingi zawe kugirango ufate umwanya munini cyangwa muto, mugihe ibisigaye .col
binganya kugabana ibisigaye, hamwe ninkingi yihariye nk .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>
Ingano-yimodoka
Urugero rukurikira rukoresha flexbox yingirakamaro kugirango uhagarike hagati yibirimo nibihinduka .col
kugirango .col-auto
inkingi zawe zifate umwanya munini nkuko bikenewe. Shyira mu bundi buryo, inkingi nini ubwayo ishingiye kubirimo.
<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>
Urashobora noneho gusubiramo ibyo byongeye hamwe nubunini-bwihariye bwinkingi.
<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>
Ifishi yerekana
Use the .row-cols-*
classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the .col-12
helps stack the form controls and more. The .align-items-center
aligns the form elements to the middle, making the .form-checkbox
align properly.
<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>