Bootstrap 4 guziki
Style przycisków
Bootstrap 4 zapewnia różne style przycisków:
Przykład
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Klasy przycisków mogą być używane na elementach <a>, <button>lub
:<input>
Przykład
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Dlaczego umieszczamy # w atrybucie href linku?
Ponieważ nie mamy żadnej strony, do której można by to powiązać, a nie chcemy otrzymywać komunikatu „404”, jako link wstawiamy #. W prawdziwym życiu powinien to być oczywiście prawdziwy adres URL do strony „Szukaj”.
Zarys przycisku
Bootstrap 4 zapewnia osiem przycisków z obramowaniem/obramowaniem:
Przykład
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Rozmiary przycisków
Użyj .btn-lgklasy dla dużych przycisków lub .btn-smklasy dla małych przycisków:
Przykład
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Przyciski poziomu bloku
Dodaj klasę .btn-block, aby utworzyć przycisk na poziomie bloku, który obejmuje całą szerokość elementu nadrzędnego.
Przykład
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Przyciski aktywne/wyłączone
Przycisk może być ustawiony w stan aktywny (pozorny wciśnięty) lub wyłączony (niemożliwy do kliknięcia):
Klasa .activesprawia, że przycisk wydaje się być wciśnięty, a disabledatrybut sprawia, że nie można go kliknąć. Należy zauważyć, że elementy <a> nie obsługują atrybutu wyłączonego i dlatego muszą używać .disabledklasy, aby wizualnie wyglądał na wyłączony.
Przykład
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Przyciski obrotowe
Możesz również dodać "spinners" do przycisku, o którym dowiesz się więcej w naszym samouczku BS4 Spinners :
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>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>