Cov ntawv
Piv txwv thiab siv cov txheej txheem rau kev tswj cov qauv, kev xaiv layout, thiab cov khoom siv rau kev tsim ntau hom ntawv.
Txheej txheem cej luam
Bootstrap daim ntawv tswj tau nthuav dav ntawm peb Rebooted daim ntawv styles nrog cov chav kawm. Siv cov chav kawm no los xaiv rau hauv lawv cov kev qhia tshwj xeeb rau kev ua kom zoo sib xws thoob plaws browsers thiab khoom siv.
Nco ntsoov siv tus type
cwj pwm tsim nyog ntawm tag nrho cov khoom siv (xws li, email
rau email chaw nyob lossis number
cov ntaub ntawv xov xwm) kom tau txais txiaj ntsig ntawm cov tswv yim tshiab xws li kev txheeb xyuas email, xaiv tus lej, thiab ntau dua.
Ntawm no yog ib qho piv txwv ceev los qhia txog Bootstrap cov qauv qauv. Khaws nyeem ntawv rau cov ntaub ntawv ntawm cov chav kawm xav tau, daim ntawv layout, thiab lwm yam.
<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>
Daim ntawv tswj
Cov ntawv nyeem cov ntawv tswj-xws li <input>
s, <select>
s, thiab <textarea>
s-yog styled nrog cov .form-control
chav kawm. Xws li cov qauv rau kev pom dav dav, tsom lub xeev, qhov loj me, thiab lwm yam.
Nco ntsoov tshawb xyuas peb cov ntaub ntawv kev cai rau ntxiv style <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>
Rau cov ntaub ntawv inputs, swap .form-control
rau .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>
Qhov loj me
Teeb qhov siab siv cov chav kawm zoo li .form-control-lg
thiab .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>
Nyeem nkaus xwb
Ntxiv tus readonly
cwj pwm boolean ntawm ib qho kev tawm tswv yim los tiv thaiv kev hloov pauv ntawm cov tswv yim tus nqi. Cov ntawv nyeem nkaus xwb zoo li sib dua (ib yam li cov khoom siv tsis taus), tab sis khaws tus cursor tus qauv.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Nyeem nkaus xwb
Yog tias koj xav kom muaj <input readonly>
cov ntsiab lus hauv koj daim ntawv styled raws li cov ntawv nyeem, siv cov .form-control-plaintext
chav kawm kom tshem tawm cov ntawv sau ua ntej styling thiab khaws cov npoo kom raug thiab 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>
Ntau yam inputs
Teem kab rov tav scrollable ntau inputs siv .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>
Checkboxes thiab xov tooj cua
Default checkboxes thiab xov tooj cua yog txhim kho raws li kev pab los ntawm .form-check
, ib chav kawm ntawv rau ob qho tib si input hom uas txhim kho cov layout thiab tus cwj pwm ntawm lawv HTML ntsiab . Checkboxes yog xaiv ib lossis ntau txoj hauv kev hauv ib daim ntawv teev npe, thaum lub xov tooj cua yog xaiv ib qho kev xaiv los ntawm ntau.
Cov neeg xiam oob qhab checkboxes thiab xov tooj cua tau txais kev txhawb nqa. Tus disabled
cwj pwm yuav siv cov xim sib dua los pab qhia cov tswv yim lub xeev.
Checkboxes thiab xov tooj cua nyees khawm txhawb HTML-raws li daim ntawv validation thiab muab cov ntsiab lus, siv tau cov ntawv. Yog li ntawd, peb <input>
cov s thiab <label>
s yog cov kwv tij txheeb ze uas tsis yog <input>
nyob hauv ib qho <label>
. Qhov no yog me ntsis ntau verbose raws li koj yuav tsum qhia meej id
thiab for
cwj pwm los cuam tshuam cov <input>
thiab <label>
.
Default (stacked)
Los ntawm lub neej ntawd, txhua tus naj npawb ntawm checkboxes thiab xov tooj cua uas yog cov kwv tij tam sim ntawd yuav raug vertically stacked thiab tsim nyog spaced nrog .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>
Hauv kab
Pab pawg checkboxes lossis xov tooj cua ntawm tib kab kab rov tav los ntawm kev ntxiv .form-check-inline
rau ib qho .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>
Tsis muaj daim ntawv lo
Ntxiv .position-static
rau inputs nyob rau hauv .form-check
uas tsis muaj cov ntawv sau npe. Nco ntsoov tseem muab qee hom npe siv tau rau kev pabcuam thev naus laus zis (piv txwv li, siv 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>
Layout
Txij li thaum Bootstrap siv display: block
thiab width: 100%
yuav luag tag nrho peb daim ntawv tswj hwm, cov ntaub ntawv yuav los ntawm lub neej ntawd pawg vertically. Cov chav kawm ntxiv tuaj yeem siv los hloov qhov kev teeb tsa no ntawm ib daim ntawv.
Tsim pab pawg
Cov .form-group
chav kawm yog qhov yooj yim tshaj los ntxiv qee cov qauv rau cov ntawv. Nws muab cov chav kawm hloov tau yooj yim uas txhawb kom muaj kev sib koom ua ke ntawm cov ntawv sau, kev tswj hwm, kev xaiv cov ntawv nyeem, thiab sau cov lus siv tau. Los ntawm lub neej ntawd nws tsuas siv tau margin-bottom
, tab sis nws khaws cov qauv ntxiv .form-inline
raws li xav tau. Siv nws nrog <fieldset>
s, <div>
s, lossis ze li lwm yam khoom.
<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>
Daim phiaj
Ntau cov ntaub ntawv nyuaj tuaj yeem tsim tau siv peb cov chav kawm kab sib chaws. Siv cov no rau daim ntawv layouts uas yuav tsum tau muaj ntau kab, varied widths, thiab ntxiv alignment xaiv.
<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>
Daim ntawv kab
Koj kuj tuaj yeem sib pauv .row
rau .form-row
, qhov kev hloov pauv ntawm peb cov kab kab kab sib txuas uas dhau los ntawm cov kab ke ua ntej gutters rau nruj dua thiab ntau qhov sib txuam.
<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>
Ntau qhov layouts tseem tuaj yeem tsim nrog cov kab sib chaws.
<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>
Kab rov tav daim ntawv
Tsim cov ntawv kab rov tav nrog daim phiaj los ntawm kev ntxiv cov .row
chav kawm los tsim cov pab pawg thiab siv cov .col-*-*
chav kawm los qhia qhov dav ntawm koj cov ntawv sau thiab kev tswj hwm. Nco ntsoov ntxiv .col-form-label
rau koj <label>
li thiab yog li lawv nyob nraum vertically centered nrog lawv daim ntawv tswj hwm.
Qee lub sij hawm, tej zaum koj yuav tau siv cov paj los yog cov khoom siv padding los tsim kom muaj kev sib haum xeeb uas koj xav tau. Piv txwv li, peb tau tshem tawm padding-top
ntawm peb cov ntawv xov tooj cua sib xyaw ua ke kom zoo dua cov kab ntawv hauv qab.
<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>
Kab rov tav daim ntawv lo sizing
Nco ntsoov siv .col-form-label-sm
lossis .col-form-label-lg
rau koj <label>
s lossis <legend>
s kom raug ua raws li qhov loj me .form-control-lg
thiab .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>
Kem qhov loj me
Raws li pom nyob rau hauv cov piv txwv yav dhau los, peb daim phiaj system tso cai rau koj tso tus naj npawb ntawm .col
s hauv ib .row
lossis .form-row
. Lawv yuav faib qhov dav dav sib npaug ntawm lawv. Koj tseem tuaj yeem xaiv ib pawg ntawm koj cov kab kom siv ntau dua lossis tsawg dua qhov chaw, thaum qhov seem .col
s sib npaug sib faib tus so, nrog cov chav kawm tshwj xeeb xws li .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>
Auto-sizing
Cov piv txwv hauv qab no siv cov khoom siv flexbox rau vertically nruab nrab ntawm cov ntsiab lus thiab hloov pauv .col
kom .col-auto
koj cov kab tsuas siv tau ntau qhov chaw raws li xav tau. Muab lwm txoj hauv kev, kem loj nws tus kheej raws li cov ntsiab lus.
<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>
Tom qab ntawd koj tuaj yeem remix qhov ntawd ib zaug ntxiv nrog cov chav kawm tshwj xeeb hauv kab.
<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>
Thiab ntawm chav kawm kev cai daim ntawv tswj tau txais kev txhawb nqa.
<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>
Cov ntawv hauv kab
Siv cov .form-inline
chav kawm los tso saib cov ntawv sau, daim ntawv tswj hwm, thiab cov nyees khawm ntawm ib kab kab rov tav. Daim ntawv tswj nyob rau hauv cov ntaub ntawv inline sib txawv me ntsis ntawm lawv lub xeev ua ntej.
- Kev tswj hwm yog
display: flex
, tsoo txhua qhov chaw HTML dawb thiab tso cai rau koj los muab kev tswj hwm kev sib raug zoo nrog qhov sib nrug thiab cov khoom siv flexbox . - Tswj thiab pab pawg nkag tau txais
width: auto
los hla lub Bootstrap defaultwidth: 100%
. - Kev tswj tsuas yog tshwm sim hauv kab hauv cov chaw saib uas tsawg kawg yog 576px dav rau tus account rau qhov nqaim viewports ntawm cov khoom siv txawb.
Tej zaum koj yuav xav tau manually hais txog qhov dav thiab kev sib raug zoo ntawm tus kheej daim ntawv tswj nrog qhov sib nrug (raws li qhia hauv qab no). Thaum kawg, nco ntsoov ib txwm suav <label>
nrog txhua daim ntawv tswj hwm, txawm tias koj yuav tsum zais nws los ntawm cov neeg tuaj saib tsis yog screenreader nrog .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>
Kev cai daim ntawv tswj thiab xaiv kuj tau txais kev txhawb nqa.
<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>
Lwm txoj hauv kev rau cov ntawv zais
Kev pabcuam thev naus laus zis xws li kev tshuaj ntsuam nyeem yuav muaj teeb meem nrog koj cov ntaub ntawv yog tias koj tsis suav nrog daim ntawv lo rau txhua qhov kev tawm tswv yim. Rau cov ntaub ntawv hauv kab no, koj tuaj yeem nkaum cov ntawv lo siv cov .sr-only
chav kawm. Muaj lwm txoj hauv kev los muab ib daim ntawv lo rau cov cuab yeej pabcuam, xws li aria-label
, aria-labelledby
lossis title
tus cwj pwm. Yog tias tsis muaj cov no tam sim no, cov thev naus laus zis pab cuam tuaj yeem siv rau kev siv tus placeholder
cwj pwm, yog tias tam sim no, tab sis nco ntsoov tias kev siv placeholder
los hloov lwm txoj kev sau npe tsis raug qhia.
Pab ntawv nyeem
Thaiv-theem pab cov ntawv hauv cov ntawv tuaj yeem tsim siv .form-text
(yav dhau los hu ua .help-block
hauv v3). Inline pab cov ntawv tuaj yeem ua tau yooj yim siv los ntawm txhua lub hauv paus HTML thiab cov chav kawm siv hluav taws xob zoo li .text-muted
.
Koom nrog kev pab cov ntawv nyeem nrog cov ntawv tswj hwm
Cov ntawv nyeem yuav tsum qhia meej meej nrog rau daim ntawv tswj nws cuam tshuam nrog kev siv tus aria-describedby
cwj pwm. Qhov no yuav ua kom ntseeg tau tias cov thev naus laus zis pabcuam-xws li cov nyeem tshuaj ntsuam-yuav tshaj tawm cov ntawv pabcuam no thaum tus neeg siv tsom lossis nkag mus rau kev tswj hwm.
Pab cov ntawv hauv qab no inputs yuav styled nrog .form-text
. Cov chav kawm no suav nrog display: block
thiab ntxiv qee qhov saum toj kawg nkaus rau qhov sib nrug yooj yim los ntawm cov khoom siv saum toj no.
<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>
Cov ntawv hauv kab tuaj yeem siv txhua yam hauv kab hauv HTML (xws li nws yog <small>
, <span>
, lossis lwm yam) tsis muaj dab tsi ntau dua li chav kawm siv hluav taws xob.
<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>
Cov ntawv tsis taus
Ntxiv tus disabled
cwj pwm boolean ntawm qhov kev tawm tswv yim los tiv thaiv cov neeg siv kev sib cuam tshuam thiab ua kom nws tshwm sim dua.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Ntxiv tus disabled
cwj pwm rau ib qho <fieldset>
kom lov tes taw tag nrho cov tswj hauv.
<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>
Caveat nrog anchors
Cov browsers kho txhua hom kev tswj hwm ib txwm muaj ( <input>
, <select>
, thiab <button>
cov ntsiab lus) hauv cov <fieldset disabled>
neeg xiam oob qhab, tiv thaiv ob qho tib si keyboard thiab nas cuam tshuam rau lawv.
Txawm li cas los xij, yog tias koj daim ntawv tseem suav nrog cov kev cai khawm zoo li cov ntsiab lus xws li <a ... class="btn btn-*">
, cov no tsuas yog muab cov qauv ntawm pointer-events: none
. Raws li tau sau tseg hauv ntu hais txog cov neeg xiam oob khab rau cov nyees khawm (thiab tshwj xeeb hauv ntu ntu rau cov khoom thauj tog rau nkoj), CSS cov cuab yeej no tseem tsis tau muaj tus qauv thiab tsis tau txais kev txhawb nqa tag nrho hauv Internet Explorer 10. Cov kev tswj xyuas thauj tog rau nkoj tseem tseem yuav yog. focusable thiab operable siv cov keyboard. Koj yuav tsum hloov kho cov kev tswj hwm no los ntawm kev ntxiv tabindex="-1"
los tiv thaiv lawv kom tsis txhob tau txais kev tsom xam thiab aria-disabled="disabled"
qhia lawv lub xeev rau cov cuab yeej pabcuam.
Cross-browser compatibility
Thaum Bootstrap yuav siv cov qauv no hauv txhua qhov browsers, Internet Explorer 11 thiab hauv qab no tsis txhawb nqa tus disabled
cwj pwm ntawm <fieldset>
. Siv kev cai JavaScript los lov tes taw cov fieldset hauv cov browsers no.
Kev lees paub
Muab cov lus qhia muaj txiaj ntsig zoo rau koj cov neeg siv nrog HTML5 daim ntawv lees paub - muaj nyob hauv txhua qhov browser uas peb txhawb nqa . Xaiv los ntawm qhov browser default validation tawm tswv yim, los yog siv cov lus kev cai nrog peb cov chav kawm built-in thiab pib JavaScript.
Nws ua haujlwm li cas
Nov yog li cas daim ntawv validation ua haujlwm nrog Bootstrap:
- HTML daim ntawv validation yog siv ntawm CSS's ob pseudo-chav kawm,
:invalid
thiab:valid
. Nws siv rau<input>
,<select>
, thiab<textarea>
cov khoom. - Bootstrap scopes
:invalid
thiab:valid
styles rau niam txiv.was-validated
chav kawm, feem ntau siv rau<form>
. Txwv tsis pub, txhua qhov chaw uas yuav tsum tau muaj yam tsis muaj nqi qhia tau tias tsis raug ntawm nplooj ntawv thauj khoom. Txoj kev no, koj tuaj yeem xaiv thaum twg los qhib lawv (feem ntau tom qab xa daim ntawv thov). - Txhawm rau rov pib dua qhov zoo li ntawm daim ntawv (piv txwv li, nyob rau hauv cov ntaub ntawv ntawm dynamic daim ntawv xa mus siv AJAX), tshem tawm cov
.was-validated
chav kawm ntawv los ntawm<form>
dua tom qab xa. - Raws li kev poob qis,
.is-invalid
thiab.is-valid
cov chav kawm yuav raug siv los hloov cov pseudo-chav kawm rau server sab validation . Lawv tsis tas yuav muaj.was-validated
chav kawm niam txiv. - Vim muaj kev txwv hauv CSS ua haujlwm li cas, peb tsis tuaj yeem (tam sim no) siv cov qauv rau ib qho
<label>
uas los ua ntej daim ntawv tswj hauv DOM yam tsis muaj kev pab los ntawm kev cai JavaScript. - Tag nrho cov browsers niaj hnub no txhawb nqa qhov txwv tsis pub siv API , cov txheej txheem JavaScript rau kev tswj xyuas daim ntawv.
- Cov lus tawm tswv yim tuaj yeem siv qhov browser defaults (sib txawv rau txhua qhov browser, thiab tsis zoo ntawm CSS) los yog peb cov kev cai tawm tswv yim nrog ntxiv HTML thiab CSS.
- Koj tuaj yeem muab cov lus muaj cai siv tau nrog
setCustomValidity
hauv JavaScript.
Nrog rau qhov ntawd nyob rau hauv lub siab, xav txog cov nram qab no demos rau peb cov kev cai daim ntawv validation styles, xaiv server sab chav kawm, thiab browser defaults.
Kev cai style
Rau kev cai Bootstrap daim ntawv validation lus, koj yuav tsum tau ntxiv tus novalidate
cwj pwm boolean rau koj <form>
. Qhov no cuam tshuam qhov browser default tawm tswv yim cov lus qhia, tab sis tseem muab kev nkag mus rau daim ntawv validation APIs hauv JavaScript. Sim xa daim foos hauv qab no; peb JavaScript yuav cuam tshuam lub pob xa tawm thiab xa cov lus tawm tswv yim rau koj. Thaum sim xa, koj yuav pom cov qauv :invalid
thiab :valid
cov qauv siv rau koj daim ntawv tswj hwm.
Cov kev tawm tswv yim kev cai siv cov xim kev cai, ciam teb, tsom cov qauv, thiab cov cim keeb kwm yav dhau los kom sib txuas lus zoo dua. Cov cim keeb kwm yav dhau rau <select>
s tsuas yog muaj nrog .custom-select
, thiab tsis yog .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 defaults
Tsis txaus siab rau kev cai validation lus tawm tswv yim los yog sau JavaScript los hloov tus cwj pwm? Txhua yam zoo, koj tuaj yeem siv qhov browser defaults. Sim xa daim foos hauv qab no. Nyob ntawm koj tus browser thiab OS, koj yuav pom cov lus tawm tswv yim sib txawv me ntsis.
Txawm hais tias cov kev tawm tswv yim no tsis tuaj yeem tsim nrog CSS, koj tseem tuaj yeem hloov kho cov lus tawm tswv yim los ntawm 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>
Server sab
Peb pom zoo kom siv cov neeg siv khoom validation, tab sis nyob rau hauv rooj plaub koj xav tau server-sab validation, koj tuaj yeem qhia cov ntawv tsis raug thiab siv tau nrog .is-invalid
thiab .is-valid
. Nco ntsoov tias .invalid-feedback
tseem muaj kev txhawb nqa nrog cov chav kawm no.
Rau cov teb tsis raug, xyuas kom meej tias cov lus tawm tswv yim tsis raug / cov lus yuam kev cuam tshuam nrog rau daim ntawv thov siv aria-describedby
. Cov cwj pwm no tso cai rau ntau tshaj ib qho id
los hais txog, yog tias daim teb twb tau taw qhia rau cov ntawv sau ntxiv.
<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>
Txhawb cov ntsiab lus
Cov qauv kev lees paub muaj nyob rau hauv daim ntawv tswj thiab cov khoom hauv qab no:
<input>
s thiab<textarea>
s.form-control
<select>
s nrog.form-control
lub.custom-select
.form-check
s.custom-checkbox
s thiab.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>
Cov lus qhia
Yog tias koj daim ntawv layout tso cai rau nws, koj tuaj yeem sib pauv cov .{valid|invalid}-feedback
chav kawm rau .{valid|invalid}-tooltip
cov chav kawm los tso tawm cov lus pom zoo rau hauv cov lus qhia styled. Nco ntsoov muaj ib tug niam txiv nrog position: relative
rau nws rau qhov kev taw qhia qhov chaw. Hauv qhov piv txwv hauv qab no, peb cov chav kawm kem muaj qhov no lawm, tab sis koj qhov project yuav xav tau lwm txoj kev teeb tsa.
<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>
Customizing
Kev lees paub lub xeev tuaj yeem hloov kho ntawm Sass nrog $form-validation-states
daim ntawv qhia. Nyob rau hauv peb cov _variables.scss
ntaub ntawv, daim ntawv qhia Sass no yog looped los tsim cov default valid
/ invalid
validation xeev. Muaj yog ib daim ntawv qhia nested rau customizing txhua lub xeev cov xim thiab icon. Txawm hais tias tsis muaj lwm lub xeev tau txais kev txhawb nqa los ntawm browsers, cov neeg siv cov qauv kev cai tuaj yeem yooj yim ntxiv cov lus tawm tswv yim ntau dua.
Thov nco ntsoov tias peb tsis pom zoo kom kho cov nqi no yam tsis tau hloov kho cov 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));
}
Input pab pawg validation
Txhawm rau txheeb xyuas cov ntsiab lus dab tsi xav tau cov ces kaum sib npaug hauv ib pawg tswv yim nrog kev siv tau, ib pawg tswv yim yuav tsum muaj .has-validation
chav kawm ntxiv.
<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>
Cov qauv kev cai
Rau kev hloov kho ntau dua thiab hla qhov browser sib xws, siv peb cov qauv kev cai tag nrho los hloov qhov browser defaults. Lawv tau tsim nyob rau sab saum toj ntawm semantic thiab siv tau markup, yog li lawv yog cov khoom hloov pauv rau txhua daim ntawv tswj hwm.
Checkboxes thiab xov tooj cua
Txhua checkbox thiab xov tooj cua <input>
thiab <label>
khub yog qhwv rau hauv ib tug <div>
los tsim peb cov kev cai tswj. Structurally, qhov no yog tib txoj kev raws li peb lub neej ntawd .form-check
.
Peb siv tus nus muag xaiv ( ~
) rau tag nrho peb <input>
lub xeev-xws li :checked
— kom ua kom zoo rau peb daim ntawv qhia kev cai. Thaum ua ke nrog cov .custom-control-label
chav kawm, peb kuj tuaj yeem tsim cov ntawv nyeem rau txhua yam khoom raws li lub <input>
xeev.
Peb zais lub neej ntawd <input>
nrog opacity
thiab siv .custom-control-label
los tsim ib qho kev cai tshiab qhia hauv nws qhov chaw nrog ::before
thiab ::after
. Hmoov tsis zoo peb tsis tuaj yeem tsim ib qho kev cai los ntawm qhov <input>
vim tias CSS content
tsis ua haujlwm ntawm lub caij ntawd.
Hauv cov xeev txheeb xyuas, peb siv base64 embedded SVG icons los ntawm Qhib Iconic . Qhov no muab peb txoj kev tswj hwm zoo tshaj plaws rau styling thiab muab tso rau thoob plaws browsers thiab khoom siv.
Checkboxes
<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>
Kev cai checkboxes tseem tuaj yeem siv cov :indeterminate
chav kawm pseudo thaum manually teem ntawm JavaScript (tsis muaj HTML tus cwj pwm rau kev qhia nws).
Yog tias koj siv jQuery, qee yam zoo li no yuav tsum txaus:
$('.your-checkbox').prop('indeterminate', true)
Xov tooj cua
<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>
Hauv kab
<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>
Neeg tsis taus
Kev cai checkboxes thiab xov tooj cua tuaj yeem raug kaw. Ntxiv tus disabled
cwj pwm boolean rau qhov <input>
thiab qhov taw qhia kev cai thiab cov lus piav qhia daim ntawv lo yuav raug txiav tawm.
<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>
Hloov
Ib qho kev hloov pauv muaj qhov cim ntawm lub npov kev cai tab sis siv cov .custom-switch
chav kawm los ua qhov hloov pauv. Switches kuj txhawb tus disabled
cwj pwm.
<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>
Xaiv cov ntawv qhia zaub mov
Cov ntawv qhia kev cai <select>
tsuas yog xav tau cov chav kawm kev cai xwb, .custom-select
txhawm rau ua rau cov qauv kev cai. Cov qauv kev cai tsuas yog txwv rau qhov <select>
tshwm sim thawj zaug thiab tsis tuaj yeem hloov kho qhov <option>
s vim qhov browser txwv.
<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>
Koj tuaj yeem xaiv los ntawm cov kev cai me me thiab loj xaiv kom phim peb cov ntawv sau zoo sib xws.
<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>
Tus multiple
cwj pwm kuj tau txais kev txhawb nqa:
<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>
Raws li yog tus size
cwj pwm:
<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>
Ntau yam
Tsim kev cai <input type="range">
tswj nrog .custom-range
. Cov khiav (tom qab) thiab tus ntiv tes xoo (tus nqi) yog ob qho tib si styled kom tshwm ib yam thoob plaws browsers. Raws li tsuas yog IE thiab Firefox txhawb nqa "sau" lawv txoj kev los ntawm sab laug lossis sab xis ntawm tus ntiv tes xoo ua ib qho txhais tau tias pom kev nce qib, peb tsis tau txhawb nqa tam sim no.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Ntau yam inputs muaj implicit qhov tseem ceeb rau min
thiab max
— 0
thiab 100
, feem. Koj tuaj yeem qhia qhov tseem ceeb tshiab rau cov uas siv cov khoom min
thiab max
cov cwj pwm.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
Los ntawm lub neej ntawd, ntau yam inputs "snap" rau cov lej suav. Txhawm rau hloov qhov no, koj tuaj yeem qhia tus step
nqi. Hauv qhov piv txwv hauv qab no, peb muab ob npaug ntawm cov kauj ruam los ntawm kev siv step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Cov ntaub ntawv browser
Cov ntaub ntawv tawm tswv yim yog qhov feem ntau gnarly ntawm pawg thiab xav tau ntxiv JavaScript yog tias koj xav txuas lawv nrog kev ua haujlwm Xaiv cov ntaub ntawv… thiab xaiv cov ntaub ntawv npe ntawv.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Peb nkaum lub neej ntawd cov ntaub ntawv <input>
ntawm opacity
thiab hloov style lub <label>
. Lub pob yog generated thiab positioned nrog ::after
. Thaum kawg, peb tshaj tawm ib qho width
thiab height
ntawm qhov <input>
chaw kom raug rau cov ntsiab lus nyob ib puag ncig.
Txhais lossis kho cov hlua nrog SCSS
Cov :lang()
pseudo-chav kawm yog siv los tso cai rau kev txhais cov ntawv "Xaiv" rau lwm hom lus. Override lossis ntxiv kev nkag mus rau $custom-file-text
Sass hloov pauv nrog cov lus tseem ceeb thiab cov hlua hauv zos. Cov hlua Askiv tuaj yeem hloov kho tib yam. Piv txwv li, ntawm no yog yuav ua li cas ib tug yuav ntxiv ib tug Spanish txhais lus (Spanish cov lus code yog es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Nov yog qhov lang(es)
kev txiav txim ntawm cov ntaub ntawv kev cai nkag rau kev txhais lus 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>
Koj yuav tsum tau teeb tsa hom lus ntawm koj cov ntaub ntawv (lossis subtree ntawm no) kom raug thiaj li pom cov ntawv raug. Qhov no tuaj yeem ua tiav siv tus lang
cwj pwm ntawm lub <html>
caij lossis Content-Language
HTTP header , ntawm lwm txoj hauv kev.
Txhais lossis kho cov hlua nrog HTML
Bootstrap tseem muab txoj hauv kev los txhais cov ntawv "Xaiv" hauv HTML nrog tus data-browse
cwj pwm uas tuaj yeem muab ntxiv rau cov ntawv sau kev cai (piv txwv hauv 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>