Lista rozwijanych Bootstrap
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 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>
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.
Klasa .carettworzy ikonę strzałki w kształcie karetki (), co oznacza, że przycisk jest listą rozwijaną.
Dodaj .dropdown-menuklasę do <ul>elementu, aby faktycznie zbudować menu rozwijane.
Rozdzielacz rozwijany
Klasa .dividersłuży do oddzielania linków w rozwijanym menu cienką poziomą ramką:
Przykład
<li class="divider"></li>
Nagłówek rozwijany
Klasa .dropdown-headersłuży do dodawania nagłówków w rozwijanym menu:
Przykład
<li class="dropdown-header">Dropdown header 1</li>
Elementy wyłączone i aktywne
Podświetl określony element listy rozwijanej klasą .active (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
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Pozycja rozwijana
Aby wyrównać menu rozwijane do prawej, dodaj .dropdown-menu-rightklasę do elementu za pomocą .dropdown-menu:
Przykład
<ul 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">
Dostępność rozwijana
Aby poprawić dostępność dla osób korzystających z czytników ekranu , podczas tworzenia menu rozwijanego należy uwzględnić następujące elementy rolei atrybuty:aria-*
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>
Kompletna lista rozwijana Bootstrap
Aby uzyskać pełne informacje na temat wszystkich opcji, metod i zdarzeń rozwijanych, przejdź do naszego podręcznika Bootstrap JS Dropdown Reference .