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>

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 (nrog rau tom qab tsaus nti, ciam teb tsaus nti, thiab teeb duab ntxoov ntxoo) thaum ua haujlwm. 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 xiam oob qhab yuav tsum suav nrog tus aria-disabled="true"cwj pwm los qhia txog lub xeev ntawm cov khoom siv rau kev pabcuam.

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Cov txheej txheem