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.
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 inny sposób, np. dodatkowy tekst ukryty z .sr-only
klasą.
Klasy .btn
są 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">
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>
Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-lg
lub .btn-sm
dla 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>
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>
Spraw, aby przyciski wyglądały na nieaktywne, dodając disabled
atrybut 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ądisabled
atrybutu, więc musisz dodać.disabled
klasę, aby wizualnie wyglądała na wyłączona.- Dołączone są niektóre przyjazne dla przyszłości style, aby wyłączyć wszystkie
pointer-events
przyciski 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>
Zastrzeżenie dotyczące funkcjonalności łącza
Klasa .disabled
uż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, dodaj tabindex="-1"
atrybut do tych linków (aby uniemożliwić im odbieranie fokusu klawiatury) i użyj niestandardowego JavaScript, aby wyłączyć ich funkcjonalność.
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.
Dodaj data-toggle="button"
, aby przełączyć active
stan przycisku. Jeśli wstępnie przełączasz przycisk, musisz ręcznie dodać .active
klasę i aria-pressed="true"
do <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
Style Bootstrap .button
mogą 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-group
zawierającego te zmodyfikowane przyciski, aby umożliwić ich przełączanie za pomocą JavaScript i dodaj .btn-group-toggle
styl <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 click
zdarzenie 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 — checked
musisz włączyć .active
tę metodę <label>
ręcznie.
Zauważ, że wstępnie zaznaczone przyciski wymagają ręcznego dodania .active
klasy do danych wejściowych <label>
.
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> 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" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
metoda | Opis |
---|---|
$().button('toggle') |
Przełącza stan wypychania. Nadaje przyciskowi wygląd, w którym został aktywowany. |
$().button('dispose') |
Niszczy przycisk elementu. |