Przyciski Bootstrap 5

Styl przycisku

Bootstrap 5 oferuje różne style przycisków:

Przykład

<button type="button" class="btn">Podstawowy</button>
<button type="button" class="btn btn-primary">Główny</button>
<button type="button" class="btn btn-secondary">Drugi plan</button>
<button type="button" class="btn btn-success">Sukces</button>
<button type="button" class="btn btn-info">Informacja</button>
<button type="button" class="btn btn-warning">Ostrzeżenie</button>
<button type="button" class="btn btn-danger">Niebezpieczny</button>
<button type="button" class="btn btn-dark">Ciemny</button>
<button type="button" class="btn btn-light">Jasny</button>
<button type="button" class="btn btn-link">Link</button>

Spróbuj sam

Klasa przycisków może być używana do <a>,<button> lub <input> Element:

Przykład

<a href="#" class="btn btn-success">Przycisk linku</a>
<button type="button" class="btn btn-success">Przycisk</button>
<input type="button" class="btn btn-success" value="Przycisk wejścia">
<input type="submit" class="btn btn-success" value="Przycisk wysyłania">
<input type="reset" class="btn btn-success" value="Przycisk reset">

Spróbuj sam

Dlaczego piszemy # w atrybucie href linku?

Ponieważ nie mamy żadnej strony do połączenia i nie chcemy otrzymać komunikatu "404", używamy # jako linku. W rzeczywistości, powinien to być prawdziwy URL strony "szukaj".

Kontury przycisków

Bootstrap 5 oferuje również osiem przycisków konturów/ram

Przesuń mysz nad nimi, aby zobaczyć dodatkowe efekty "hover":

Przykład

<button type="button" class="btn btn-outline-primary">główny</button>
<button type="button" class="btn btn-outline-secondary">drugorzędny</button>
<button type="button" class="btn btn-outline-success"> sukces</button>
<button type="button" class="btn btn-outline-info">informacja</button>
<button type="button" class="btn btn-outline-warning">ostrzeżenie</button>
<button type="button" class="btn btn-outline-danger">niebezpieczny</button>
<button type="button" class="btn btn-outline-dark">ciemny</button>
<button type="button" class="btn btn-outline-light text-dark">jasny</button>

Spróbuj sam

Rozmiar przycisków

dla dużych przycisków .btn-lg klasa, używana dla małych przycisków .btn-sm klasa:

Przykład

<button type="button" class="btn btn-primary btn-lg">duży</button>
<button type="button" class="btn btn-primary">domyślny</button>
<button type="button" class="btn btn-primary btn-sm">mały</button>

Spróbuj sam

Przycisk blokowy

Aby utworzyć przycisk blokowy rozciągający się na całą szerokość elementu nadrzędnego, użyj na elemencie nadrzędnym: .d-grid "helper" klasa:

Przykład

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Przycisk pełnej szerokości</button>
</div>

Spróbuj sam

Jeśli masz wiele blokowych przycisków, możesz użyć .gap-* Klasa kontroluje przestrzeń między nimi:

Przykład

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Przycisk pełnej szerokości</button>
  <button type="button" class="btn btn-primary btn-block">Przycisk pełnej szerokości</button>
  <button type="button" class="btn btn-primary btn-block">Przycisk pełnej szerokości</button>
</div>

Spróbuj sam

Przyciski aktywne/wyłączone

Przyciski mogą być ustawione na stan aktywny (wyświetlony jako naciśnięty) lub wyłączony (nieaktywny):

klasa .active aby wyświetlić przycisk jako naciśnięty, a disabled Atrybut sprawia, że przycisk jest nieaktywny. Proszę zauważyć, że element <a> nie obsługuje atrybutu disabled, więc należy użyć .disabled Klasa sprawia, że przycisk wyświetla się jako wyłączony wizualnie.

Przykład

<button type="button" class="btn btn-primary active">Podstawowy aktywny</button>
<button type="button" class="btn btn-primary" disabled>Podstawowy wyłączony</button>
<a href="#" class="btn btn-primary disabled">Link wyłączony</a>

Spróbuj sam

Przyciski ładujące

Możesz również dodać "spinner" do przycisku, więcej dowiesz się z naszej lekcji BS5 Spinner:

Przykład

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Ładowanie...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Ładowanie...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Ładowanie...
</button>

Spróbuj sam