Khawm

Siv Bootstrap cov kev cai khawm style rau kev ua hauv cov ntawv, sib tham, thiab ntau ntxiv nrog kev txhawb nqa rau ntau qhov ntau thiab tsawg, xeev, thiab ntau dua.

Piv txwv

Bootstrap suav nrog ntau lub pob khawm ua ntej, txhua tus ua haujlwm rau nws tus kheej lub hom phiaj, nrog ob peb yam ntxiv pov rau hauv kev tswj hwm ntau dua.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Disable text wrapping

Yog tias koj tsis xav kom lub pob ntawv qhwv, koj tuaj yeem ntxiv cov .text-nowrapchav kawm rau lub pob. Hauv Sass, koj tuaj yeem teeb tsa $btn-white-space: nowrapkom kaw cov ntawv sau rau txhua lub pob.

Khawm tag

Cov .btnchav kawm yog tsim los siv nrog lub <button>ntsiab. Txawm li cas los xij, koj tuaj yeem siv cov chav kawm no <a>los yog <input>cov ntsiab lus (txawm tias qee qhov browsers yuav siv qhov sib txawv me ntsis).

Thaum siv cov chav kawm khawm ntawm <a>cov ntsiab lus uas tau siv los ua kom muaj kev ua haujlwm hauv nplooj ntawv (xws li kev sib tsoo cov ntsiab lus), tsis yog txuas mus rau nplooj ntawv tshiab lossis ntu hauv nplooj ntawv tam sim no, cov kev sib txuas no yuav tsum tau muab role="button"rau kom tsim nyog qhia lawv lub hom phiaj rau kev pabcuam thev naus laus zis xws li screen nyeem ntawv.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Taw qhia cov nyees khawm

Xav tau ib lub pob, tab sis tsis yog cov xim tom qab hnyav lawv nqa? Hloov cov chav kawm hloov pauv hloov pauv nrog cov .btn-outline-*uas yuav tshem tawm tag nrho cov duab tom qab thiab xim ntawm ib lub pob.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Qhov ntau thiab tsawg

Xav tau cov nyees khawm loj lossis me dua? Ntxiv .btn-lglossis .btn-smrau qhov ntau thiab tsawg.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Tsim thaiv qib nyees khawm-cov uas nthuav dav dav ntawm niam txiv-los ntawm kev ntxiv .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Active lub xeev

Cov nyees khawm yuav tshwm sim thaum ua haujlwm nrog cov keeb kwm yav dhau los tsaus, ciam teb tsaus, thiab, thaum cov duab ntxoov ntxoo qhib, ib qho duab ntxoov ntxoo inset. Tsis tas yuav ntxiv ib chav rau <button>s li lawv siv pseudo-chav kawm . Txawm li cas los xij, koj tseem tuaj yeem yuam tib lub ntsej muag nrog .active(thiab suav nrog tus aria-pressed=“true”cwj pwm) yog tias koj xav tau rov ua dua lub xeev programmatically.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Lub xeev tsis taus

Ua kom cov nyees khawm zoo li tsis ua haujlwm los ntawm kev ntxiv tus disabledcwj pwm boolean rau txhua <button>lub caij.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Cov khawm xiam oob qhab siv lub <a>caij coj txawv me ntsis:

• <a>s tsis txhawb tus disabledcwj pwm, yog li koj yuav tsum ntxiv cov .disabledchav kawm kom nws pom qhov tsis taus.
• Qee qhov kev nyiam yav tom ntej yog suav nrog rau lov tes taw tag nrho pointer-eventsntawm cov nyees khawm thauj tog rau nkoj. Hauv browsers uas txhawb cov cuab yeej ntawd, koj yuav tsis pom tus cursor xiam oob qhab txhua.
• Cov nyees khawm uas siv <a>tsis tau yuav tsum suav nrog tus aria-disabled="true"cwj pwm los qhia txog lub xeev ntawm cov khoom siv rau kev pabcuam.
• Cov khawm tsis siv neeg siv <a> yuav tsum tsis suav nrog tus hrefcwj pwm.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Link functionality caveat

Txhawm rau npog cov xwm txheej uas koj yuav tsum khaws tus hrefcwj pwm ntawm qhov txuas tsis taus, cov .disabledchav kawm siv pointer-events: nonelos sim lov tes taw qhov txuas ua haujlwm ntawm <a>s. Nco ntsoov tias cov cuab yeej CSS no tseem tsis tau ua qauv rau HTML, tab sis txhua qhov browsers niaj hnub txhawb nqa nws. Tsis tas li ntawd, txawm nyob rau hauv browsers uas txhawb nqa pointer-events: none, keyboard navigation tseem tsis cuam tshuam, txhais tau hais tias cov neeg siv cov keyboard pom thiab cov neeg siv thev naus laus zis tseem tuaj yeem qhib cov kev txuas no. Yog li kom muaj kev nyab xeeb, ntxiv rau aria-disabled="true", kuj suav nrog tus tabindex="-1"cwj pwm ntawm cov kev sib txuas no los tiv thaiv lawv los ntawm kev txais cov keyboard tsom, thiab siv cov kev cai JavaScript los lov tes taw lawv cov haujlwm tag nrho.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Khawm plugin

Ua ntau nrog cov nyees khawm. Tswj khawm hais los yog tsim pab pawg ntawm cov nyees khawm rau ntau yam xws li toolbars.

Toggle xeev

Ntxiv data-toggle="button"rau toggle khawm lub activexeev. Yog hais tias koj nyob nraum pre-toggling ib lub pob, koj yuav tsum manually ntxiv cov .activechav kawm ntawv thiab aria-pressed="true" mus rau lub <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Checkbox thiab xov tooj cua khawm

Bootstrap cov .buttonqauv tuaj yeem siv rau lwm cov ntsiab lus, xws li <label>s, los muab lub thawv ntawv lossis lub xov tooj cua style khawm toggling. Ntxiv data-toggle="buttons"rau qhov .btn-groupuas muaj cov nyees khawm hloov los ua kom lawv tus cwj pwm toggling ntawm JavaScript thiab ntxiv .btn-group-togglerau style <input>s hauv koj cov nyees khawm. Nco ntsoov tias koj tuaj yeem tsim ib qho input-powered nyees khawm lossis pab pawg ntawm lawv.

Lub xeev kuaj rau cov nyees khawm no tsuas yog hloov kho los ntawm clickkev tshwm sim ntawm lub pob. Yog tias koj siv lwm txoj hauv kev los hloov kho cov tswv yim-xws li, nrog <input type="reset">lossis los ntawm manually siv cov tswv yim cov checkedcuab yeej-koj yuav tsum toggle .activentawm <label>manually.

Nco ntsoov tias cov nyees khawm pre-checked xav kom koj manually ntxiv cov .activechav kawm rau cov tswv yim <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Cov txheej txheem