Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
in English

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.

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

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.

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

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żesz nawet ustawić własny niestandardowy rozmiar za pomocą zmiennych CSS:

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>

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.

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>

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ą niektóre przyjazne dla przyszłości style, aby wyłączyć wszystkie pointer-eventsprzyciski zakotwiczenia.
  • Używanie wyłączonych przycisków <a>powinno zawierać aria-disabled="true"atrybut wskazujący stan elementu dla technologii pomocniczych.
  • Używanie wyłączonych przycisków <a> nie powinno zawierać hrefatrybutu.
Główny link Połączyć
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>

Aby uwzględnić przypadki, w których musisz zachować hrefatrybut na wyłączonym łączu, .disabledklasa używa pointer-events: none, aby spróbować wyłączyć funkcjonalność łącza <a>s. Zauważ, że ta właściwość CSS nie jest jeszcze ustandaryzowana dla HTML, ale wszystkie nowoczesne przeglądarki ją obsługują. 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 również 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ść.

Główny link Połączyć
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>

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.

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>

Tutaj tworzymy responsywną odmianę, zaczynając od pionowo ułożonych przycisków, aż do mdpunktu przerwania, w którym .d-md-blockzastępuje .d-gridklasę, unieważniając w ten sposób gap-2narzędzie. Zmień rozmiar przeglądarki, aby zobaczyć, jak się zmieniają.

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

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>

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.

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>

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.

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>
Przełącz link Aktywny link przełączania Wyłączone łącze przełączania
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>

Metody

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

const bsButton = new bootstrap.Button('#myButton')
metoda Opis
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ć tak: bootstrap.Button.getOrCreateInstance(element).
toggle Przełącza stan wypychania. Nadaje przyciskowi wygląd, w którym został aktywowany.

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

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

CSS

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, przyciski używają teraz lokalnych zmiennych CSS w .btncelu udoskonalenia dostosowywania w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

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

Każda .btn-*klasa modyfikatora aktualizuje odpowiednie zmienne CSS, aby zminimalizować dodatkowe reguły CSS za pomocą naszych domieszek button-variant(), button-outline-variant()i .button-size()

Oto przykład budowania niestandardowej .btn-*klasy modyfikatora, tak jak robimy to dla przycisków unikalnych dla naszych dokumentów, poprzez ponowne przypisanie zmiennych CSS Bootstrap za pomocą mieszanki naszych własnych zmiennych CSS i 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%)};
}

Zmienne Sassa

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

Mieszanki Sass

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

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