Ffoomu
Eby’okulabirako n’ebiragiro by’enkozesa y’emisono gy’okufuga foomu, ensengeka z’okulonda, n’ebitundu eby’enjawulo eby’okukola foomu ez’enjawulo.
Okulaba okutwalira awamu
Ebifuga foomu bya Bootstrap bigaziya ku sitayiro zaffe eza ffoomu eya Rebooted ne kiraasi. Kozesa kiraasi zino okulonda mu kwolesebwa kwazo okulongooseddwa okusobola okulaga okutambula obulungi mu bulawuzi n’ebyuma.
Kakasa nti okozesa ekintu ekituufu type
ku biyingizibwa byonna (okugeza, email
ku ndagiriro ya email oba number
ku mawulire ag’omuwendo) okweyambisa ebifuga ebipya ebiyingizibwa nga okukakasa email, okulonda ennamba, n’ebirala.
Wano waliwo ekyokulabirako eky'amangu okulaga emisono gya Bootstrap egya ffoomu. Sigala ng’osoma okufuna ebiwandiiko ku bibiina ebyetaagisa, ensengeka ya foomu, n’ebirala.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Ebifuga ffoomu
Ebifuga ffoomu y’ebiwandiiko —nga <input>
s, <select>
s, ne <textarea>
s —bikolebwa sitayiro .form-control
n’ekibiina. Mulimu emisono egy’endabika ey’awamu, embeera y’okussa essira, okupima obunene, n’ebirala.
Kakasa nti onoonyereza ku foomu zaffe ez’ennono okwongera sitayiro <select>
s.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Ku biyingizibwa mu fayiro, kyusaamu .form-control
for .form-control-file
.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
Okugerageranya obunene
Teeka obugulumivu ng'okozesa kiraasi nga .form-control-lg
ne .form-control-sm
.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
Okusoma kwokka
Okwongerako ekintu kya readonly
boolean ku kiyingizibwa okuziyiza okukyusa omuwendo gw'ekiyingizibwa. Ebiyingizibwa ebisomebwa byokka birabika nga bitangaavu (nga ebiyingizibwa ebiremeseddwa), naye bikuume cursor eya bulijjo.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Ebiwandiiko ebitaliimu bigambo byokka ebisomebwa
Bw’oba oyagala okuba <input readonly>
n’ebintu mu ffoomu yo nga bikoleddwa mu sitayiro ng’ebiwandiiko ebya bulijjo, kozesa .form-control-plaintext
ekibiina okuggyawo sitayiro y’ennimiro ya foomu eya bulijjo n’okukuuma margin entuufu ne padding.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Ebiyingizibwa mu Range
Teeka ebiyingizibwa mu bbanga eriyinza okutambula mu bbanga ng'okozesa .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
Ebibokisi ebikebera ne leediyo
Ebibokisi ebisookerwako ne leediyo bitereezebwa nga biyambibwako .form-check
, kiraasi emu ey'ebika byombi eby'okuyingiza erongoosa ensengeka n'enneeyisa y'ebintu byabwe ebya HTML . Ebibokisi ebikebera biba bya kulonda ekintu kimu oba ebiwerako mu lukalala, ate leediyo za kulonda ekintu kimu okuva mu bingi.
Checkboxes ezilema ne leediyo ziwagirwa. Attribute disabled
ejja kukozesa langi eyaka okuyamba okulaga embeera y'okuyingiza.
Ebibokisi ebikebera ne obutambi bwa leediyo biwagira okukakasa foomu okwesigamiziddwa ku HTML era biwa ebiwandiiko ebimpimpi, ebituukirirwa. Nga bwe kiri, <input>
s ne <label>
s zaffe elementi za baganda okusinga an <input>
munda mu a <label>
. Kino kisingako katono verbose nga olina okulaga id
ne for
attributes okukwataganya <input>
ne <label>
.
Ekisookerwako (ekitumbibwa) .
Nga bwekiba, omuwendo gwonna ogw'ebibokisi ebikebera ne leediyo ezibeera muganda ow'amangu zijja kuteekebwa mu vertikal era nga ziteekeddwa mu bbanga erisaanira ne .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
Mu layini
Gamba ebibokisi ebikebera oba leediyo ku lunyiriri lwe lumu olw'okwebungulula ng'ogatta .form-check-inline
ku yonna .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Awatali bipande
Yongera .position-static
ku biyingizibwa munda mu .form-check
ebyo ebitaliiko kiwandiiko kyonna kya label. Jjukira okukyawa engeri emu ey’erinnya erituukirirwa eri tekinologiya ayamba (okugeza, okukozesa aria-label
).
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
Okulambulula
Okuva Bootstrap bwekola display: block
era width: 100%
kumpi ku bifuga byaffe byonna ebya ffoomu, foomu zijja by default stack vertically. Ebika ebirala bisobola okukozesebwa okukyusakyusa ensengeka eno ku musingi gwa buli ffoomu.
Okukola ebibinja
Ekibiina .form-group
y’engeri ennyangu ey’okwongerako ensengeka ezimu ku foomu. Ewa ekibiina ekikyukakyuka ekikubiriza okugatta obulungi ebiwandiiko, ebifuga, ebiwandiiko by’obuyambi eby’okwesalirawo, n’obubaka obukakasa foomu. By default it only applies margin-bottom
, naye ekwata sitayiro endala mu .form-inline
nga bwe kyetaagisa. Kikozese ne <fieldset>
s, <div>
s, oba kumpi ekintu ekirala kyonna.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
Ffoomu grid
Ffoomu ezisingako obuzibu zisobola okuzimbibwa nga tukozesa kiraasi zaffe eza grid. Kozesa bino ku nsengeka za foomu ezeetaaga empagi eziwera, obugazi obw'enjawulo, n'enkola endala ez'okulaganya.
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Olunyiriri lwa ffoomu
Oyinza n'okukyusakyusa .row
ku .form-row
, enkyukakyuka y'olunyiriri lwaffe olwa giridi olwa bulijjo olusazaamu emidumu gy'ennyiriri egy'enjawulo okusobola ensengeka ennywevu era ennyimpi.
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
Ensengeka ezisingako obuzibu nazo zisobola okutondebwawo n’enkola ya grid.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<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>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Ekifaananyi eky’okwebungulula
Tonda foomu eziwanvuwa ne giridi ng’ogattako .row
kiraasi okukola ebibinja era ng’okozesa .col-*-*
kiraasi okulaga obugazi bw’ebiwandiiko byo n’ebifuga. Kakasa nti oyongera .col-form-label
ku <label>
s zo nga bwe ziri vertically centered ne form controls zaabwe ezikwatagana.
Oluusi, oyinza okuba nga weetaaga okukozesa margin oba padding utilities okukola alignment eyo entuufu gye weetaaga. Okugeza, tuggyewo ku padding-top
ku stacked radio inputs label yaffe okusobola okukwataganya obulungi text baseline.
<form>
<div class="form-group row">
<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="form-group row">
<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="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left 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="form-group row">
<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>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
Okugerageranya obunene bw’akabonero ka foomu mu ngeri ey’okwebungulula
Kakasa nti okozesa .col-form-label-sm
oba .col-form-label-lg
eri <label>
s oba <legend>
s yo okugoberera obulungi obunene bwa .form-control-lg
ne .form-control-sm
.
<form>
<div class="form-group row">
<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="form-group row">
<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="form-group 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>
</form>
Okugerageranya obunene bw’empagi
Nga bwe kiragibwa mu byokulabirako ebiyise, enkola yaffe eya gridi ekusobozesa okuteeka omuwendo gwonna ogwa .col
s munda mu a .row
oba .form-row
. Bajja kugabanya obugazi obuliwo kyenkanyi wakati waabwe. Oyinza n’okulonda ekitundu ekitono eky’ennyiriri zo okutwala ekifo ekiwera oba ekitono, ate .col
s ezisigadde ne zigabanya kyenkanyi ebisigadde, nga waliwo ebika by’ennyiriri ebitongole nga .col-7
.
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
Okukola sayizi mu ngeri ey’okwekolako
Ekyokulabirako wansi kikozesa ekintu ekiyitibwa flexbox utility okuteeka ebirimu wakati mu vertikal era ne kikyuka .col
okutuuka .col-auto
ennyiriri zo ne zitwala ekifo ekiwera kyokka nga bwe kyetaagisa. Mu ngeri endala, ennyiriri zeekula okusinziira ku birimu.
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<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 mb-2">Submit</button>
</div>
</div>
</form>
Olwo osobola okuddamu okutabula ekyo omulundi omulala ne size-specific column classes.
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto my-1">
<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 my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Era ddala custom form controls ziwagirwa.
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<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 my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Ffoomu eziri mu layini
Kozesa .form-inline
ekibiina okulaga omuddirirwa gw’ebiwandiiko, ebifuga ffoomu, ne buttons ku lunyiriri lumu olw’okwebungulula. Ebifuga foomu munda mu foomu eziri mu layini byawukana katono okuva ku mbeera zaabwe ezisookerwako.
- Ebifuga bye bino
display: flex
, okumenya ekifo kyonna ekyeru ekya HTML era ne kikusobozesa okuwa okufuga okulaganya n’ebikozesebwa mu bbanga n’ebikozesebwa mu flexbox . - Ebifuga n'ebibinja by'okuyingiza bifuna
width: auto
okusazaamu Bootstrap defaultwidth: 100%
. - Ebifuga birabika mu layini byokka mu bifo eby’okulaba ebirina obugazi waakiri 576px okusobola okubala ebifo ebifunda eby’okulaba ku byuma ebikozesebwa ku ssimu.
Oyinza okwetaaga okukola mu ngalo ku bugazi n’okulaganya kw’ebifuga bya ffoomu ssekinnoomu n’ebikozesebwa eby’okuteeka ebanga (nga bwe kiragibwa wansi). Ekisembayo, kakasa nti bulijjo ossaamu a <label>
ne buli ffoomu control, ne bw’oba weetaaga okugikweka abagenyi abatali screenreader ne .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Ebifuga foomu eya custom n'okulonda nabyo biwagirwa.
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Ebikozesebwa ebirala okusinga ebiwandiiko ebikwekebwa
Tekinologiya ayamba nga screen readers ajja kuba n’obuzibu ne forms zo singa tossaamu label ku buli input. Ku foomu zino eziri mu layini, osobola okukweka ebiwandiiko ng’okozesa .sr-only
ekibiina. Waliwo enkola endala ez’okuwa akabonero ku tekinologiya ayamba, gamba nga aria-label
, aria-labelledby
oba title
ekintu. Singa tewali n’emu ku zino ebaawo, tekinologiya ayamba ayinza okuddukira mu kukozesa placeholder
ekintu ekyo, bwe kiba nga kiriwo, naye weetegereze nti okukozesa placeholder
ng’ekifo ky’enkola endala ez’okuwandiika obubonero tekiba kirungi.
Ekiwandiiko ekiyamba
Ebiwandiiko by’obuyambi eby’omutendera gwa bbulooka mu foomu bisobola okutondebwa nga tukozesa .form-text
(eyali emanyiddwa nga .help-block
mu v3). Ebiwandiiko by'obuyambi ebiri mu layini bisobola okuteekebwa mu nkola mu ngeri ekyukakyuka nga tukozesa ekintu kyonna ekya HTML ekiri mu layini ne kiraasi z'omugaso nga .text-muted
.
Okukwataganya ekiwandiiko ky'obuyambi n'ebifuga foomu
Ekiwandiiko ky’obuyambi kirina okukwatagana mu bulambulukufu n’okufuga foomu kye kikwatagana n’okukozesa aria-describedby
ekintu. Kino kijja kukakasa nti tekinologiya ayamba —nga ebisoma ku ssirini —ajja kulangirira ekiwandiiko kino eky’obuyambi ng’omukozesa assa essira oba ng’ayingira mu kifuga.
Ebiwandiiko by'obuyambi wansi w'ebiyingizibwa bisobola okukolebwako sitayiro ne .form-text
. Kiraasi eno erimu display: block
era n’eyongerako margin ezimu ez’okungulu okusobola okwanguyiza ebanga okuva ku biyingizibwa waggulu.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
Ebiwandiiko ebiri mu layini bisobola okukozesa ekintu kyonna ekya bulijjo ekya HTML ekiri mu layini (kabeere <small>
, <span>
, oba ekintu ekirala) nga tekirina kirala okuggyako kiraasi y’omugaso.
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
Ffoomu z’abalema
Okwongerako ekintu kya disabled
boolean ku kiyingizibwa okuziyiza enkolagana z'abakozesa n'okukifuula okulabika ng'ekitangaala.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Okwongerako disabled
ekintu ku a <fieldset>
okulemesa ebifuga byonna ebiri munda.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Okulabula nga olina ennanga
Browsers zitwala byonna ebifuga ffoomu enzaaliranwa ( <input>
, <select>
, ne <button>
elements) munda mu a <fieldset disabled>
nga ebiremeseddwa, okulemesa byombi keyboard ne mouse enkolagana ku byo.
Naye, singa foomu yo era erimu ebintu ebiringa bbaatuuni eya bulijjo nga <a ... class="btn btn-*">
, bino bijja kuweebwa sitayiro ya pointer-events: none
. Nga bwe kyayogerwa mu kitundu ekikwata ku mbeera elemeseddwa ku buttons (n’okusingira ddala mu kitundu ekitono eky’ebintu ebinyweza), ekintu kino ekya CSS tekinnaba ku mutindo era tekinnawagirwa mu bujjuvu mu Internet Explorer 10. Ebifuga ebyesigamiziddwa ku nnanga nabyo bijja kuba bikyali bwe bityo focusable era nga ekola nga okozesa keyboard. Olina okukyusa mu ngalo ebifuga bino ng’ogattako tabindex="-1"
okubiziyiza okufuna essira n’okulaga aria-disabled="disabled"
embeera yabyo eri tekinologiya ayamba.
Okukwatagana kwa cross-browser
Wadde nga Bootstrap ejja kukozesa emisono gino mu browser zonna, Internet Explorer 11 ne wansi tewagira mu bujjuvu disabled
attribute ku a <fieldset>
. Kozesa JavaScript eya bulijjo okulemesa fieldset mu browser zino.
Okukakasa
Okuwa endowooza ez’omuwendo, ezisobola okukolebwa eri abakozesa bo n’okukakasa foomu ya HTML5– esangibwa mu bulawuzi zaffe zonna eziwagirwa . Londa okuva mu browser default validation feedback, oba teeka mu nkola obubaka obw'ennono ne classes zaffe ezimbiddwamu ne JavaScript etandika.
Engeri gye kikola
Laba engeri okukakasa foomu gye kukola ne Bootstrap:
- Okukakasa foomu ya HTML kukozesebwa okuyita mu CSS's two pseudo-classes,
:invalid
ne:valid
. Kikwata ku<input>
,<select>
, ne<textarea>
elementi. - Bootstrap scopes the
:invalid
ne:valid
styles ku kiraasi y'omuzadde.was-validated
, ebiseera ebisinga ekozesebwa ku<form>
. Bwe kitaba ekyo, ennimiro yonna eyeetaagisa nga tewali muwendo eraga nga si ntuufu ku kutikka omuko. Mu ngeri eno, oyinza okusalawo ddi lw’ogenda okuzikola (ebiseera ebisinga oluvannyuma lw’okugezaako okuleeta foomu). - Okuddamu okuteekawo endabika ya foomu (okugeza, mu mbeera y’okuweereza foomu okukyukakyuka nga okozesa AJAX), ggyawo
.was-validated
ekibiina okuva mu<form>
nate oluvannyuma lw’okuweereza. - Nga fallback,
.is-invalid
era.is-valid
classes ziyinza okukozesebwa mu kifo kya pseudo-classes for server side validation . Tezeetaaga.was-validated
kibiina kya bazadde. - Olw'ebizibu mu ngeri CSS gy'ekola, tetusobola (mu kiseera kino) kukozesa sitayiro ku a
<label>
ejja nga tennabaawo kufuga ffoomu mu DOM awatali buyambi bwa JavaScript eya bulijjo. - Browser zonna ez’omulembe ziwagira constraint validation API , omuddirirwa gw’enkola za JavaScript ez’okukakasa ebifuga foomu.
- Obubaka bw’okuddamu buyinza okukozesa ebisookerwako bya bbulawuzi (eby’enjawulo ku buli bbulawuzi, era nga tebiyinza kukolebwa nga biyita mu CSS) oba emisono gyaffe egy’okuddamu egy’ennono nga giriko HTML ne CSS ez’enjawulo.
- Oyinza okuwa obubaka obw'obutuufu obw'ennono ne
setCustomValidity
mu JavaScript.
Nga olina ekyo mu birowoozo, lowooza ku demos zino wammanga ez’emisono gyaffe egy’okukakasa foomu egy’ennono, kiraasi z’oludda lwa seva ez’okwesalirawo, n’ebisookerwako bya bbulawuzi.
Emisono egy’enjawulo
Ku bubaka obw'okukakasa foomu ya Bootstrap eya bulijjo, ojja kwetaaga okwongerako ekintu kya novalidate
boolean ku <form>
. Kino kiremesa ebikozesebwa eby'okuddamu ebisookerwako ebya bbulawuzi, naye nga kikyawa olukusa ku API z'okukakasa foomu mu JavaScript. Gezaako okuleeta foomu eno wammanga; JavaScript yaffe ejja kukwata button y'okuweereza n'okukuweereza endowooza yo. Bw’oba ogezaako okuleeta, ojja kulaba :invalid
ne :valid
sitayiro nga zikozesebwa ku bifuga foomu yo.
Emisono gy’okuddamu egy’enjawulo gikozesa langi ez’enjawulo, ensalosalo, emisono gy’okussa essira, n’ebifaananyi eby’emabega okusobola okuwuliziganya obulungi ebiteeso. Ebifaananyi eby'emabega ebya <select>
s bifunibwa ne .custom-select
, so si .form-control
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Browser esookera ddala
Tofaayo ku bubaka bw'okuddamu okukakasa obw'ennono oba okuwandiika JavaScript okukyusa enneeyisa za ffoomu? Byonna birungi, osobola okukozesa browser defaults. Gezaako okuleeta foomu eno wammanga. Okusinziira ku browser yo ne OS, ojja kulaba sitayiro ey’enjawulo katono ey’okuddamu.
Wadde nga emisono gino egy'okuddamu tegisobola kukola sitayiro na CSS, okyayinza okulongoosa ebiwandiiko by'okuddamu okuyita mu JavaScript.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Oludda lwa seeva
Tukuwa amagezi okukozesa okukakasa ku ludda lwa kasitoma, naye mu mbeera nga weetaaga okukakasa ku ludda lwa seva, osobola okulaga ennimiro za foomu ezitali ntuufu era entuufu ne .is-invalid
ne .is-valid
. Weetegereze nti .invalid-feedback
nakyo kiwagirwa ne kiraasi zino.
Ku nnimiro ezitali ntuufu, kakasa nti obubaka obutali butuufu obw'okuddamu/ensobi bukwatagana n'ennimiro ya foomu ekwatagana ng'okozesa aria-describedby
. Ekintu kino kisobozesa id
okujuliza okusukka mu kimu, mu mbeera nga ennimiro esonga dda ku biwandiiko bya ffoomu eby'enjawulo.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Ebintu ebiwagirwa
Emisono gy'okukakasa giriwo ku bifuga n'ebitundu bya foomu bino wammanga:
<input>
s ne<textarea>
s nga balina.form-control
<select>
s nga balina.form-control
oba.custom-select
.form-check
s.custom-checkbox
s ne.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
Ebikozesebwa
Singa ensengeka ya foomu yo ekkiriza, osobola okukyusakyusa .{valid|invalid}-feedback
kiraasi ne .{valid|invalid}-tooltip
kiraasi okulaga ebiteeso by’okukakasa mu kigambo ky’ebikozesebwa ekiriko sitayiro. Kakasa nti olina omuzadde alina position: relative
ku yo for tooltip positioning. Mu kyokulabirako wansi, kiraasi zaffe ez’ennyiriri kino zirina dda, naye pulojekiti yo eyinza okwetaaga okuteekawo okulala.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
Okulongoosa
Embeera z'okukakasa zisobola okulongoosebwa nga ziyita mu Sass ne $form-validation-states
maapu. Esangibwa mu _variables.scss
fayiro yaffe, maapu eno eya Sass ekolebwako loopu okukola embeera ezisookerwako valid
/ invalid
ezikakasa. Mulimu maapu eteekeddwa mu kisenge okulongoosa langi n’akabonero ka buli ssaza. Wadde nga tewali masaza malala gawagirwa bbulawuzi, abo abakozesa emisono egy’enjawulo basobola bulungi okwongerako ebiteeso bya ffoomu ebizibu ennyo.
Nsaba omanye nti tetukuwa magezi kulongoosa miwendo gino nga tokyusizza na form-validation-state
mixin.
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
Okukakasa ekibiina ky’okuyingiza
Okuzuula elementi ki ezeetaaga enkoona ezeetooloovu munda mu kibinja ky’okuyingiza nga kiriko okukakasa, ekibinja ky’okuyingiza kyetaaga .has-validation
kiraasi ey’okugattako.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
Ffoomu ez’ennono
Okusobola n’okusingawo okulongoosa n’okukwatagana kwa bbulawuzi okusalako, kozesa ebintu byaffe ebya ffoomu eby’enjawulo ddala okudda mu kifo ky’ebisookerwako ebya bbulawuzi. Zizimbibwa waggulu ku semantic ne accessible markup, kale zibeera solid replacements for any default form control.
Ebibokisi ebikebera ne leediyo
Buli checkbox ne radio <input>
ne <label>
pairing bizingibwa mu a <div>
okukola custom control yaffe. Mu nsengeka, eno y’enkola y’emu n’enkola yaffe eya bulijjo .form-check
.
Tukozesa ekisunsula baganda ( ~
) ku masaza gaffe <input>
gonna —nga :checked
—okukola obulungi sitayiro y’ekiraga foomu yaffe ey’ennono. Bwe tugattibwa ne .custom-control-label
kiraasi, tusobola n’okukola sitayiro y’ekiwandiiko kya buli kintu okusinziira ku mbeera ya <input>
's.
Tukweka ekisookerwako <input>
ne opacity
era tukozesa .custom-control-label
okuzimba ekiraga foomu empya ey'ennono mu kifo kyakyo ne ::before
ne ::after
. Ebyembi tetusobola kuzimba custom one okuva just the <input>
kubanga CSS's content
tekola ku element eyo.
Mu mbeera ezikebereddwa, tukozesa ebifaananyi bya SVG ebiteekeddwamu base64 okuva mu Open Iconic . Kino kituwa okufuga okusinga obulungi ku sitayiro n’okuteeka mu kifo mu bulawuzi n’ebyuma byonna.
Ebibokisi ebikebera
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Ebibokisi ebikebera eby’enjawulo nabyo bisobola okukozesa :indeterminate
ekibiina eky’obulimba nga biteekeddwa mu ngalo nga biyita mu JavaScript (tewali kintu kya HTML ekiriwo eky’okukirambika).
Bw’oba okozesa jQuery, ekintu nga kino kisaana okumala:
$('.your-checkbox').prop('indeterminate', true)
Leediyo
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
Mu layini
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Obutesobola
Ebibokisi ebikebera eby’enjawulo ne leediyo nabyo bisobola okulemesa. Okwongerako ekintu kya disabled
boolean ku <input>
era ekiraga eky'ennono n'ennyonnyola y'akabonero bijja kukolebwa mu sitayiro mu ngeri ey'otoma.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Ebikyusakyusa
Sswiiki erina markup ya custom checkbox naye ekozesa .custom-switch
class okulaga toggle switch. Switches nazo ziwagira disabled
attribute.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Londa menu
Menyu <select>
eza custom zeetaaga kiraasi ya custom yokka, .custom-select
okutandika emisono egy'ennono. Emisono egy'enjawulo gikoma ku <select>
ndabika ya 's esooka era tesobola kukyusa <option>
s olw'obuzibu bwa bbulawuzi.
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Oyinza n'okulonda okuva mu kulonda okutono n'okunene okw'ennono okukwatagana n'ebiwandiiko byaffe ebiyingizibwa mu sayizi y'emu.
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Attribute multiple
era ewagirwa:
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Nga bwe kiri ku size
mpisa:
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Ebanga
Tonda <input type="range">
ebifuga eby'ennono ne .custom-range
. Oluyimba (emabega) n’engalo ensajja (omuwendo) byombi bikoleddwa mu sitayiro okulabika kye kimu mu bulawuzi zonna. Nga IE ne Firefox zokka bwe ziwagira “okujjuza” oluyimba lwabwe okuva ku kkono oba ku ddyo w’engalo ensajja ng’engeri y’okulaga mu maaso enkulaakulana, mu kiseera kino tetugiwagira.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Ebiyingizibwa mu bbanga birina emiwendo egy’enjawulo egya min
ne max
— 0
ne 100
, mu kulondako. Oyinza okulaga emiwendo emipya eri abo abakozesa ebifaananyi min
ne max
.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Nga bwekiba, ebiyingizibwa mu bbanga “snap” ku miwendo gya namba enzijuvu. Okukyusa kino, osobola okulaga step
omuwendo. Mu kyokulabirako wansi, tukubisaamu emirundi ebiri omuwendo gw’emitendera nga tukozesa step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Okukebera fayiro
Okuyingiza fayiro kwe kusinga gnarly mu kibinja era kyetaagisa JavaScript ey'okugattako bw'oba oyagala okuziyunga n'enkola Londa fayiro... n'ekiwandiiko ky'erinnya lya fayiro ekirondeddwa.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Tukweka fayiro eya bulijjo <input>
nga tuyita mu opacity
era mu kifo ky'ekyo tukola sitayiro ya <label>
. Button ekolebwa era n'eteekebwa ne ::after
. Ekisembayo, tulangirira a width
ne height
ku the <input>
for proper spacing for surrounding content.
Okuvvuunula oba okulongoosa ennyiriri ne SCSS
Ekika :lang()
ky’obulimba kikozesebwa okusobozesa okuvvuunula ekiwandiiko “Browse” mu nnimi endala. Ssa oba yongera ku biyingiziddwa ku $custom-file-text
nkyukakyuka ya Sass n'akabonero k'olulimi akakwatagana n'ennyiriri eziteekeddwa mu kitundu . Ennyiriri z’Olungereza zisobola okulongoosebwa mu ngeri y’emu. Okugeza, wuuno engeri omuntu gy'ayinza okwongerako enzivuunula y'Olusipeyini (enkodi y'olulimi Olusipeyini eri es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Wano lang(es)
mu bikolwa ku kuyingiza fayiro eya bulijjo ey'okuvvuunula mu Lusipeyini:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
Ojja kwetaaga okuteekawo olulimi lw'ekiwandiiko kyo (oba omuti omutono ogwakyo) mu butuufu okusobola ekiwandiiko ekituufu okulagibwa. Kino kiyinza okukolebwa nga okozesa ekintulang
ekiri ku elementi<html>
oba Content-Language
omutwe gwa HTTP , mu nkola endala.
Okuvvuunula oba okulongoosa ennyiriri ne HTML
Bootstrap era egaba engeri y’okuvvuunula ekiwandiiko “Browse” mu HTML n’ekintu data-browse
ekiyinza okugattibwa ku kiwandiiko ky’okuyingiza eky’ennono (okugeza mu Ludaaki):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>