Source

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 typecwj pwm tsim nyog ntawm tag nrho cov khoom siv (xws li, emailrau email chaw nyob lossis numbercov 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.

Peb yuav tsis qhia koj email rau lwm tus. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </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-controlchav 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-controlrau .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-lgthiab .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 readonlycwj 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-plaintextchav 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" placeholder="Password">
    </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 khab checkboxes thiab xov tooj cua tau txais kev txhawb nqa, tab sis txhawm rau muab tus not-allowedcursor ntawm hover ntawm niam txiv <label>, koj yuav tsum tau ntxiv tus disabledcwj pwm rau .form-check-input. Tus cwj pwm xiam oob khab yuav siv cov xim sib dua los pab qhia cov tswv yim lub xeev.

Checkboxes thiab xov tooj cua siv yog tsim los 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 idthiab forcwj 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-inlinerau 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-staticrau inputs nyob rau hauv .form-checkuas tsis muaj cov ntawv sau npe. Nco ntsoov tseem muab qee daim ntawv lo rau cov cuab yeej pabcuam (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: blockthiab 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-groupchav 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-inlineraws 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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 .rowrau .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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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 .rowchav 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-labelrau 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-topntawm peb cov ntawv xov tooj cua sib xyaw ua ke kom zoo dua cov kab ntawv hauv qab.

Xov tooj cua
Checkbox 
<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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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-smlossis .col-form-label-lgrau koj <label>s lossis <legend>s kom raug ua raws li qhov loj me .form-control-lgthiab .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 .cols hauv ib .rowlossis .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 .cols 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 .colkom .col-autokoj 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-inlinechav 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: autolos hla lub Bootstrap default width: 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-onlychav kawm. Muaj lwm txoj hauv kev los muab ib daim ntawv lo rau cov cuab yeej pabcuam, xws li aria-label, aria-labelledbylossis titletus 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 placeholdercwj pwm, yog tias tam sim no, tab sis nco ntsoov tias kev siv placeholderlos 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-blockhauv 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-describedbycwj 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: blockthiab ntxiv qee qhov saum toj kawg nkaus rau qhov sib nrug yooj yim los ntawm cov khoom siv saum toj no.

Koj tus password yuav tsum yog 8-20 tus cim ntev, muaj cov tsiaj ntawv thiab cov lej, thiab yuav tsum tsis muaj qhov chaw, cim tshwj xeeb, lossis emoji. 
<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.

Yuav tsum yog 8-20 cim ntev. 
<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 disabledcwj 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 disabledcwj pwm rau ib qho <fieldset>kom lov tes taw tag nrho cov tswj hauv.

<form>
  <fieldset disabled>
    <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

Los ntawm lub neej ntawd, browsers yuav kho txhua hom kev tswj hwm ib txwm muaj ( <input>, <select>thiab <button>cov ntsiab lus ) hauv qhov <fieldset disabled>ua tsis taus, 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 <a ... class="btn btn-*">cov ntsiab lus, cov no tsuas yog muab cov style ntawm pointer-events: none. Raws li tau sau tseg hauv nqe lus 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 ua qauv thiab tsis tau txais kev txhawb nqa tag nrho hauv Internet Explorer 10, thiab yuav tsis tiv thaiv cov neeg siv cov keyboard los ntawm kev ua. muaj peev xwm tsom los yog qhib cov kev txuas no. Yog li kom muaj kev nyab xeeb, siv kev cai JavaScript los lov tes taw cov kev sib txuas.

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 disabledcwj 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.

Tam sim no peb pom zoo kom siv cov kev cai validation style, raws li haiv neeg browser default validation cov lus tsis tas li raug rau cov technologies pab nyob rau hauv tag nrho cov browsers (feem ntau yog, Chrome ntawm desktop thiab mobile).

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, :invalidthiab :valid. Nws siv rau <input>, <select>, thiab <textarea>cov khoom.
  • Bootstrap scopes :invalidthiab :validstyles rau niam txiv .was-validatedchav 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-validatedchav kawm ntawv los ntawm <form>dua tom qab xa.
  • Raws li kev poob qis, .is-invalidthiab .is-validcov chav kawm yuav raug siv los hloov cov pseudo-chav kawm rau server sab validation . Lawv tsis tas yuav muaj .was-validatedchav 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 setCustomValidityhauv 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 novalidatecwj 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 :invalidthiab :validcov 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.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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-invalidthiab .is-valid. Nco ntsoov tias .invalid-feedbacktseem muaj kev txhawb nqa nrog cov chav kawm no.

Saib zoo!
Saib zoo!
@
Thov xaiv tus neeg siv lub npe.
Thov muab lub nroog siv tau.
Thov muab lub xeev siv tau.
Thov muab tus zip siv tau.
Koj yuav tsum pom zoo ua ntej xa. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

Txhawb cov ntsiab lus

Peb cov ntaub ntawv piv txwv qhia cov ntawv nyeem ib txwm nyob <input>saum toj no, tab sis cov qauv kev lees paub kuj muaj rau <textarea>s thiab kev cai daim ntawv tswj hwm.

Thov sau ib cov lus hauv textarea.
Piv txwv cov lus tawm tswv yim tsis raug
Piv txwv ntau cov lus tawm tswv yim tsis raug
Piv txwv tsis raug cai xaiv cov lus tawm tswv yim
Piv txwv tsis raug cai cov ntaub ntawv tawm tswv yim 
<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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</form>

Cov lus qhia

Yog tias koj daim ntawv layout tso cai rau nws, koj tuaj yeem sib pauv cov .{valid|invalid}-feedbackchav kawm rau .{valid|invalid}-tooltipcov chav kawm los tso tawm cov lus pom zoo rau hauv cov lus qhia styled. Nco ntsoov muaj ib tug niam txiv nrog position: relativerau 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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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-labelchav 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 opacitythiab siv .custom-control-labellos tsim ib qho kev cai tshiab qhia hauv nws qhov chaw nrog ::beforethiab ::after. Hmoov tsis zoo peb tsis tuaj yeem tsim ib qho kev cai los ntawm qhov <input>vim tias CSS contenttsis 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 :indeterminatechav 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="customRadioInline1" 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="customRadioInline1" 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 disabledcwj 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-switchchav kawm los ua qhov hloov pauv. Switches kuj txhawb tus disabledcwj 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-selecttxhawm 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 multiplecwj 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 sizecwj 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 minthiab max— 0thiab 100, feem. Koj tuaj yeem qhia qhov tseem ceeb tshiab rau cov uas siv cov khoom minthiab maxcov 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 stepnqi. 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

Lub plugin pom zoo rau animate custom file input: bs-custom-file-input , uas yog qhov peb siv tam sim no ntawm peb cov ntaub ntawv.

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 opacitythiab hloov style lub <label>. Lub pob yog generated thiab positioned nrog ::after. Thaum kawg, peb tshaj tawm ib qho widththiab heightntawm 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-textSass 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 langcwj pwm ntawm lub <html>caij lossis Content-LanguageHTTP 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-browsecwj 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>