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.

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>

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.

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

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>

Utwórz przyciski na poziomie bloku — te, które obejmują całą szerokość elementu nadrzędnego — dodając .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Stan aktywny

Przyciski będą wciśnięte, gdy są aktywne z ciemniejszym tłem, ciemniejszym obramowaniem i, gdy włączone są cienie, z cieniem wstawkowym. Nie ma potrzeby dodawania klasy do <button>s, ponieważ używają pseudo-klasy . Jednak nadal możesz wymusić ten sam aktywny wygląd za pomocą .active(i dołączyć aria-pressed=“true”atrybut), jeśli musisz programowo zreplikować stan.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Stan niepełnosprawny

Spraw, aby przyciski wyglądały na nieaktywne, dodając disabledatrybut logiczny do dowolnego <button>elementu.

<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. W przeglądarkach obsługujących tę właściwość w ogóle nie zobaczysz wyłączonego kursora.
• 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.

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

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

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

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

Wtyczka przycisku

Zrób więcej za pomocą przycisków. Kontroluj stany przycisków lub twórz grupy przycisków dla większej liczby komponentów, takich jak paski narzędzi.

Przełącz stany

Dodaj data-toggle="button", aby przełączyć activestan przycisku. Jeśli wstępnie przełączasz przycisk, musisz ręcznie dodać .activeklasę i aria-pressed="true" do <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Pole wyboru i przyciski opcji

Style Bootstrap .buttonmogą być stosowane do innych elementów, takich jak <label>s, aby zapewnić przełączanie stylu pola wyboru lub przycisku radiowego. Dodaj data-toggle="buttons"do .btn-groupzawierającego te zmodyfikowane przyciski, aby umożliwić ich przełączanie za pomocą JavaScript i dodaj .btn-group-togglestyl <input>w swoich przyciskach. Pamiętaj, że możesz tworzyć pojedyncze przyciski zasilane z wejścia lub ich grupy.

Stan zaznaczenia tych przycisków jest aktualizowany tylko przez clickzdarzenie na przycisku. Jeśli używasz innej metody do aktualizacji danych wejściowych — np. za pomocą <input type="reset">lub ręcznie stosując właściwość danych wejściowych — checkedmusisz włączyć .activetę metodę <label>ręcznie.

Zauważ, że wstępnie zaznaczone przyciski wymagają ręcznego dodania .activeklasy do danych wejściowych <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Metody