Dugmad

Koristite Bootstrap-ove prilagođene stilove gumba za radnje u obrascima, dijalozima i još mnogo toga uz podršku za više veličina, stanja i još mnogo toga.

Na ovoj stranici

Primjeri

Bootstrap uključuje nekoliko unaprijed definiranih stilova gumba, od kojih svaki služi svojoj semantičkoj svrsi, s nekoliko dodataka 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 pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hiddenklasom.

Onemogući prelamanje teksta

Ako ne želite da se tekst dugmeta preklopi, možete dodati .text-nowrapklasu dugmetu. U Sass-u možete postaviti $btn-white-space: nowrapda onemogućite prelamanje teksta za svako dugme.

Oznake dugmadi

Klase .btnsu dizajnirane da se koriste sa <button>elementom. Međutim, možete koristiti i ove klase na elementima <a>ili <input>(iako neki pretraživači mogu primijeniti malo drugačije prikazivanje).

Kada koristite klase dugmadi na <a>elementima koji se koriste za aktiviranje funkcionalnosti unutar stranice (kao što je sažimanje sadržaja), umjesto povezivanja na nove stranice ili odjeljke unutar trenutne stranice, ovim vezama treba dati adekvatan naziv role="button"da na odgovarajući način prenesu svoju svrhu pomoćnim tehnologijama kao što su čitači ekrana.

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

Dugmad obrisa

Trebate dugme, ali ne i bogate boje pozadine 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 dugmadi koriste relativno svijetlu boju prednjeg plana i trebali bi se koristiti samo na tamnoj pozadini kako bi imali dovoljan kontrast.

Veličine

Želite veće ili manje dugmad? Dodati .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>

Disabled state

Neka gumbi izgledaju neaktivno dodavanjem disabledlogičkog atributa bilo kojem <button>elementu. Primijenjena su onemogućena dugmad pointer-events: none, koja sprječavaju pokretanje stanja 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 da bi se ona vizualno činila onemogućenom.
Neki stilovi prilagođeni budućnosti su uključeni kako biste onemogućili sve pointer-eventstipke za sidrenje.
Onemogućeni gumbi koji koriste <a>trebaju uključivati aria-disabled="true"atribut koji ukazuje na stanje elementa pomoćnim tehnologijama.
Onemogućeni gumbi koji koriste <a> ne bi trebali uključivati hrefatribut.

Primarna veza Veza

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

Upozorenje o funkcionalnosti veze

Da bi pokrili slučajeve u kojima morate zadržati hrefatribut na onemogućenoj vezi, .disabledklasa koristi pointer-events: noneda pokuša onemogućiti funkcionalnost veze <a>s. Imajte na umu da ovo CSS svojstvo još nije standardizirano za HTML, ali ga podržavaju svi moderni pretraživači. Osim toga, čak i u pretraživačima koji podržavaju pointer-events: nonenavigacija pomoću tastature ostaje nepromijenjena, što znači da će korisnici tastature koji vide i korisnici pomoćnih tehnologija i dalje moći aktivirati ove veze. Dakle, da biste bili sigurni, pored aria-disabled="true", uključite i tabindex="-1"atribut na ove veze kako biste spriječili da primaju fokus tastature i koristite prilagođeni JavaScript da biste potpuno onemogućili njihovu funkcionalnost.

Primarna veza Veza

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

Blokiraj dugmad

Kreirajte responzivne hrpe pune širine, „blokirajućih dugmadi“ poput onih u Bootstrap 4 pomoću mješavine naših uslužnih programa za prikaz i razmak. Koristeći uslužne programe umjesto klasa specifičnih za gumbe, imamo mnogo veću kontrolu nad razmakom, poravnanjem i odzivnim 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 kreiramo responzivnu varijaciju, počevši od okomito naslaganih dugmadi do mdtačke prekida, gdje .d-md-blockzamjenjuje .d-gridklasu, čime se poništava gap-2uslužni program. Promenite veličinu pretraživača da vidite kako se menjaju.

<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 dugmadi bloka pomoću klasa širine stupca mreže. Na primjer, za „dugme za blokiranje“ poluširine koristite .col-6. Centrirajte ga i horizontalno 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 se mogu koristiti za podešavanje poravnanja dugmadi kada su horizontalni. Ovdje smo uzeli naš prethodni primjer sa odzivom i dodali neke fleksibilne uslužne programe i marginu na dugme da bismo poravnali dugmad udesno kada više nisu naslagani.

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

Dodatak za dugme vam omogućava da kreirate jednostavne tastere za uključivanje/isključivanje.

Vizuelno, ova dugmad za preklapanje su identična dugmadima za izbor u polju za potvrdu . Međutim, pomoćne tehnologije ih prenose drugačije: preklopne okvire će čitači ekrana najaviti kao "potvrđene"/"nije označene" (budući da su, uprkos svom izgledu, oni u osnovi i dalje potvrdni okviri), dok će ovi prekidači biti najavljeni kao “dugme”/ “dugme pritisnuto”. Izbor između ova dva pristupa ovisit će o vrsti prekidača koji kreirate i da li će prekidač imati smisla za korisnike kada je najavljen kao okvir za potvrdu ili kao stvarno dugme.

Uključi države

Dodajte data-bs-toggle="button"da biste promijenili stanje gumba active. Ako prethodno uključujete dugme, morate ručno dodati .activeklasu i aria-pressed="true" osigurati da se ona na odgovarajući način prenese na pomoćne tehnologije.

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

Prebaci vezu Aktivna preklopna veza Onemogućena preklopna veza

<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

Možete kreirati instancu dugmeta pomoću konstruktora dugmeta, na primer:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Metoda	Opis
`toggle`	Uključuje push stanje. Daje dugmetu izgled da je aktivirano.
`dispose`	Uništava dugme elementa. (Uklanja pohranjene podatke na DOM elementu)
`getInstance`	Statička metoda koja vam omogućava da dobijete instancu dugmeta 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 kreira novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako:`bootstrap.Button.getOrCreateInstance(element)`

Na primjer, za prebacivanje svih dugmadi

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 dugmad: miksine varijante dugmeta i obrisa dugmeta (oba zasnovana na $theme-colors), plus miksin veličine dugmeta.

@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 dugmadi (za obične i obrisne dugmad) koriste svoje odgovarajuće mešavine sa našom $theme-colorsmapom za generisanje 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);
  }
}