Bootstrap rozevírací seznamy

Základní rozbalovací nabídka

Rozbalovací nabídka je přepínatelná nabídka, která umožňuje uživateli vybrat jednu hodnotu z předdefinovaného seznamu:

Příklad vysvětlen

Třída .dropdownoznačuje rozevírací nabídku.

Chcete-li otevřít rozevírací nabídku, použijte tlačítko nebo odkaz s třídou .dropdown-togglea data-toggle="dropdown"atributem.

Třída .caretvytvoří ikonu šipky stříšky (), což znamená, že tlačítko je rozevírací seznam.

Přidejte .dropdown-menutřídu do <ul>prvku, abyste skutečně vytvořili rozevírací nabídku.

Rozbalovací oddělovač

Třída .dividerse používá k oddělení odkazů uvnitř rozbalovací nabídky tenkým vodorovným okrajem:

Rozbalovací záhlaví

Třída .dropdown-headerse používá k přidání záhlaví do rozbalovací nabídky:

Zakázat a Aktivní položky

Zvýrazněte konkrétní rozevírací položku pomocí třídy .active (přidá modrou barvu pozadí).

Chcete-li zakázat položku v rozevírací nabídce, použijte .disabledtřídu (při umístění kurzoru získá světle šedou barvu textu a ikonu „zákaz parkování“):

Rozbalovací pozice

Chcete-li rozbalovací nabídku zarovnat doprava, přidejte .dropdown-menu-righttřídu do prvku pomocí rozbalovací nabídky:

Dropup

Pokud chcete, aby se rozbalovací nabídka rozbalovala nahoru místo dolů, změňte prvek <div> pomocí class="dropdown" na "dropup":

Rozbalovací nabídka Přístupnost

Chcete-li zlepšit přístupnost pro uživatele, kteří používají čtečky obrazovky, měli byste při vytváření rozevírací nabídky zahrnout následující položky rolea aria-*atributy:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Kompletní rozbalovací nabídka Bootstrap

Úplnou referenci o všech rozevíracích možnostech, metodách a událostech naleznete v našem rozbalovacím seznamu Bootstrap JS .