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>Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp
Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .sr-onlyklas.
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 (wit bakgrɔn we dak, bɔda we dak, ɛn shado we dɛn put insay) we dɛn de wok. 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 didisabledatribyut, 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 fɔ gɛt di
aria-disabled="true"atribyut fɔ sho di stet fɔ di ɛlimɛnt to ɛp teknɔlɔji dɛn.
<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>Link funkshɔnaliti caveat
Di .disabledklas de yuz pointer-events: nonefɔ tray fɔ disable di link funkshɔnaliti fɔ <a>s, bɔt da CSS prɔpati de nɔ standad yet. 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, ad wan tabindex="-1"atribyut 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.
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" autocomplete="off">
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ɔ bay clickdi ivin we de 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 .activedi wan <label>wit yu an.
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 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>Di we aw dɛn de du am
| We | Tɔk bɔt |
|---|---|
$().button('toggle') |
Toggles push stet. Gi di bɔtin di we aw i tan lɛk se dɛn dɔn aktiv am. |
$().button('dispose') |
I de pwɛl wan ɛlimɛnt in bɔtin. |