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ą wyglądać na wciśnięte (z ciemniejszym tłem, ciemniejszym obramowaniem i cieniem), gdy są aktywne. 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ą niektóre przyjazne dla przyszłości style, aby wyłączyć wszystkie pointer-eventsprzyciski zakotwiczenia. W przeglądarkach obsługujących tę właściwość w ogóle nie zobaczysz wyłączonego kursora.
• Wyłączone przyciski powinny zawierać aria-disabled="true"atrybut wskazujący stan elementu dla technologii pomocniczych.

<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. Zwróć uwagę, że możesz tworzyć pojedyncze przyciski zasilane wejściem 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