Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima

Koristite Bootstrapove prilagođene stilove gumba za radnje u obrascima, dijalozima i više s podrškom za više veličina, stanja i više.

Primjeri

Bootstrap uključuje nekoliko unaprijed definiranih stilova gumba, od kojih svaki služi svojoj semantičkoj svrsi, s nekoliko dodataka ubačenih za veću kontrolu.

<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>
Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .visually-hiddenklasom.

Onemogući prelamanje teksta

Ako ne želite da se tekst gumba prelama, možete dodati .text-nowrapklasu gumbu. U Sassu možete postaviti $btn-white-space: nowrapda onemogućite prelamanje teksta za svaki gumb.

Oznake gumba

Klase .btnsu dizajnirane za korištenje s <button>elementom. Međutim, također možete koristiti ove klase na <a>ili <input>elementima (iako neki preglednici mogu primijeniti malo drugačije prikazivanje).

Kada koristite klase gumba na <a>elementima koji se koriste za pokretanje funkcionalnosti unutar stranice (kao što je sažimanje sadržaja), umjesto povezivanja na nove stranice ili odjeljke unutar trenutne stranice, tim vezama treba dati role="button"kako bi se njihova svrha na odgovarajući način prenijela na pomoćne tehnologije kao što su čitači zaslona.

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

Konturni gumbi

Treba vam gumb, ali ne i jake pozadinske boje koje donose? Zamijenite zadane klase modifikatora .btn-outline-*onima za uklanjanje svih pozadinskih slika i boja na bilo kojem gumbu.

<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>
Neki od stilova gumba koriste relativno svijetlu boju prednjeg plana i trebali bi se koristiti samo na tamnoj pozadini kako bi imali dovoljan kontrast.

Veličine

Želite li veće ili manje gumbe? Dodajte .btn-lgili .btn-smza dodatne veličine.

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

Onesposobljeno stanje

Neka gumbi izgledaju neaktivno dodavanjem disabledBoolean atributa bilo kojem <button>elementu. Onemogućeni gumbi pointer-events: noneprimijenjeni su na, sprječavajući aktiviranje lebdenja i aktivnih stanja.

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

Onemogućeni gumbi koji koriste <a>element ponašaju se malo drugačije:

  • <a>s ne podržavaju disabledatribut, tako da morate dodati .disabledklasu kako bi vizualno izgledala onemogućeno.
  • Uključeni su neki stilovi prilagođeni budućnosti kako bi se onemogućili svi pointer-eventsgumbi sidra.
  • Onemogućeni gumbi trebali bi uključivati aria-disabled="true"​​atribut za označavanje stanja elementa pomoćnim tehnologijama.
<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>

Klasa .disabledkoristi pointer-events: noneza pokušaj onemogućavanja funkcije povezivanja <a>s, ali to CSS svojstvo još nije standardizirano. Osim toga, čak i u preglednicima koji podržavaju pointer-events: none, navigacija tipkovnicom ostaje nepromijenjena, što znači da će korisnici tipkovnice koji vide i korisnici pomoćnih tehnologija i dalje moći aktivirati ove veze. Da biste bili sigurni, uz aria-disabled="true", uključite i tabindex="-1"atribut na ove veze kako biste spriječili primanje fokusa tipkovnice i upotrijebite prilagođeni JavaScript da biste u potpunosti onemogućili njihovu funkcionalnost.

Gumbi za blokiranje

Stvorite hrpe responzivnih "blok gumba" pune širine poput onih u Bootstrapu 4 s kombinacijom naših uslužnih programa za prikaz i praznine. Korištenjem uslužnih programa umjesto klasa specifičnih za gumbe, imamo puno veću kontrolu nad razmakom, poravnanjem i odgovarajućim ponašanjem.

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

Ovdje stvaramo responzivnu varijaciju, počevši s okomito naslaganim gumbima do mdprijelomne točke, gdje .d-md-blockzamjenjuje .d-gridklasu, čime se poništava gap-2uslužni program. Promijenite veličinu preglednika da vidite kako se mijenjaju.

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

Možete podesiti širinu svojih blok gumba s klasama širine stupca mreže. Na primjer, za "gumb za blokiranje" poluširine koristite .col-6. Centrirajte ga i vodoravno pomoću .mx-auto.

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

Dodatni uslužni programi mogu se koristiti za podešavanje vodoravnog poravnanja tipki. Ovdje smo uzeli naš prethodni responzivni primjer i dodali neke uslužne programe za savijanje i uslužni program za margine na gumbu za desno poravnanje gumba kada više nisu složeni.

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

Dodatak gumba

Dodatak gumba omogućuje vam stvaranje jednostavnih gumba za uključivanje/isključivanje.

Vizualno, ovi gumbi za prebacivanje identični su gumbima za uključivanje potvrdnih okvira . Međutim, pomoćne tehnologije ih prenose na drugačiji način: čitači zaslona najavit će prekidače potvrdnih okvira kao "potvrđene"/"nije označene" (budući da su, unatoč svom izgledu, u osnovi još uvijek potvrdni okviri), dok će ovi gumbi za prebacivanje biti najavljeni kao “gumb”/“gumb pritisnut”. Izbor između ova dva pristupa ovisit će o vrsti preklopnika koji stvarate i hoće li preklopnik imati smisla za korisnike kada se najavi kao potvrdni okvir ili kao stvarni gumb.

Prebaci stanja

Dodaj data-bs-toggle="button"za promjenu stanja gumba active. Ako prethodno aktivirate gumb, morate ručno dodati .activeklasu i aria-pressed="true" osigurati da se prenosi na odgovarajući način pomoćnim tehnologijama.

<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>
<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Metode

Instancu gumba možete stvoriti pomoću konstruktora gumba, na primjer:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
metoda Opis
toggle Prebacuje stanje guranja. Daje gumbu izgled da je aktiviran.
dispose Uništava gumb elementa. (Uklanja pohranjene podatke na DOM elementu)
getInstance Statička metoda koja vam omogućuje da dobijete instancu gumba pridruženu DOM elementu, možete je koristiti ovako:bootstrap.Button.getInstance(element)
getOrCreateInstance Statička metoda koja vraća instancu gumba pridruženu DOM elementu ili stvara novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako:bootstrap.Button.getOrCreateInstance(element)

Na primjer, za prebacivanje svih gumba

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

Sass

Varijable

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

Mixins

Postoje tri miksina za gumbe: miksina gumba i varijante obrisa gumba (oba temeljena na $theme-colors), plus miksin veličine gumba.

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

Petlje

Varijante gumba (za obične i okvirne gumbe) koriste svoje odgovarajuće miksine s našom $theme-colorskartom za generiranje klasa modifikatora u 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);
  }
}