Source

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>
Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .sr-onlykelasi.

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.

Lien 
<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 (na fond ya moindo, ndelo ya moindo, mpe elili ya inset) tango ezali activé. 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.

Lien ya liboso Lien 
<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 désactivés esengeli ezala na aria-disabled="true"attribut mpo na kolakisa état ya élément na ba technologies d’assistance.
Lien ya liboso Lien 
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

.disabledClasse esalelaka pona pointer-events: nonekoluka ko désactiver fonctionnalité ya lien ya <a>s, mais propriété wana ya CSS eza nanu standardisé te. 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, bakisa tabindex="-1"attribut moko na ba liens oyo (po na kopekisa yango kozua focus ya clavier) mpe salela JavaScript personnalisé mpo na ko désactiver fonctionnalité na yango.

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" autocomplete="off">
  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 actualiser 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 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>

Ba méthodes ya kosala

Metode Ndimbola
$().button('toggle') Toggles état ya kopusama. Epesaka bouton apparence que esili ko activer.
$().button('dispose') Ebebisaka bouton ya élément moko.