Bɔtin dɛn

Yuz Bootstrap in kɔstɔm bɔtin stayl dɛn fɔ akshɔn dɛn na fɔm dɛn, dayalɔg dɛn, ɛn mɔ wit sɔpɔt fɔ bɔku saiz dɛn, stet dɛn, ɛn ɔda tin dɛn.

Ɛgzampul dɛn

Bootstrap inklud sɔm prɛdifayn bɔtin stayl dɛn, ɛni wan de sav in yon sɛmantik pɔpɔshɔn, wit sɔm ɛkstra dɛn we dɛn trowe insay fɔ mɔ kɔntrol.

<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 fɔ rap tɛks

If yu nɔ want di bɔtin tɛks fɔ rap, yu kin ad di .text-nowrapklas to di bɔtin. Insay Sass, yu kin sɛt $btn-white-space: nowrapfɔ disable tɛks wrap fɔ ɛni bɔtin.

Di tag dɛn we de na di bɔtin

Dɛn .btnmek di klas dɛn fɔ yuz wit di <button>ɛlimɛnt. Bɔt yu kin yuz dɛn klas dɛn ya bak pan <a>ɔ <input>ɛlimɛnt dɛn (pan ɔl we sɔm brɔuza dɛn kin yuz wan smɔl difrɛn rɛndreshɔn).

We yu de yuz bɔtin klas dɛn pan <a>ɛlimɛnt dɛn we dɛn kin yuz fɔ trig in-pej wok (lɛk kɔntinyu fɔ kɔlaps), pas fɔ link to nyu pej ɔ sɛkshɔn dɛn insay di pej we de naw, dɛn fɔ gi dɛn link dɛn ya a role="button"fɔ mek dɛn ebul fɔ gi dɛn rizin di rayt we to ɛtɛknɔlɔji dɛn we de ɛp dɛn lɛk skrin rida dɛn.

<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">

Di bɔtin dɛn fɔ autlayn

Yu nid bɔtin, bɔt nɔto di hefty bakgrɔn kɔlɔ dɛn we dɛn kin briŋ? Riples di difɔlt modifya klas dɛn wit di .btn-outline-*wan dɛn fɔ pul ɔl di bakgrɔn pikchɔ ɛn kɔlɔ dɛn na ɛni bɔtin.

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

Sayz dɛn

Fans big ɔ smɔl bɔtin dɛn? Ad .btn-lgɔ .btn-smfɔ ɔda saiz dɛn.

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

Krio blɔk lɛvɛl bɔtin dɛn—di wan dɛn we de span di ful wit fɔ wan mama ɔ papa—bay we yu ad .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>

Aktiv stet we de wok

Bɔtin dɛn go apia we dɛn prɛs we dɛn de aktiv wit bakgrɔn we dak, bɔda we dak, ɛn, we dɛn ɛnabul shado dɛn, shado we dɛn put insay. No nid nɔ de fɔ ad klas to <button>s as dɛn de yuz pseudo-klas . Bɔt, yu kin stil fos di sem aktiv apinɛns wit .active(ɛn inklud di aria-pressed=“true”atribyut) if yu nid fɔ riplik di stet programmatik wan.

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

Disabled stet

Mek bɔtin dɛn luk inaktiv bay we yu ad di disabledbuli atribyut to ɛni <button>ɛlimɛnt.

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

Di bɔtin dɛn we nɔ ebul fɔ yuz di <a>ɛlimɛnt kin biev difrɛn smɔl:

• <a>s nɔ de sɔpɔt di disabledatribyut, so yu fɔ ad di .disabledklas fɔ mek i tan lɛk se i nɔ ebul fɔ si.
• Sɔm stayl dɛn we go fayn fɔ tumara bambay de fɔ disable ɔl pointer-eventsdi ankɔ bɔtin dɛn. Insay brawza dɛn we de sɔpɔt da prɔpati de, yu nɔ go si di kɔsa we dɔn disable atɔl.
• Disabled bɔtin dɛn we de yuz <a>fɔ inklud di aria-disabled="true"atribyut fɔ sho di stet fɔ di ɛlimɛnt to ɛp teknɔlɔji dɛn.
• Disabled bɔtin dɛn we de yuz <a> nɔ fɔ gɛt di hrefatribyut.

<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 funkshɔnaliti caveat

Fɔ kɔba kes dɛn usay yu fɔ kip di hrefatribyut pan wan disabul link, di .disabledklas de yuz pointer-events: nonefɔ tray fɔ disable di link funkshɔnaliti fɔ <a>s. Notis se dis CSS prɔpati nɔ standad yet fɔ HTML, bɔt ɔl di mɔdan brawza dɛn de sɔpɔt am. Apat frɔm dat, ivin insay brawza dɛn we de sɔpɔt pointer-events: none, di kibɔd nevigishɔn nɔ de afɛkt, we min se di wan dɛn we de si di kibɔd ɛn di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp dɛn go stil ebul fɔ aktiv dɛn link dɛn ya. So fɔ mek yu sef, apat frɔm aria-disabled="true", put wan tabindex="-1"atribyut bak na dɛn link dɛn ya fɔ mek dɛn nɔ gɛt kibɔd fɔs, ɛn yuz kɔstɔm JavaSkript fɔ disable dɛn wok ɔltogɛda.

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

Bɔtin plɔgin

Du mɔ wit bɔtin dɛn. Kɔntrol bɔtin de tɔk ɔ mek grup dɛn fɔ bɔtin fɔ mɔ kɔmpɔnɛnt dɛn lɛk tulba dɛn.

Toggle stet dɛn

Add data-toggle="button"to toggle wan bɔtin in activestet. If yu de pri-toggling wan bɔtin, yu fɔ ad di .activeklas ɛn aria-pressed="true" to di <button>.

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

Chɛkbɔks ɛn redio bɔtin dɛn

Yu kin yuz Bootstrap in .buttonstayl dɛn fɔ ɔda ɛlimɛnt dɛn, lɛk <label>s, fɔ gi chɛkbɔks ɔ redio stayl bɔtin tɔgl. Ad data-toggle="buttons"to wan .btn-groupwe gɛt dɛn bɔtin dɛn we dɛn dɔn chenj fɔ mek dɛn ebul fɔ chenj di we aw dɛn de biev bay JavaSkript ɛn ad .btn-group-togglefɔ stayl di <input>s dɛn we de insay yu bɔtin dɛn. Notis se yu kin mek wan bɔtin dɛn we gɛt input-pawa ɔ grup dɛn pan dɛn.

Di stet we dɛn chɛk fɔ dɛn bɔtin dɛn ya de ɔpdet nɔmɔ tru clickivent na di bɔtin. If yu yuz ɔda we fɔ ɔpdet di input—ɛgz., wit <input type="reset">ɔ bay we yu yuz di input in checkedprɔpati wit yu an—yu go nid fɔ tɔgl .activepan di <label>manually.

Notis se di bɔtin dɛn we yu dɔn chɛk bifo tɛm nid fɔ ad di .activeklas wit yu an to di input in <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>

Di we aw dɛn de du am