Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
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 extras oyo ebwakami na kati mpo na kozala na bokonzi mingi.

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

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

html 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
html 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Okoki kutu ko rouler taillement personnalisé na yo moko na ba variables CSS:

html 
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom 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.

html 
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" 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.
  • 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
html 
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary 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
html 
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Ba boutons ya ko bloquer

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.

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

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

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

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

html 
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Toggle lien ya kosala Lien ya kobalusa actif Lien ya kobalusa oyo ekangami
html 
<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:

const bsButton = new bootstrap.Button('#myButton')
Metode Ndimbola
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).
toggle Toggles état ya kopusama. Epesaka bouton apparence que esili ko activer.

Na ndakisa, mpo na kobongola ba boutons nyonso

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba boutons esalela sikoyo ba variables CSS locales on .btnmpo na personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Classe moko na moko .btn-*ya modificateur ezo actualiser ba variables ya CSS oyo ebongi pona ko minimiser mibeko ya CSS ya kobakisa na ba button-variant(), button-outline-variant(), na ba button-size()mixins na biso.

Tala ndakisa ya kotonga .btn-*classe ya modificateur personnalisé lokola tosalaka pona ba boutons unique na ba docs na biso na ko reassigner ba variables CSS ya Bootstrap na mélange ya ba variables na biso moko ya CSS na Sass.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Ba variables ya Sass

$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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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 ya sass

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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Ba boucles ya Sass

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} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

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