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