Salá koleka na makambo ya ntina Salta na navigation ya docs
in English

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.

Na lokasa oyo

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 extra oyo ebwakami 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 .visually-hiddenkelasi.

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.

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>
Mitindo mosusu ya bouton esalela langi ya liboso oyo ezali mpenza pɛtɛɛ, mpe esengeli kosalelama kaka na fond ya molili mpo na kozala na bokeseni oyo ekoki.

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>

Etat ya désactivé

Sala que ba boutons ezala inactive na kobakisa disabledattribut boolean na <button>élément nionso. Ba boutons désactivés e pointer-events: noneappliqué na, kopekisa hover na ba états actifs e déclencher.

<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 obakisi .disabledkelasi mpo na kosala ete emonanaka na miso lokola ekangami.
  • Ba styles mosusu ya future-friendly ezali na kati mpo na ko désactiver nionso pointer-eventsna ba boutons ya anchor.
  • Ba boutons désactivés oyo ezali 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.
Lien ya liboso Lien 
<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>

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.

Lien ya liboso Lien 
<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>

Bokanga ba boutons

Bosala ba stacks oyo ezo répondre ya largeur mobimba, “ba boutons ya bloc” lokola oyo ezali na Bootstrap 4 na mélange ya ba utilitaires na biso ya écran na gap. Na kosalelaka ba utilitaires na esika ya ba classes spécifiques ya bouton, tozali na contrôle monene mingi likolo ya espacement, alignment, mpe ba comportements ya réponse.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Awa tosalaka variation responsive, kobanda na ba boutons empilé verticalement tii na mdpoint de rupture, esika .d-md-blockezo remplacer .d-gridclasse, na ndenge wana ko annuler gap-2utilitaire. Bobongola bonene ya navigateur na bino mpo na komona ete bábongwana.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Okoki kobongisa bonene ya ba boutons ya bloc na yo na ba classes ya largeur ya colonne ya grille. Na ndakisa, mpo na “bouton ya bloc” oyo ezali na ndambo ya bonene, salelá .col-6. Centre yango horizontalement na .mx-auto, mpe.

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Ba utilitaires ya kobakisa ekoki kosalelama mpo na kobongisa alignment ya ba boutons tango ezali horizontal. Awa tozui ndakisa na biso ya kala ya eyano mpe tobakisi mwa ba utilitaires ya flex mpe utilitaire ya marge na bouton mpo na ko aligner na droite ba boutons tango ezali lisusu ebele te.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plugin ya bouton

Plugin ya bouton epesaka yo nzela ya kosala ba boutons ya kofungola/kokanga ya pete.

Na miso, ba boutons oyo ya kobongola ezali ndenge moko na ba boutons ya kobongola na esika bakomi . Kasi “bouton”/“bouton oyo efinamaki”. Pona kati ya ba approches oyo mibale ekolanda lolenge ya toggle oyo ozali kosala, mpe soki to te toggle ekozala na ntina mpo na basaleli ntango esakolami lokola case ya kotiya elembo to lokola bouton ya solo.

Toggle ba états

Bakisa data-bs-toggle="button"mpo na kobongola ezalela ya bouton moko active. Soki ozali kobongola liboso bouton moko, osengeli kobakisa .activekelasi na mabɔkɔ mpe aria-pressed="true" mpo na kosala ete epesamela yango na ndenge oyo ebongi na mayele ya kosalisa.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
Bobongola lien Lien ya kobalusa oyo ezali active Lien ya kobalusa oyo ekangami 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Ba méthodes ya kosala

Okoki kosala instance ya bouton na constructeur ya bouton, ndakisa:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Metode Ndimbola
toggle Toggles état ya kopusama. Epesaka bouton apparence que esili ko activer.
dispose Ebebisaka bouton ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM)
getInstance Méthode statique oyo e permettre yo ozua instance ya bouton associé na élément DOM, okoki kosalela yango boye:bootstrap.Button.getInstance(element)
getOrCreateInstance Méthode statique oyo ezongisaka instance ya bouton oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ezalaki initialisé te. Okoki kosalela yango boye:bootstrap.Button.getOrCreateInstance(element)

Na ndakisa, mpo na kobongola ba boutons nyonso

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass oyo azali

Ba variables oyo ezali

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Ba mixins

Ezali na ba mixins misato mpo na ba boutons: bouton mpe ba mixins ya variante ya contour ya bouton (nyonso mibale esalemi na $theme-colors), bakisa mpe mixin ya bonene ya bouton.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Ba boucles

Ba variantes ya boutons (po na ba boutons réguliers na ya contour) basalelaka ba mixins na bango respectifs na $theme-colorscarte na biso pona ko générer ba classes ya modificateur na scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}