Ụdị
Ọmụmatụ na ntuziaka ojiji maka ụdị njikwa ụdị, nhọrọ nhazi, na ngwa ọdịnala maka imepụta ụdị dị iche iche.
Nchịkọta
Njikwa ụdị Bootstrap na-agbasawanye n'ụdị anyị ewegharịrị na klas. Jiri klaasị ndị a banye n'ime ihe ngosi haziri ahazi maka ntụgharị na-agbanwe agbanwe n'ofe ihe nchọgharị na ngwaọrụ.
Jide n'aka na ị ga-eji njirimara kwesịrị ekwesị type
na ntinye niile (dịka ọmụmaatụ, email
maka adreesị ozi-e ma ọ bụ number
maka ozi ọnụọgụ) iji nweta uru njikwa ndenye ọhụrụ dị ka nkwenye email, nhọrọ nọmba, na ndị ọzọ.
Nke a bụ ọmụmaatụ ngwa ngwa iji gosipụta ụdị ụdị Bootstrap. Nọgidenụ na-agụ maka akwụkwọ na klas achọrọ, nhazi ụdị, na ndị ọzọ.
<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>
Njikwa ụdị
A na- ahazi njikwa ụdị ederede-dị ka <input>
s, <select>
s, na <textarea>
s na .form-control
klaasị. Ọ gụnyere ụdị maka ọdịdị izugbe, ọnọdụ elekwasị anya, nha nha, na ndị ọzọ.
Jide n'aka na inyocha ụdị omenala anyị ka ị nwetakwuo ụdị <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>
Maka ntinye faịlụ, gbanwee ya .form-control
maka .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>
Nha nha
Tọọ elu site na iji klas dịka .form-control-lg
na .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>
Naanị ịgụ
Tinye njirimara readonly
boolean na ntinye iji gbochie mgbanwe nke uru ntinye. Ntinye naanị ọgụgụ na-apụta ọkụ (dị ka ntinye nwere nkwarụ), mana jigide cursor ọkọlọtọ.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Naanị ederede doro anya
Ọ bụrụ n’ịchọrọ ka <input readonly>
emebere ihe ndị dị n’ụdị gị dị ka ederede doro anya, jiri .form-control-plaintext
klaasị ahụ wepụ ụdị nhazi ubi ndabara wee chekwaa oke na padding ziri ezi.
<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>
Ntinye nso
Tọọ ntinye nso n'ahịrị atụgharị na-eji .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>
Igbe nlele na redio
A na-emelite igbe nrịbama na redio ndị ọzọ site n'enyemaka nke .form-check
otu klaasị maka ụdị ntinye abụọ nke na-eme ka nhazi na omume nke ihe HTML ha dị mma . Igbe nlele bụ maka ịhọrọ otu ma ọ bụ ọtụtụ nhọrọ na ndepụta, ebe redio bụ maka ịhọrọ otu nhọrọ n'ime ọtụtụ.
A na-akwado igbe nrịbama na redio nwere nkwarụ. Njirimara disabled
a ga-etinye agba dị nfe iji nyere aka gosi steeti ntinye.
Igbe nrịbama na bọtịnụ redio na-akwado nkwado ụdị dabere HTML ma nye akara nkenke, enwere ike ịnweta. N'ihi ya, ndị anyị <input>
na ndị anyị <label>
bụ ihe nwanne na-emegide nke <input>
dị n'ime a <label>
. Nke a dị ntakịrị karịa verbose ka ị ga-ezipụta id
na for
njirimara iji mekọrịta <input>
na <label>
.
Ndi an-kpọ (kpakọtara)
Site na ndabara, ọnụọgụ igbe nlele na redio ọ bụla bụ nwanne ozugbo ga-edobe na kwụ ọtọ ma kesaa ya nke ọma na .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>
N'ahịrị
Igbe nrịbama otu ma ọ bụ redio n'otu ahịrị kwụ ọtọ site n'ịgbakwunye .form-check-inline
na nke ọ bụla .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>
Enweghị akara
Tinye .position-static
na ntinye n'ime .form-check
nke enweghị ederede akara ọ bụla. Cheta ka ịnye ụfọdụ ụdị aha enwere ike ịnweta maka teknụzụ enyemaka (dịka ọmụmaatụ, iji 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>
Nhazi
Ebe Bootstrap na-emetụta display: block
yana width: 100%
ihe fọrọ nke nta ka ọ bụrụ njikwa ụdị anyị niile, ụdị ga-abụ na ndabara tojupụtara na kwụ ọtọ. Enwere ike iji klaasị ndị ọzọ gbanwee okirikiri nhọrọ ukwuu n'ụdị n'ụdị.
Mepụta otu
Klas .form-group
bụ ụzọ kachasị mfe iji tinye usoro ụfọdụ na ụdị. Ọ na-enye klaasị na-agbanwe agbanwe nke na-agba ume ịchịkọta akara kwesịrị ekwesị, njikwa, ederede enyemaka nhọrọ, yana ozi nkwado ụdị. Site na ndabara ọ na-emetụta naanị margin-bottom
, mana ọ na-ewelite ụdị ndị ọzọ dị .form-inline
ka achọrọ. Jiri ya na <fieldset>
s, <div>
s, ma ọ bụ ihe fọrọ nke nta ka ọ bụrụ mmewere ọ bụla ọzọ.
<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>
grid ụdị
Enwere ike ịmepụta ụdị mgbagwoju anya karịa site na iji klas grid anyị. Jiri ndị a maka nhazi ụdị nke chọrọ ọtụtụ ogidi, obosara dị iche iche na nhọrọ nhazi agbakwunyere.
<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>
Ụdị ahịrị
Ị nwekwara ike gbanwee .row
maka .form-row
, mgbanwe nke ahịrị grid anyị nke na-agafe gọọlụ kọlụm ndabara maka nhazi kọmpat na karịa.
<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>
Enwere ike ịmepụta nhazi ndị dị mgbagwoju anya site na usoro 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>
Ụdị kwụ ọtọ
Mepụta ụdị kwụ ọtọ na grid site na ịgbakwunye .row
klaasị iji mepụta otu yana iji .col-*-*
klaasị kọwaa obosara nke akara na njikwa gị. Jide n'aka na ị ga-agbakwunye .col-form-label
na s gị <label>
ka ha wee dabere n'ụzọ kwụ ọtọ na njikwa ụdị ha jikọtara ya.
Mgbe ụfọdụ, ọ ga-adị mkpa ka ị jiri oke ma ọ bụ padding utilities mepụta nhazi ahụ zuru oke nke ịchọrọ. Dịka ọmụmaatụ, anyị ewepụla akara padding-top
ndenye redio anyị ekpokọtara iji kwado usoro ederede nke ọma.
<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>
Nha akara n'ahịrị kwụ ọtọ
Jide n'aka na ị na-eji .col-form-label-sm
ma ọ bụ .col-form-label-lg
na <label>
s ma ọ bụ <legend>
s gị iji soro nha .form-control-lg
na .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>
Nha kọlụm
Dịka egosiri na ọmụmaatụ ndị gara aga, sistemụ grid anyị na-enye gị ohere idowe ọnụọgụ .col
s ọ bụla n'ime a .row
ma ọ bụ .form-row
. Ha ga-ekewa obosara dị otu nha n'etiti ha. Ị nwekwara ike ịhọrọ akụkụ nke kọlụm gị ka ị weghara ohere ma ọ bụ dị ntakịrị, ebe ndị fọdụrụ .col
na-ekewa nke ọzọ, yana klas kọlụm dị ka .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>
Nhazi nha akpaaka
Ọmụmaatụ dị n'okpuru na-eji ike flexbox iji kwụ ọtọ n'etiti ọdịnaya wee gbanwee .col
ka .col-auto
ogidi gị wee were naanị ohere ọ bụla achọrọ. N'ikwu ya n'ụzọ ọzọ, kọlụm nha onwe ya dabere na ọdịnaya.
<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>
Ị nwere ike megharịa nke ahụ ọzọ site na iji klaasị kọlụm akọwapụtara nke ọma.
<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>
Na n'ezie a na-akwado njikwa ụdị omenala .
<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>
Ụdị ntanetị
Jiri .form-inline
klaasị ahụ gosipụta usoro akara, njikwa ụdị na bọtịnụ n'otu ahịrị kwụ ọtọ. Njikwa ụdị n'ime ụdị ahịrị dị iche iche site na steeti ndabara ha.
- Njikwa bụ
display: flex
, na-akụda oghere ọ bụla HTML na-enye gị ohere ịnye njikwa nhazi na spacing na flexbox utilities. - Njikwa na otu ntinye aka na-enweta
width: auto
iji kagbuo ndabara Bootstrapwidth: 100%
. - Njikwa na-apụta naanị n'ahịrị n'ọdụ ụgbọ mmiri opekata mpe 576px maka akaụntụ maka nlele dị warara na ngwaọrụ mkpanaka.
Ị nwere ike iji aka tinye obosara na nhazi nke njikwa ụdị n'onwe ya na ngwa oghere (dị ka egosiri n'okpuru). N'ikpeazụ, jide n'aka na ị na-etinye oge niile <label>
na njikwa ụdị ọ bụla, ọbụlagodi na ị ga-ezobe ya n'aka ndị ọbịa na-abụghị ndị na-agụ akwụkwọ na .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>
A na-akwadokwa njikwa ụdị omenala na nhọrọ.
<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>
Nhọrọ na akara ezoro ezo
Teknụzụ enyemaka dị ka ndị na-agụ ihuenyo ga-enwe nsogbu na ụdị gị ma ọ bụrụ na itinyeghị akara maka ntinye ọ bụla. Maka ụdị inline ndị a, ị nwere ike zoo akara n'iji .sr-only
klas ahụ. Enwere ụzọ ọzọ nke ịnye akara maka teknụzụ enyemaka, dị ka aria-label
, aria-labelledby
ma ọ bụ title
njirimara. Ọ bụrụ na ọ nweghị nke ọ bụla n'ime ihe ndị a dị, teknụzụ enyemaka nwere ike ịmalite iji placeholder
njirimara ahụ, ọ bụrụ na ọ dị, mana rịba ama na placeholder
a naghị akwado iji dochie usoro akara ndị ọzọ.
Ederede enyemaka
Enwere ike ịmepụta ederede enyemaka mgbochi n'ụdị site na iji .form-text
(nke a na-akpọbu .help-block
na v3). Enwere ike mejuputa ederede enyemaka dị n'ahịrị site na iji ihe HTML inline na klaasị ọ bụla dị ka .text-muted
.
Na-ejikọta ederede enyemaka na njikwa ụdị
Ekwesịrị ijikọ ederede enyemaka nke ọma na njikwa ụdị ọ metụtara iji aria-describedby
njirimara ahụ. Nke a ga-ahụ na teknụzụ enyemaka-dị ka ndị na-agụ ihuenyo-ga-akpọsa ederede enyemaka a mgbe onye ọrụ lekwasịrị anya ma ọ bụ banye na njikwa.
Enwere ike iji hazie ederede enyemaka n'okpuru ntinye .form-text
. Klas a na-agụnye display: block
ma na-agbakwụnye ụfọdụ oke elu maka ohere dị mfe site na ntinye dị n'elu.
<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>
Ederede inline nwere ike iji ihe ọ bụla HTML inline inline (ma ọ bụrụ a <small>
, <span>
, ma ọ bụ ihe ọzọ) na-enweghị ihe ọ bụla karịa klas uru.
<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>
Ụdị nkwarụ
Tinye njirimara disabled
boolean na ntinye iji gbochie mmekọrịta ndị ọrụ wee mee ka ọ dị ọkụ.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Tinye disabled
njirimara na a <fieldset>
iji gbanyụọ njikwa niile dị n'ime.
<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>
Ejikwa arịlịka gbachie anya
Ihe nchọgharị na-emeso njikwa ụdị ala ala niile ( <input>
, <select>
, na <button>
ọcha) n'ime onye <fieldset disabled>
nwere nkwarụ, na-egbochi ma keyboard na òké mmekọrịta na ha.
Agbanyeghị, ọ bụrụ na ụdị gị gụnyekwara ihe ndị yiri bọtịnụ omenala dị ka <a ... class="btn btn-*">
, a ga-enye ndị a naanị ụdị pointer-events: none
. Dị ka e kwuru na ngalaba gbasara ọnọdụ nkwarụ maka bọtịnụ (na kpọmkwem na mpaghara mpaghara maka ihe arịlịka), ihe onwunwe CSS a ahazibeghị nke ọma na akwadobeghị ya na Internet Explorer 10. Njikwa ndị dabeere na arịlịka ka ga-adịkwa. enwere ike ilekwasị anya na iji ahụigodo. Ị ga-eji aka gbanwee njikwa ndị a site n'ịgbakwunye tabindex="-1"
iji gbochie ha ịnweta elekwasị anya na aria-disabled="disabled"
igosi steeti ha na teknụzụ enyemaka.
Ndakọrịta ihe nchọgharị gafere
Ọ bụ ezie na Bootstrap ga-etinye ụdị ndị a na ihe nchọgharị niile, Internet Explorer 11 na nke dị n'okpuru anaghị akwado disabled
njirimara na faịlụ <fieldset>
. Jiri Javascript omenala iji gbanyụọ ntọala ubi na ihe nchọgharị ndị a.
Nkwado
Nye ndị ọrụ gị nzaghachi bara uru, nke nwere ike ịrụ ọrụ na nkwado ụdị HTML- dị na ihe nchọgharị anyị niile na-akwado . Họrọ nzaghachi nkwado ndabere nke ihe nchọgharị ahụ, ma ọ bụ mejuputa ozi omenala site na iji klaasị arụnyere na mmalite Javascript.
Ka o si arụ ọrụ
Nke a bụ ka nkwado fọm si arụ ọrụ na Bootstrap:
- A na-etinye nkwado ụdị HTML site na klaasị pseudo abụọ nke CSS,
:invalid
yana:valid
. Ọ na-emetụta<input>
,<select>
, na<textarea>
ọcha. - Bootstrap na-agbasa
:invalid
na:valid
ụdị na.was-validated
klaasị nne na nna, a na-etinyekarị ya na faịlụ<form>
. Ma ọ bụghị ya, ubi ọ bụla achọrọ na-enweghị uru na-egosi na ezighi ezi na ibu ibe. N'ụzọ dị otú a, ị nwere ike họrọ mgbe ịgbalite ha (na-emekarị mgbe a nwara nrubeisi ụdị). - Iji tọgharịa ọdịdị nke ụdị ahụ (dịka ọmụmaatụ, n'ihe gbasara ntinye ụdị ike na-eji AJAX), wepụ
.was-validated
klas ahụ<form>
ọzọ mgbe nrubeisi gasịrị. - Dị ka ndaghachi azụ,
.is-invalid
na.is-valid
klaasị nwere ike iji kama pseudo-klas maka nkwado akụkụ sava . Ha achọghị.was-validated
klas nne na nna. - N'ihi mmachi dị na ka CSS si arụ ọrụ, anyị enweghị ike (ugbu a) itinye ụdị na nke
<label>
na-abịa n'ihu njikwa ụdị na DOM na-enweghị enyemaka nke JavaScript omenala. - Ihe nchọgharị ọgbara ọhụrụ niile na-akwado API nkwado mgbochi , usoro Javascript maka njikwa ụdị.
- Ozi nzaghachi nwere ike iji ndabara ihe nchọgharị ahụ (dị iche maka ihe nchọgharị ọ bụla, yana nke na-adịghị mma site na CSS) ma ọ bụ ụdị nzaghachi omenala anyị nwere HTML na CSS agbakwunyere.
- Ị nwere ike ịnye ozi nkwado ndabere na
setCustomValidity
mpaghara Javascript.
N'iburu nke ahụ n'uche, tụlee ngosi ngosi ndị a maka ụdị nkwado ụdị omenala anyị, klaasị akụkụ ihe nkesa nhọrọ, yana ndabara ihe nchọgharị.
Ụdị omenala
Maka ozi nkwado ụdị Bootstrap omenala, ị ga-achọ ịgbakwunye njirimara novalidate
boolean na faịlụ <form>
. Nke a na-ewepụ ntụzịaka ngwaọrụ nzaghachi ndabara ihe nchọgharị, mana ọ ka na-enye ohere ịnweta API nkwado ụdị na Javascript. Gbalịa nyefee ụdị n'okpuru; Javascript anyị ga-egbochi bọtịnụ ntinye ma nyefee gị nzaghachi. Mgbe ị na-agbalị ịnyefe, ị ga-ahụ :invalid
na :valid
ụdị ndị etinyere na njikwa ụdị gị.
Ụdị nzaghachi omenala na-etinye agba, oke, ụdị elekwasị anya, na akara ndabere iji nweta nzaghachi ka mma. Akara ngosi ndabere maka <select>
s dị naanị .custom-select
na ọ bụghị .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>
Nchọgharị ndabara
Enweghị mmasị na ozi nzaghachi nkwado omenala ma ọ bụ ide Javascript iji gbanwee omume ụdị? Ọ dị mma, ịnwere ike iji ndabara ihe nchọgharị ahụ. Gbalịa ịnyefe fọm dị n'okpuru. Dabere na ihe nchọgharị gị na OS, ị ga-ahụ ụdị nzaghachi dịtụ iche.
Ọ bụ ezie na enweghị ike iji CSS hazie ụdị nzaghachi ndị a, ị ka nwere ike hazie ederede nzaghachi site na 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>
Akụkụ nkesa
Anyị na-akwado iji nkwado n'akụkụ ndị ahịa, mana ọ bụrụ na ịchọrọ nkwado n'akụkụ nkesa, ị nwere ike igosi oghere na ezighi ezi yana dị irè yana .is-invalid
yana .is-valid
. Rịba ama na .invalid-feedback
akwadoro ya na klaasị ndị a.
Maka mpaghara ezighi ezi, hụ na ejikọtala nzaghachi/ozi njehie na-ezighi ezi na mpaghara ụdị dị mkpa site na iji aria-describedby
. Àgwà ọma a na-enye ohere ka akọwapụta ihe karịrị otu id
, ma ọ bụrụ na ubi ahụ na-arụtụ aka na ederede ụdị ọzọ.
<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>
Ihe akwadoro
Ụdị nkwado dị maka njikwa ụdị na ihe ndị a:
<input>
s na<textarea>
s na.form-control
<select>
s na.form-control
ma ọ bụ.custom-select
.form-check
s.custom-checkbox
s na.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>
Ntuziaka ngwaọrụ
Ọ bụrụ na nhazi ụdị gị na-enye ya ohere, ị nwere ike gbanwee .{valid|invalid}-feedback
klaasị maka .{valid|invalid}-tooltip
klaasị iji gosipụta nzaghachi nkwado n'ụdị ngwa ọrụ ahaziri. Jide n'aka na ị ga-enwe nne na nna position: relative
na ya maka idobe ngwa ọrụ. N'ihe atụ dị n'okpuru, klaasị kọlụm anyị enweela nke a, mana ọrụ gị nwere ike ịchọ nhazi ọzọ.
<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>
Nhazi
Enwere ike ịhazi steeti nkwado site na Sass yana $form-validation-states
maapụ. Dị na _variables.scss
faịlụ anyị, a na-emechi maapụ Sass a ka iwepụta steeti ndabara valid
/ invalid
nkwado. Agụnyere bụ maapụ akwụ ụgwọ maka ịhazi agba na akara ngosi steeti ọ bụla. Ọ bụ ezie na enweghị steeti ndị ọzọ nke ihe nchọgharị na-akwado, ndị na-eji ụdị omenala nwere ike itinye nzaghachi ụdị dị mgbagwoju anya ngwa ngwa.
Biko mara na anyị anaghị akwado ịhazi ụkpụrụ ndị a na- form-validation-state
agbanweghịkwa 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));
}
Ntinye nkwado otu
Iji chọpụta ihe ndị chọrọ akụkụ gburugburu n'ime otu ntinye nwere nkwado, otu ntinye chọrọ .has-validation
klaasị agbakwunyere.
<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>
Ụdị omenala
N'ihi na ọbụna ndị ọzọ customization na cross agbanwe agbanwe nchọgharị, na-eji anyị kpam kpam omenala ụdị ọcha dochie ihe nchọgharị ndabere. Ewubere ha n'elu akara semantic na ịnweta, yabụ na ha bụ ndị nnọchi siri ike maka njikwa ụdị ndabara ọ bụla.
Igbe nlele na redio
Igbe nrịbama ọ bụla na redio <input>
na <label>
njikọta ka etinyere n'ime a <div>
iji mepụta njikwa omenala anyị. N'usoro, nke a bụ otu ụzọ dị ka ndabara anyị .form-check
.
Anyị na-eji onye ahọpụtara nwanne ( ~
) maka steeti anyị <input>
niile - dị ka :checked
- iji hazie akara ngosi omenala anyị nke ọma. Mgbe ejikọtara ya na .custom-control-label
klaasị, anyị nwekwara ike ịkepụta ederede maka ihe ọ bụla dabere na steeti <input>
's.
Anyị na-eji na-ezobe ndabara wee jiri <input>
ya wuo ihe ngosi omenala ọhụrụ n'ọnọdụ ya yana yana . Ọ dị nwute na anyị enweghị ike iwulite omenala site na naanị n'ihi na CSS anaghị arụ ọrụ na mmewere ahụ.opacity
.custom-control-label
::before
::after
<input>
content
Na steeti enyochala, anyị na-eji akara ngosi SVG agbakwunyere base64 sitere na Mepee Iconic . Nke a na-enye anyị njikwa kacha mma maka ịke na idowe n'ofe ihe nchọgharị na ngwaọrụ.
Igbe nbanye
<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>
Igbe nrịbama nke omenala nwekwara ike iji :indeterminate
klaasị pseudo mgbe ejiri aka tinye ya site na Javascript (enweghị njiri HTML dị maka ịkọwa ya).
Ọ bụrụ na ị na-eji jQuery, ihe dị ka nke a ga-ezuru:
$('.your-checkbox').prop('indeterminate', true)
Redio
<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>
N'ahịrị
<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>
Agbanyụrụ
Enwere ike gbanyụọ igbe nrịbama na redio omenala. Tinye njirimara disabled
boolean na <input>
akara ngosi omenala na nkọwa akara ga-edo onwe ya na-akpaghị aka.
<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>
Mgbanwe
Mgbanwe nwere akara nke igbe nrịbama omenala mana ọ na-eji .custom-switch
klaasị mee mgbanwe mgbanwe. Mgbanwe na-akwadokwa disabled
njirimara ahụ.
<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>
Họrọ menu
Nchịkọta nhọrọ omenala <select>
chọrọ naanị klas omenala, .custom-select
iji kpalite ụdị omenala. Ụdị omenala bụ naanị na <select>
ọdịdị mbụ ya enweghị ike ịgbanwe <option>
s n'ihi oke ihe nchọgharị.
<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>
Ị nwekwara ike họrọ n'ime obere na nnukwu omenala ahọpụtara iji dakọọ ntinye ederede anyị nhata.
<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>
Akwadokwa multiple
njirimara a:
<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>
Dị ka size
àgwà ahụ dị:
<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>
Oke
Jiri <input type="range">
njikwa ahaziri ahazi .custom-range
. Edebere egwu ahụ (ndabere) na mkpịsị aka (ọnụahịa) ka ha pụta otu ihe n'ofe ihe nchọgharị. Dị ka naanị IE na Firefox na-akwado "mejupụta" egwu ha site n'aka ekpe ma ọ bụ aka nri nke mkpịsị aka aka dị ka ụzọ isi gosipụta ọganihu anya, anyị anaghị akwado ya ugbu a.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Ntinye oke nwere ụkpụrụ maka min
na max
- 0
na 100
, n'otu n'otu. Ị nwere ike ịkọwapụta ụkpụrụ ọhụrụ maka ndị na-eji min
na max
njirimara.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Site na ndabara, nsonye ntinye "snap" gaa na ọnụọgụ ọnụọgụgụ. Iji gbanwee nke a, ị nwere ike ịkọwa step
uru. N'ihe atụ dị n'okpuru, anyị na-agbakọ ọnụ ọgụgụ nke nzọụkwụ site na iji step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Ihe nchọgharị faịlụ
Ntinye faịlụ ahụ bụ nke kachasị ngọngọ nke ụyọkọ ahụ ma chọọ Javascript ọzọ ma ọ bụrụ na ịchọrọ ijikọ ha na arụ ọrụ Họrọ faịlụ… wee họrọ ederede aha faịlụ.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Anyị na-ezobe faịlụ ndabara <input>
site opacity
na kama ịke ụdị <label>
. A na-emepụta bọtịnụ ma tinye ya na ::after
. N'ikpeazụ, anyị na-ekwupụta a width
na height
maka <input>
ohere kwesịrị ekwesị maka ọdịnaya gbara ya gburugburu.
Iji SCSS na-atụgharị asụsụ ma ọ bụ hazie eriri ahụ
A :lang()
na-eji pseudo-klas iji nye ohere ntụgharị asụsụ nke “Chọgharịa” n'asụsụ ndị ọzọ. Wepụ ma ọ bụ tinye ndenye na $custom-file-text
mgbanwe Sass na mkpado asụsụ dị mkpa yana eriri mpaghara. Enwere ike ịhazi eriri bekee n'otu ụzọ ahụ. Dịka ọmụmaatụ, nke a bụ otu mmadụ nwere ike isi tinye ntụgharị asụsụ Spanish (koodu asụsụ Spanish bụ es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Nke a lang(es)
na-arụ ọrụ na ntinye faịlụ omenala maka ntụgharị asụsụ Spanish:
<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>
Ị ga-achọ ịtọ asụsụ nke akwụkwọ gị (ma ọ bụ obere osisi ya) nke ọma ka e wee gosi ederede ziri ezi. Enwere ike ime nke a site na iji njirimara lang
dị na <html>
mmewere ma ọ bụ Content-Language
nkụnye eji isi mee HTTP , n'etiti ụzọ ndị ọzọ.
Iji HTML na-atụgharị asụsụ ma ọ bụ hazie eriri ahụ
Bootstrap na-enyekwa ụzọ iji tụgharịa asụsụ ederede “Chọgharịa” na HTML yana data-browse
njirimara enwere ike ịgbakwunye na akara ntinye omenala (ihe atụ na Dutch):
<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>