Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

Butoane

Utilizați stilurile personalizate de butoane Bootstrap pentru acțiuni în formulare, dialoguri și multe altele, cu suport pentru mai multe dimensiuni, stări și multe altele.

Pe aceasta pagina

Exemple

Bootstrap include mai multe stiluri de butoane predefinite, fiecare având propriul scop semantic, cu câteva elemente suplimentare pentru mai mult control.

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>
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.

Dezactivați împachetarea textului

Dacă nu doriți ca textul butonului să se încadreze, puteți adăuga .text-nowrapclasa la buton. În Sass, puteți seta $btn-white-space: nowrapsă dezactivați împachetarea textului pentru fiecare buton.

Etichete pentru butoane

Clasele .btnsunt concepute pentru a fi utilizate cu <button>elementul. Cu toate acestea, puteți utiliza și aceste clase pe <a>sau <input>elemente (deși unele browsere pot aplica o randare ușor diferită).

Atunci când utilizați clase de butoane pe <a>elemente care sunt utilizate pentru a declanșa funcționalitatea în pagină (cum ar fi restrângerea conținutului), mai degrabă decât să faceți linkuri către pagini noi sau secțiuni din pagina curentă, aceste linkuri ar trebui să aibă un role="button"rol pentru a transmite în mod corespunzător scopul lor tehnologiilor de asistență, cum ar fi cititoare de ecran.

Legătură
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">

Contur butoanele

Ai nevoie de un buton, dar nu de culorile puternice de fundal pe care le aduc? Înlocuiți clasele modificatoare implicite cu .btn-outline-*cele pentru a elimina toate imaginile și culorile de fundal de pe orice buton.

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>
Unele dintre stilurile de butoane folosesc o culoare de prim-plan relativ deschisă și ar trebui folosite numai pe un fundal întunecat pentru a avea un contrast suficient.

Dimensiuni

Vrei nasturi mai mari sau mai mici? Adăugați .btn-lgsau .btn-smpentru dimensiuni suplimentare.

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>

Puteți chiar să rulați propria dimensiune personalizată cu variabile 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>

Stare dezactivată

Faceți butoanele să pară inactive adăugând disabledatributul boolean oricărui <button>element. S-au aplicat butoane dezactivate pointer-events: none, împiedicând declanșarea stărilor de trecere cu mouse-ul și activ.

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>

Butoanele dezactivate care utilizează <a>elementul se comportă puțin diferit:

  • <a>s nu acceptă disabledatributul, așa că trebuie să adăugați .disabledclasa pentru ca aceasta să pară dezactivată vizual.
  • Unele stiluri prietenoase pentru viitor sunt incluse pentru a dezactiva toate pointer-eventsbutoanele de ancorare.
  • Utilizarea butoanelor dezactivate <a>ar trebui să includă aria-disabled="true"atributul pentru a indica starea elementului la tehnologiile de asistență.
  • Utilizarea butoanelor dezactivate <a> nu ar trebui să includă hrefatributul.
Legătura principală Legătură
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>

Pentru a acoperi cazurile în care trebuie să păstrați hrefatributul pe o legătură dezactivată, .disabledclasa folosește pointer-events: nonepentru a încerca să dezactiveze funcționalitatea de legătură a lui <a>s. Rețineți că această proprietate CSS nu este încă standardizată pentru HTML, dar toate browserele moderne o acceptă. În plus, chiar și în browserele care acceptă pointer-events: none, navigarea cu tastatura rămâne neafectată, ceea ce înseamnă că utilizatorii de tastatură văzători și utilizatorii de tehnologii de asistență vor putea în continuare să activeze aceste linkuri. Deci, pentru a fi în siguranță, pe lângă aria-disabled="true", includeți și un tabindex="-1"atribut pe aceste linkuri pentru a le împiedica să primească focalizarea tastaturii și utilizați JavaScript personalizat pentru a le dezactiva complet funcționalitatea.

Legătura principală Legătură
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>

Blocați butoanele

Creați stive receptive de „butoane de blocare” cu lățime completă, cum ar fi cele din Bootstrap 4, cu o combinație de utilități de afișare și intervale. Folosind utilitare în loc de clase specifice butoanelor, avem un control mult mai mare asupra spațierii, alinierii și comportamentelor de răspuns.

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>

Aici creăm o variație responsive, începând cu butoanele stivuite vertical până la punctul de mdîntrerupere, unde .d-md-blockînlocuiește .d-gridclasa, anulând astfel gap-2utilitatea. Redimensionați browserul pentru a vedea cum se modifică.

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>

Puteți ajusta lățimea butoanelor de bloc cu clasele de lățime a coloanei de grilă. De exemplu, pentru un „buton de blocare” de jumătate de lățime, utilizați .col-6. Centrați-l și pe orizontală cu .mx-auto.

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>

Utilitare suplimentare pot fi folosite pentru a regla alinierea butoanelor atunci când sunt orizontale. Aici am luat exemplul nostru receptiv anterior și am adăugat câteva utilitare flexibile și un utilitar de marjă pe buton pentru a alinia la dreapta butoanele când nu mai sunt stivuite.

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

Plugin-ul pentru butoane vă permite să creați butoane simple de pornire/dezactivare.

Din punct de vedere vizual, aceste butoane de comutare sunt identice cu butoanele de comutare ale casetei de selectare . Cu toate acestea, ele sunt transmise diferit de tehnologiile de asistență: comutatoarele casetelor de selectare vor fi anunțate de cititorii de ecran ca „bifate”/„nebifate” (deoarece, în ciuda aspectului lor, ele sunt, în principiu, încă casete de selectare), în timp ce aceste butoane de comutare vor fi anunțate ca „buton”/“buton apăsat”. Alegerea dintre aceste două abordări va depinde de tipul de comutare pe care îl creați și de dacă comutatorul va avea sens sau nu pentru utilizatori atunci când este anunțat ca o casetă de selectare sau ca un buton real.

Comutați stările

Adăugați data-bs-toggle="button"pentru a comuta activestarea unui buton. Dacă comutați în prealabil un buton, trebuie să adăugați manual .activeclasa și aria-pressed="true" să vă asigurați că este transmisă în mod corespunzător la tehnologiile de asistență.

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>
Comutați linkul Legătură de comutare activă Legătura de comutare a fost dezactivată
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>

Metode

Puteți crea o instanță de buton cu constructorul de buton, de exemplu:

const bsButton = new bootstrap.Button('#myButton')
Metodă Descriere
dispose Distruge butonul unui element. (Elimină datele stocate pe elementul DOM)
getInstance Metodă statică care vă permite să obțineți instanța butonului asociată unui element DOM, o puteți utiliza astfel: bootstrap.Button.getInstance(element).
getOrCreateInstance Metodă statică care returnează o instanță de buton asociată unui element DOM sau creează una nouă în cazul în care nu a fost inițializată. Îl poți folosi astfel: bootstrap.Button.getOrCreateInstance(element).
toggle Comută starea push. Oferă butonului aspectul că a fost activat.

De exemplu, pentru a comuta toate butoanele

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

CSS

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, butoanele folosesc acum variabile CSS locale activate .btnpentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

  --#{$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);

Fiecare .btn-*clasă modificatoare actualizează variabilele CSS corespunzătoare pentru a minimiza regulile CSS suplimentare cu mixurile noastre button-variant(), button-outline-variant(), și button-size().

Iată un exemplu de construire a unei .btn-*clase modificatoare personalizate, așa cum facem noi pentru butoanele unice pentru documentele noastre, reatribuind variabilele CSS ale Bootstrap cu un amestec de propriile variabile CSS și 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%)};
}

Variabile 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%;

Sass mixins

Există trei mix-uri pentru butoane: mix-uri variante de contur de buton și buton (ambele bazate pe $theme-colors), plus un mixin de dimensiunea butonului.

@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};
}

Sass bucle

Variantele de butoane (pentru butoanele obișnuite și de contur) folosesc mixurile lor respective cu $theme-colorsharta noastră pentru a genera clasele modificatoare în 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);
  }
}