Tlhamego
Efa diforomo tša gago sebopego se sengwe—go tloga go ka gare ga mothaladi go ya go go rapalala go ya go diphethagatšo tša keriti ya tlwaelo—ka dikgetho tša rena tša peakanyo ya foromo.
Diforomo
Sehlopha se sengwe le se sengwe sa mafelo a foromo se swanetše go dula ka gare ga <form>
elemente. Bootstrap e fana ka ha ho na setaele sa kamehla bakeng sa <form>
elemente, empa ho na le litšobotsi tse ling tse matla tsa sebadi tse fuwang ka default.
- E mpsha go diforomo tša sephephediši? Nagana ka go sekaseka ditokomane tša foromo ya MDN bakeng sa kakaretšo le lenaneo le le feletšego la dika tše di lego gona.
<button>
s ka gare ga<form>
default gotype="submit"
, ka fao katanela go ba ye e itšego gomme ka mehla o akaretše atype
.- O ka šitiša elemente ye nngwe le ye nngwe ya foromo ka gare ga foromo ka
disabled
seka go<form>
.
Ka ge Bootstrap e šoma display: block
le width: 100%
go mo e nyakilego go ba ditaolo tša rena ka moka tša foromo, diforomo di tla ka go ikemela go kgoboketša thwii. Diklase tša tlaleletšo di ka šomišwa go fapantšha peakanyo ye motheong wa foromo ka e tee.
Didirišwa tša go thuša
Didirišwa tša ka thoko ke tsela ye bonolo ya go oketša sebopego se sengwe go diforomo. Di fana ka sehlopha sa motheo sa dileibole, ditaolo, sengwalwa sa foromo sa boikgethelo, le melaetša ya netefatšo ya foromo. Re kgothaletša go kgomarela margin-bottom
didirišwa, le go diriša tlhahlo e tee go ralala le foromo bakeng sa go se fetoge.
Ikwe o lokologile go aga diforomo tša gago le ge go le bjalo o rata, ka <fieldset>
s, <div>
s, goba mo e nyakilego go ba elemente efe goba efe ye nngwe.
<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>
Foromo ya keriti
Diforomo tše di raraganego kudu di ka agwa ka go šomiša diklase tša rena tša keriti. Šomiša tše bakeng sa dipeakanyo tša foromo tšeo di nyakago dikholomo tše dintši, bophara bjo bo fapanego, le dikgetho tša tlaleletšo tša go logaganya. E nyaka gore $enable-grid-classes
phetogo ya Sass e kgontšhwa (e buletšwe ka go ikemela).
<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>
Diphaephe tša go tšhela meetse
By adding gutter modifier classes , o ka ba le taolo ka bophara ba gutter ka hammoho le inline e le thibela tataiso. Gape e nyaka gore $enable-grid-classes
phetogo ya Sass e kgontšhwa (e buletšwe ka go ikemela).
<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>
Dipeakanyo tše di raraganego kudu le tšona di ka hlolwa ka tshepedišo ya keriti.
<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>
Foromo e rapameng
Hlama diforomo ta go rapalala ka keriti ka go tlaleleta .row
sehlopha go bopa dihlopha le go omia .col-*-*
diklase go laeta bophara bja dileibole ta gago le ditaolo. Kgonthiša gore o tlaleletša .col-form-label
go s ya gago <label>
gape gore di tsepame thwii ka ditaolo tša tšona tša foromo tše di sepedišanago le tšona.
Ka dinako tše dingwe, mo gongwe o swanetše go diriša didirišwa tša ka thoko goba tša go tlatša go bopa go logaganya moo mo go phethagetšego mo o go nyakago. Go fa mohlala, re tlošitše padding-top
leibole ya rena ya ditseno tša radio tše di kgobokeditšwego go logaganya motheo wa sengwalwa gakaone.
<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>
Horizontal foromo leibole sizing
Kgonthiša gore o šomiša .col-form-label-sm
goba .col-form-label-lg
go <label>
s goba s ya gago <legend>
go latela ka nepagalo bogolo bja .form-control-lg
le .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>
Go lekanyetša bogolo bja kholomo
Bjalo ka ge go bontšhitšwe mehlaleng ye e fetilego, tshepedišo ya rena ya keriti e go dumelela go bea palo efe goba efe ya .col
s ka gare ga .row
. Ba tla arola bophara bjo bo lego gona ka go lekana magareng ga bona. O ka kgetha gape sehlopha se senyenyane sa dikholomo tša gago go tšea sekgoba se segolo goba se senyenyane, mola .col
s ye e šetšego e aroganya tše dingwe ka go lekana, ka diklase tša dikholomo tše di itšego tša go swana le .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>
Go dira bogolo bja go itiriša
Mohlala wo o lego ka mo tlase o šomiša sedirišwa sa flexbox go tsepamiša dikagare ka go otlologa le diphetogo .col
go .col-auto
gore dikholomo tša gago di tšee fela sekgoba se segolo ka moo go nyakegago. Ge re bea ka tsela ye nngwe, kholomo e itšeela bogolo go ya ka dikagare.
<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>
Ka morago o ka hlakanya seo gape gape ka diklase tša dikholomo tše di itšego tša bogolo.
<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>
Diforomo tša ka gare ga mothaladi
Šomiša .row-cols-*
diklase go hlama dipeakanyo tša go rapalala tše di arabelago. By adding gutter modifier classes , re tla ba le gutters ka ditaelo tse rapameng le tse paatsepamang. Ka di-viewport tše di sesane tša sellathekeng, e .col-12
thuša go kgoboketša ditaolo tša foromo le tše dingwe. The .align-items-center
aligns dielemente foromo ho bohareng, etsa ho .form-checkbox
lolamisiwa ga hantle.
<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>