Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
Check
in English

Gumbi

Uporabite Bootstrapove sloge gumbov po meri za dejanja v obrazcih, pogovornih oknih in več s podporo za več velikosti, stanj in več.

Na tej strani

Primeri

Bootstrap vključuje več vnaprej določenih slogov gumbov, od katerih vsak služi svojemu semantičnemu namenu, z nekaj dodatki, dodanimi za večji nadzor.

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>
Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.

Onemogoči prelom besedila

Če ne želite, da se besedilo gumba prelomi, lahko .text-nowrapgumbu dodate razred. V Sassu lahko nastavite, $btn-white-space: nowrapda onemogočite prelom besedila za vsak gumb.

Oznake gumbov

Razredi .btnso zasnovani za uporabo z <button>elementom. Vendar pa lahko te razrede uporabite tudi na <a>ali <input>elementih (čeprav lahko nekateri brskalniki uporabijo nekoliko drugačno upodabljanje).

Pri uporabi razredov gumbov na <a>elementih, ki se uporabljajo za sprožitev funkcionalnosti na strani (na primer strnjevanje vsebine), namesto povezovanja do novih strani ali odsekov znotraj trenutne strani, je treba tem povezavam dodeliti, role="button"da ustrezno posredujejo svoj namen podpornim tehnologijam, kot je npr. bralniki zaslona.

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

Orisni gumbi

Potrebujete gumb, vendar ne zajetnih barv ozadja, ki jih prinašajo? Zamenjajte privzete razrede modifikatorjev s .btn-outline-*tistimi, ki odstranijo vse slike ozadja in barve na katerem koli 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>
Nekateri slogi gumbov uporabljajo razmeroma svetlo barvo ospredja in jih je treba uporabljati le na temnem ozadju, da se zagotovi zadosten kontrast.

Velikosti

Ste všeč večji ali manjši gumbi? Dodajte .btn-lgali .btn-smza dodatne velikosti.

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>

S spremenljivkami CSS lahko celo določite svojo velikost po meri:

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>

Onemogočeno stanje

Naj bodo gumbi videti neaktivni, tako da kateremu koli elementu dodate disabledlogični atribut . <button>Onemogočeni gumbi so bili pointer-events: noneuporabljeni za in preprečujejo sprožitev lebdenja in aktivnih stanj.

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>

Onemogočeni gumbi, ki uporabljajo <a>element, se obnašajo nekoliko drugače:

  • <a>s ne podpirajo disabledatributa, zato morate dodati .disabledrazred, da bo vizualno videti onemogočen.
  • Vključeni so nekateri slogi, prijazni do prihodnosti, da onemogočite vse pointer-eventssidrne gumbe.
  • Uporaba onemogočenih gumbov <a>mora vključevati aria-disabled="true"atribut za označevanje stanja elementa za podporne tehnologije.
  • Onemogočeni gumbi z uporabo <a> ne smejo vključevati hrefatributa.
Primarna povezava Povezava
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>

Za pokrivanje primerov, ko morate obdržati hrefatribut na onemogočeni povezavi, .disabledrazred uporablja pointer-events: noneza poskus onemogočanja funkcije povezave <a>s. Upoštevajte, da ta lastnost CSS še ni standardizirana za HTML, vendar jo podpirajo vsi sodobni brskalniki. Poleg tega tudi v brskalnikih, ki podpirajo pointer-events: none, navigacija s tipkovnico ostane nespremenjena, kar pomeni, da bodo lahko videči uporabniki tipkovnice in uporabniki podpornih tehnologij še vedno aktivirali te povezave. Da bi bili varni, v te povezave aria-disabled="true"vključite tudi tabindex="-1"atribut, da preprečite, da bi prejele fokus s tipkovnico, in uporabite JavaScript po meri, da v celoti onemogočite njihovo delovanje.

Primarna povezava Povezava
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>

Gumbi za blokiranje

Ustvarite odzivne nize "blok gumbov" polne širine, kot so tisti v Bootstrap 4, z mešanico naših pripomočkov za prikaz in vrzeli. Z uporabo pripomočkov namesto razredov, specifičnih za gumbe, imamo veliko večji nadzor nad razmikom, poravnavo in odzivnim vedenjem.

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>

Tukaj ustvarimo odzivno variacijo, začenši z navpično zloženimi gumbi do mdprelomne točke, kjer .d-md-blocknadomesti .d-gridrazred in tako izniči gap-2pripomoček. Spremenite velikost brskalnika, da jih vidite.

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>

Širino gumbov bloka lahko prilagodite z razredi širine stolpca mreže. Na primer, za "gumb za blokiranje" polovične širine uporabite .col-6. Prav tako ga centrirajte vodoravno z .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>

Dodatne pripomočke je mogoče uporabiti za prilagoditev poravnave gumbov, ko so vodoravni. Tu smo vzeli naš prejšnji odzivni primer in dodali nekaj pripomočkov za upogibanje in pripomoček za rob na gumbu za desno poravnavo gumbov, ko niso več zloženi.

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>

Vtičnik za gumbe

Vtičnik gumbov vam omogoča ustvarjanje preprostih preklopnih gumbov za vklop/izklop.

Vizualno so ti preklopni gumbi enaki preklopnim gumbom potrditvenega polja . Vendar jih podporne tehnologije posredujejo drugače: bralniki zaslona bodo preklopne gumbe označili kot »potrjeno«/»ni označeno« (ker so kljub videzu v osnovi še vedno potrditvena polja), medtem ko bodo ti preklopni gumbi označeni kot “gumb”/“gumb pritisnjen”. Izbira med tema dvema pristopoma bo odvisna od vrste preklopa, ki ga ustvarjate, in od tega, ali bo preklop uporabnikom smiseln, ko bo najavljen kot potrditveno polje ali kot dejanski gumb.

Preklopi stanja

Dodaj data-bs-toggle="button"za preklop stanja gumba active. Če gumb vnaprej preklopite, morate .activerazred dodati ročno in aria-pressed="true" zagotoviti, da je ustrezno posredovan podpornim tehnologijam.

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>
Preklopi povezavo Aktivna preklopna povezava Onemogočena preklopna povezava
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

Primerek gumba lahko ustvarite s konstruktorjem gumba, na primer:

const bsButton = new bootstrap.Button('#myButton')
Metoda Opis
dispose Uniči gumb elementa. (Odstrani shranjene podatke v elementu DOM)
getInstance Statično metodo, ki vam omogoča pridobitev primerka gumba, povezanega z elementom DOM, jo lahko uporabite takole: bootstrap.Button.getInstance(element).
getOrCreateInstance Statična metoda, ki vrne primerek gumba, povezanega z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole: bootstrap.Button.getOrCreateInstance(element).
toggle Preklopi potisno stanje. Gumb daje videz, kot da je bil aktiviran.

Na primer, za preklop vseh gumbov

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

CSS

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS gumbi zdaj uporabljajo lokalne spremenljivke CSS .btnza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

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

Vsak .btn-*modifikatorski razred posodobi ustrezne spremenljivke CSS, da minimizira dodatna pravila CSS z našimi button-variant(), button-outline-variant()in button-size()mešanicami.

Tukaj je primer gradnje .btn-*razreda modifikatorjev po meri, kot to počnemo za gumbe, ki so edinstveni za naše dokumente, s prerazporeditvijo spremenljivk CSS Bootstrapa z mešanico naših lastnih spremenljivk CSS in 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%)};
}

Sass spremenljivke

$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 mešanice

Obstajajo trije miksini za gumbe: miksini gumba in različice orisa gumba (oba temeljita na $theme-colors), plus mešalnik velikosti 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)
) {
  --#{$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 zanke

Različice gumbov (za navadne in orisne gumbe) uporabljajo svoje ustrezne mešanice z našim $theme-colorszemljevidom za ustvarjanje modifikatorskih razredov v 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);
  }
}