Bootstrap 4 Dropdowns
Podstawowe menu rozwijane
Rozwijane menu to przełączalne menu, które pozwala użytkownikowi wybrać jedną wartość z predefiniowanej listy:
Przykład
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Przykład wyjaśniony
Klasa .dropdownwskazuje menu rozwijane.
Aby otworzyć menu rozwijane, użyj przycisku lub linku z klasą .dropdown-togglei
data-toggle="dropdown"atrybutem.
Dodaj .dropdown-menuklasę do <div>elementu, aby faktycznie zbudować menu rozwijane. Następnie dodaj
.dropdown-itemklasę do każdego elementu (linków lub przycisków) w menu rozwijanym.
Rozdzielacz rozwijany
Klasa .dropdown-dividersłuży do oddzielania linków w rozwijanym menu cienką poziomą ramką:
Przykład
<div class="dropdown-divider"></div>
Nagłówek rozwijany
Klasa .dropdown-headersłuży do dodawania nagłówków w rozwijanym menu:
Przykład
<div class="dropdown-header">Dropdown header 1</div>
Elementy wyłączone i aktywne
Podświetl określony element listy rozwijanej .activeklasą (dodaje niebieski kolor tła).
Aby wyłączyć element w menu rozwijanym, użyj .disabledklasy (otrzymuje jasnoszary kolor tekstu i ikonę „znak zakazu parkowania” po najechaniu):
Przykład
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Pozycja rozwijana
Możesz również utworzyć menu „dropright” lub „dropleft”, dodając klasę .droprightlub .dropleftdo elementu rozwijanego. Zwróć uwagę, że karetka/strzałka jest dodawana automatycznie:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Rozwijane menu w prawo
Aby wyrównać menu rozwijane do prawej, dodaj .dropdown-menu-rightklasę do elementu za pomocą .dropdown-menu:
Przykład
<div class="dropdown-menu dropdown-menu-right">
Dropup
Jeśli chcesz, aby menu rozwijane rozwijało się w górę zamiast w dół, zmień element <div> z class="dropdown" na "dropup":
Przykład
<div class="dropup">
Tekst rozwijany
Klasa .dropdown-item-textsłuży do dodawania zwykłego tekstu do elementu rozwijanego lub jest używana w linkach do domyślnego stylu linków.
Przykład
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Zgrupowane przyciski z rozwijanym menu
Przykład
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Podział przycisków rozwijanych
Przykład
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Pionowa grupa przycisków z rozwijanym menu
Przykład
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Kompletna lista rozwijana Bootstrap 4
Aby uzyskać pełne informacje na temat wszystkich opcji rozwijanych, metod i zdarzeń, przejdź do naszego podręcznika Bootstrap 4 JS Dropdown Reference .