Ba boutons

Salelá ba styles ya bouton personnalisé ya Bootstrap mpo na misala na ba formulaire, ba dialogues, mpe mingi mosusu na lisungi mpo na bonene ebele, ba états, mpe mingi mosusu.

Bandakisa

Bootstrap ezali na ba styles ya bouton oyo esili kolimbolama liboso, moko na moko ezali kosalela ntina na yango ya sémantique, na mwa ba extras oyo ebwakami na kati mpo na kozala na bokonzi mingi.

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

Désactiver enveloppement ya makomi

Soki olingi te makomi ya bouton ezinga, okoki kobakisa .text-nowrapkelasi na bouton. Na Sass, okoki kosala $btn-white-space: nowrapmpo na kokanga enveloppement ya makomi mpo na bouton moko na moko.

Ba tags ya bouton

Ba .btnclasses esalemi pona kosalela na <button>élément. Kasi, okoki mpe kosalela bakelasi yango na <a>to na <input>ba éléments (atako ba navigateurs mosusu ekoki kosalela rendu oyo ekeseni mwa moke).

Ntango ozali kosalela bakelasi ya bouton na <a>biloko oyo esalelamaka mpo na kofungola mosala ya kati ya lokasa (lokola makambo oyo ezali kokwea), na esika ya kosala lien na nkasa to biteni ya sika na kati ya lokasa oyo ezali sikoyo, esengeli kopesa ba liens yango role="button"mpo na kopesa ntina na yango na ndenge oyo ebongi na mayele ya kosalisa lokola batángi ya écran.

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

Ba boutons ya plan

Na besoin ya bouton, mais te ba couleurs ya fond hefty ba memaka? Bozongisa ba classes ya modificateur par défaut na .btn-outline-*oyo ya kolongola ba images nionso ya fond na ba couleurs na bouton nionso.

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

Ba taille

Fancy ba boutons ya minene to ya mike? Bakisa .btn-lgto .btn-smmpo na ba taille mosusu.

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

Salá ba boutons ya niveau ya bloc —oyo epanzani na bonene mobimba ya moboti —na kobakisa .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>

Etat actif

Ba boutons ekobima na kofina tango ezali activé na fond ya molili, ndelo ya molili, mpe, tango ba ombres efungolami, elili ya inset. Ezali na ntina te kobakisa kelasi na <button>s lokola basalelaka kelasi ya lokuta . Kasi, okoki kaka ko forcer apparence active moko na .active(mpe ko inclure aria-pressed=“true”attribut) soki oza na besoin ya ko reproduire état programmatiquement.

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

Etat ya désactivé

Sala ba boutons ezala inactive na kobakisa disabledattribut boolean na <button>élément nionso.

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

Ba boutons désactivés oyo esalelaka <a>élément ezo comporter mua différent:

• <a>s esimbaka disabledattribut te, yango wana esengeli obakisa .disabledkelasi mpo emonana na miso lokola ekangami.
• Ba styles misusu ya future-friendly ekotisami pona ko désactiver nionso pointer-eventsna ba boutons ya anchor. Na ba navigateurs oyo esimbaka propriété wana, okomona curseur désactivé ata moke te.
• Ba boutons handicapés kosalela <a>esengeli kozala na aria-disabled="true"attribut mpo na kolakisa état ya élément na ba technologies ya lisungi.
• Ba boutons désactivés oyo ezali kosalela <a> esengeli te kozala na hrefattribut.

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

Lien ya fonctionnalité ya caveat

Pona ko couvrir ba cas oyo esengeli o garder hrefattribut na lien désactivé, .disabledclasse esalela pointer-events: nonepona koluka ko désactiver fonctionnalité ya lien ya <a>s. Yeba ete propriété oyo ya CSS ezali nanu standardisé te mpo na HTML, kasi ba navigateurs nionso ya mikolo oyo esungaka yango. En plus, même dans les navigateurs qui do soutien pointer-events: none, navigation ya clavier etikali sans effet, elingi koloba que ba usagers ya clavier oyo emonanaka na ba usagers ya ba technologies d’assistance bakozala kaka na makoki ya ko activer ba liens wana. Donc mpo na kozala sûr, en plus ya aria-disabled="true", kotia mpe tabindex="-1"attribut moko na ba liens oyo mpo na kopekisa bango bazua focus ya clavier, mpe kosalela JavaScript personnalisé mpo na ko désactiver fonctionnalité na bango mobimba.

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

Plugin ya bouton

Sala mingi na ba boutons. Bouton ya contrôle ezo loba to kosala ba groupes ya ba boutons pona ba composants ebele lokola ba barres d'outils.

Toggle ba états

Bakisa data-toggle="button"mpo na kobongola ezalela ya bouton moko active. Soki ozali kobongola liboso bouton moko, osengeli kobakisa .activekelasi mpe aria-pressed="true" na <button>.

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

Boîte de coche mpe ba boutons ya radio

Ba styles ya Bootstrap .buttonekoki kosalelama na ba éléments misusu, lokola <label>s, pona kopesa case ya kotiya elembo to toggling ya bouton ya style ya radio. Bakisa data-toggle="buttons"na oyo .btn-groupezali na ba boutons wana oyo ebongisami mpo na kofungola bizaleli na bango ya kobongola na nzela ya JavaScript mpe bakisa .btn-group-togglempo na kosala style ya <input>s na kati ya ba boutons na yo. Yebá ete okoki kosala ba boutons moko oyo ezali na nguya ya kokɔtisa to bituluku na yango.

Etat oyo e vérifié pona ba boutons oyo ezo mise à jour kaka via clickévénement na bouton. Soki osaleli lolenge mosusu mpo na kosala mikolo oyo bokotisi —ndakisa, na <input type="reset">to na kosalelaka na maboko checkedpropriété ya bokotisi —okozala na mposa ya kobalusa .activena <label>maboko.

Yebá ete ba boutons oyo otye liboso esɛngaka obakisa .activekelasi na mabɔkɔ na oyo ya entrée <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>

Ba méthodes ya kosala