Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

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.

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>
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čiji prikaz).

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

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.

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

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>

Možete čak i napraviti vlastitu prilagođenu veličinu s CSS varijablama:

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>

Disabled state

Učinite da dugmad izgledaju neaktivno dodavanjem disabledlogičkog atributa bilo kojem <button>elementu. Onemogućena dugmad su pointer-events: noneprimijenjena na, sprječavajući pokretanje stanja lebdenja i aktivnih stanja.

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>

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 izgledala kao da je ona vizuelno onemogućena.
  • 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 označava stanje elementa pomoćnim tehnologijama.
  • Onemogućeni gumbi koji koriste <a> ne bi trebali uključivati href​​atribut.
Primarna veza Veza
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>

Da pokrije 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 standardizovano 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
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>

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.

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>

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.

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>

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.

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>

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 pomoćni program za marginu na gumbu za desno poravnanje dugmadi kada više nisu naslagani.

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>

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

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>
Prebaci vezu Aktivna preklopna veza Onemogućena preklopna veza
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

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

const bsButton = new bootstrap.Button('#myButton')
Metoda Opis
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).
toggle Uključuje push stanje. Daje dugmetu izgled da je aktivirano.

Na primjer, za prebacivanje svih dugmadi

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

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, gumbi sada koriste lokalne CSS varijable uključene .btnza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

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

Svaka .btn-*klasa modifikatora ažurira odgovarajuće CSS varijable kako bi minimizirala dodatna CSS pravila s našim button-variant(), button-outline-variant(), i button-size()miksinama.

Evo primjera izgradnje prilagođene .btn-*klase modifikatora kao što radimo za dugmad jedinstvene za naše dokumente tako što smo ponovno dodijelili Bootstrap-ove CSS varijable s mješavinom naših vlastitih CSS i Sass varijabli.

.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%)};
}

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

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

Varijante dugmeta (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} {
    @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);
  }
}