Bootstrap 4 rozevírací nabídky
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
<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>
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.
Přidejte .dropdown-menutřídu do <div>prvku, abyste skutečně vytvořili rozevírací nabídku. Poté přidejte
.dropdown-itemtřídu ke každému prvku (odkazy nebo tlačítka) v rozevírací nabídce.
Rozbalovací oddělovač
Třída .dropdown-dividerse používá k oddělení odkazů uvnitř rozbalovací nabídky tenkým vodorovným okrajem:
Příklad
<div class="dropdown-divider"></div>
Rozbalovací záhlaví
Třída .dropdown-headerse používá k přidání záhlaví do rozbalovací nabídky:
Příklad
<div class="dropdown-header">Dropdown header 1</div>
Zakázat a Aktivní položky
Zvýrazněte konkrétní rozevírací položku s .activetřídou (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í“):
Příklad
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Rozbalovací pozice
Můžete také vytvořit nabídku „dropright“ nebo „dropleft“ přidáním třídy .droprightnebo .dropleftdo rozevíracího prvku. Všimněte si, že stříška/šipka se přidá automaticky:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Rozbalovací nabídka vpravo
Chcete-li rozbalovací nabídku zarovnat doprava, přidejte .dropdown-menu-righttřídu do prvku pomocí .dropdown-menu:
Příklad
<div class="dropdown-menu dropdown-menu-right">
Dropup
Pokud chcete, aby se rozbalovací nabídka rozbalovala nahoru místo dolů, změňte prvek <div> pomocí class="dropdown" na "dropup":
Příklad
<div class="dropup">
Rozbalovací text
Třída .dropdown-item-textse používá k přidání prostého textu do rozevírací položky nebo se používá na odkazy pro výchozí styl odkazu.
Příklad
<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>
Seskupená tlačítka s rozevíracím seznamem
Příklad
<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>
Rozbalovací seznamy tlačítek rozdělení
Příklad
<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>
Vertikální skupina tlačítek s rozevíracím seznamem
Příklad
<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>
Dokončete rozbalovací nabídku Bootstrap 4
Úplnou referenci o všech rozevíracích možnostech, metodách a událostech naleznete v našem rozbalovacím seznamu Bootstrap 4 JS .