guziki

Używaj niestandardowych stylów przycisków Bootstrap do działań w formularzach, oknach dialogowych i nie tylko z obsługą wielu rozmiarów, stanów i nie tylko.

Na tej stronie

Przykłady

Bootstrap zawiera kilka predefiniowanych stylów przycisków, z których każdy służy swojemu własnemu celowi semantycznemu, z kilkoma dodatkami dla większej kontroli.

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

Nadawanie znaczenia technologiom wspomagającym

Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w alternatywnych środkach, takich jak dodatkowy tekst ukryty z .visually-hiddenklasą.

Wyłącz zawijanie tekstu

Jeśli nie chcesz, aby tekst przycisku zawijał się, możesz dodać .text-nowrapklasę do przycisku. W Sass możesz ustawić $btn-white-space: nowrapwyłączenie zawijania tekstu dla każdego przycisku.

Tagi przycisków

Klasy .btnsą przeznaczone do użycia z <button>elementem. Możesz jednak również użyć tych klas na elementach <a>lub <input>(chociaż niektóre przeglądarki mogą stosować nieco inne renderowanie).

W przypadku używania klas przycisków w <a>elementach, które są używane do uruchamiania funkcji na stronie (takich jak zwijanie treści), zamiast tworzenia linków do nowych stron lub sekcji na bieżącej stronie, te linki powinny mieć oznaczenie, role="button"aby odpowiednio przekazać ich cel technologiom pomocniczym, takim jak czytniki ekranu.

Połączyć

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

Przyciski konspektu

Potrzebujesz przycisku, ale nie mocnych kolorów tła, które przynoszą? Zastąp domyślne klasy modyfikatorów .btn-outline-*tymi, które usuwają wszystkie obrazy tła i kolory z dowolnego przycisku.

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

Niektóre style przycisków używają stosunkowo jasnego koloru pierwszego planu i powinny być używane tylko na ciemnym tle, aby zapewnić wystarczający kontrast.

Rozmiary

Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-lglub .btn-smdla dodatkowych rozmiarów.

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

Stan niepełnosprawny

Spraw, aby przyciski wyglądały na nieaktywne, dodając disabledatrybut logiczny do dowolnego <button>elementu. Wyłączone przyciski zostały pointer-events: nonezastosowane, zapobiegając aktywowaniu najechania i aktywnych stanów.

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

Wyłączone przyciski korzystające z <a>elementu zachowują się nieco inaczej:

<a>s nie obsługują disabledatrybutu, więc musisz dodać .disabledklasę, aby wizualnie wyglądała na wyłączona.
Dołączone są pewne przyszłe style, które wyłączają wszystkie pointer-eventsprzyciski zakotwiczenia.
Wyłączone przyciski powinny zawierać aria-disabled="true"atrybut wskazujący stan elementu dla technologii pomocniczych.

Główny link Połączyć

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

Zastrzeżenie dotyczące funkcjonalności łącza

Klasa .disabledużywa pointer-events: none, aby spróbować wyłączyć funkcjonalność łącza <a>s, ale ta właściwość CSS nie jest jeszcze ustandaryzowana. Ponadto nawet w przeglądarkach, które obsługują pointer-events: none, nawigacja za pomocą klawiatury pozostaje nienaruszona, co oznacza, że widzący użytkownicy klawiatury i użytkownicy technologii wspomagających nadal będą mogli aktywować te linki. Aby być bezpiecznym, oprócz aria-disabled="true", dołącz także tabindex="-1"atrybut do tych linków, aby uniemożliwić im odbieranie fokusu z klawiatury, i użyj niestandardowego JavaScript, aby całkowicie wyłączyć ich funkcjonalność.

Blokuj przyciski

Twórz responsywne stosy „przycisków blokowych” o pełnej szerokości, takich jak te w Bootstrap 4, dzięki połączeniu naszych narzędzi do wyświetlania i przerw. Używając narzędzi zamiast klas specyficznych dla przycisków, mamy znacznie większą kontrolę nad odstępami, wyrównaniem i zachowaniami responsywnymi.

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

Tutaj tworzymy responsywną odmianę, zaczynając od pionowo ułożonych przycisków, aż do mdpunktu przerwania, gdzie .d-md-blockzastępuje .d-gridklasę, tym samym unieważniając gap-2użyteczność. Zmień rozmiar przeglądarki, aby zobaczyć, jak się zmieniają.

<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żesz dostosować szerokość przycisków blokowych za pomocą klas szerokości kolumn siatki. Na przykład w przypadku „przycisku blokującego” o połowie szerokości użyj .col-6. Wyśrodkuj go również poziomo .mx-autoza pomocą .

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

Dodatkowe narzędzia mogą być użyte do dostosowania wyrównania przycisków w pozycji poziomej. W tym miejscu wzięliśmy nasz poprzedni przykład responsywny i dodaliśmy kilka narzędzi flex i narzędzie marginesów na przycisku, aby wyrównać przyciski do prawej, gdy nie są już ułożone w stos.

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

Wtyczka przycisku

Wtyczka przycisków umożliwia tworzenie prostych przycisków włączania/wyłączania.

Wizualnie te przyciski przełączania są identyczne z przyciskami przełączania pól wyboru . Jednak są one inaczej przekazywane przez technologie wspomagające: przełączniki pól wyboru będą ogłaszane przez czytniki ekranu jako „zaznaczone”/„niezaznaczone” (ponieważ pomimo ich wyglądu zasadniczo nadal są to pola wyboru), podczas gdy te przyciski przełączania będą ogłaszane jako „przycisk”/„przycisk wciśnięty”. Wybór między tymi dwoma podejściami będzie zależał od typu tworzonego przełącznika oraz od tego, czy przełącznik będzie miał sens dla użytkowników, gdy zostanie ogłoszony jako pole wyboru lub jako rzeczywisty przycisk.

Przełącz stany

Dodaj data-bs-toggle="button", aby przełączyć activestan przycisku. Jeśli wstępnie przełączasz przycisk, musisz ręcznie dodać .activeklasę i aria-pressed="true" upewnić się, że jest ona odpowiednio przekazywana do technologii wspomagających.

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

Przełącz link Aktywny link przełączania Wyłączone łącze przełączania

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

Metody

Możesz utworzyć instancję przycisku za pomocą konstruktora przycisku, na przykład:

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

metoda	Opis
`toggle`	Przełącza stan wypychania. Nadaje przyciskowi wygląd, w którym został aktywowany.
`dispose`	Niszczy przycisk elementu. (Usuwa dane zapisane w elemencie DOM)
`getInstance`	Metoda statyczna, która pozwala uzyskać instancję przycisku skojarzoną z elementem DOM, możesz jej użyć w następujący sposób:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Metoda statyczna, która zwraca instancję przycisku skojarzoną z elementem DOM lub tworzy nowy w przypadku, gdy nie został zainicjowany. Możesz go użyć w ten sposób:`bootstrap.Button.getOrCreateInstance(element)`

Na przykład, aby przełączyć wszystkie przyciski

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

Sass

Zmienne

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

Mieszanki

Istnieją trzy mixiny dla przycisków: mixiny z wariantem przycisku i konturu przycisku (oba oparte na $theme-colors), plus mixin rozmiaru przycisku.

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

Pętle

Warianty przycisków (dla przycisków zwykłych i konturowych) wykorzystują odpowiednie domieszki z naszą $theme-colorsmapą do generowania klas modyfikatorów w 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);
  }
}