Podstawowe rozwijane
Menu rozwijane jest toggleable menu, które pozwala użytkownikowi wybrać jedną wartość z ustalonej listy:
Przykład
<div class="dropdown">
<button class="btn btn-primary
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
Example
<span class="caret"></span></button>
<ul
class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div> Spróbuj sam " Przykład Poradnik
.dropdown Klasy wskazuje na menu rozwijane.
Aby otworzyć menu rozwijane, użyj przycisku lub łącza z klasy .dropdown-toggle i data-toggle="dropdown" atrybutu.
.caret Klasy tworzy daszek ikonę strzałki ( ) ( ) ( ) , Co oznacza, że przycisk jest rozwijana.
Dodaj .dropdown-menu klasę do <ul> elementu faktycznie zbudować menu rozwijanego.
Przegroda rozwijane
.divider Klasa służy do oddzielnych ogniw wewnątrz menu rozwijanego z cienkiej granicy poziomej:
rozwijane Header
.dropdown-header klasa służy do dodawania nagłówków wewnątrz menu rozwijanego:
Wyłącz swój produkt
Aby wyłączyć pozycję z rozwijanego menu, użyj .disabled klasę:
Pozycja rozwijane
Aby wyrównać do prawej rozwijaną, dodaj .dropdown-menu-right klasę do elementu z .dropdown-menu:
Dropup
Jeśli chcesz, aby rozwinąć menu rozwijane w górę a nie do końca, należy zmienić <div> elementu z class="dropdown" do "dropup" :
rozwijane Dostępność
Aby przyczynić się do poprawy dostępności dla osób korzystających z czytników ekranowych, powinien zawierać następujące role i aria-* atrybuty, podczas tworzenia menu rozwijanego:
Przykład
<div class="dropdown">
<button class="btn btn-default
dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu"
role="menu" aria-labelledby="menu1">
<li
role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li
role="presentation"><a role="menuitem" href="#">About
Us</a></li>
</ul>
</div> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Wypełnij Bootstrap rozwijane Reference
Pełną odniesienia wszystkich rozwijanych opcjach, metod i zdarzeń, przejdź do naszej Bootstrap JS rozwijane Reference .