Bootstrap 4 vervolgkeuzelijsten
Basis dropdown
Een vervolgkeuzemenu is een schakelbaar menu waarmee de gebruiker één waarde uit een vooraf gedefinieerde lijst kan kiezen:
Voorbeeld
<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>
Voorbeeld uitgelegd
De .dropdownklasse geeft een vervolgkeuzemenu aan.
.dropdown-toggleGebruik een knop of een link met een klasse van en het
data-toggle="dropdown"attribuut om het vervolgkeuzemenu te openen .
Voeg de .dropdown-menuklasse toe aan een <div>element om het vervolgkeuzemenu daadwerkelijk te bouwen. Voeg vervolgens de
.dropdown-itemklasse toe aan elk element (links of knoppen) in het vervolgkeuzemenu.
Vervolgkeuzelijst
De .dropdown-dividerklasse wordt gebruikt om links in het vervolgkeuzemenu te scheiden met een dunne horizontale rand:
Voorbeeld
<div class="dropdown-divider"></div>
Dropdown-koptekst
De .dropdown-headerklasse wordt gebruikt om kopteksten toe te voegen in het vervolgkeuzemenu:
Voorbeeld
<div class="dropdown-header">Dropdown header 1</div>
Uitschakelen en Actieve items
Markeer een specifiek dropdown-item met de .activeklas (voegt een blauwe achtergrondkleur toe).
Om een item in het vervolgkeuzemenu uit te schakelen, gebruikt u de .disabledklasse (krijgt een lichtgrijze tekstkleur en een "verboden-parkeren-teken"-pictogram bij de muisaanwijzer):
Voorbeeld
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Dropdown-positie
Je kunt ook een "dropright" of "dropleft" menu maken door de klasse .droprightof toe te voegen .dropleftaan het dropdown-element. Merk op dat het caret/pijltje automatisch wordt toegevoegd:
Dropright
<div class="dropdown dropright">
Links laten vallen
<div class="dropdown dropleft">
Vervolgkeuzemenu Rechts
Om het vervolgkeuzemenu rechts uit te lijnen, voegt u de .dropdown-menu-rightklasse toe aan het element met .dropdown-menu:
Voorbeeld
<div class="dropdown-menu dropdown-menu-right">
Drop-up
Als u wilt dat het vervolgkeuzemenu naar boven wordt uitgevouwen in plaats van naar beneden, wijzigt u het <div>-element met class="dropdown" in "dropup":
Voorbeeld
<div class="dropup">
Dropdown-tekst
De .dropdown-item-textklasse wordt gebruikt om platte tekst toe te voegen aan een dropdown-item, of wordt gebruikt op links voor standaard link-styling.
Voorbeeld
<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>
Gegroepeerde knoppen met een dropdown
Voorbeeld
<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>
Vervolgkeuzemenu's voor splitsen
Voorbeeld
<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>
Verticale knopgroep met dropdown
Voorbeeld
<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>
Volledige Bootstrap 4 dropdown-referentie
Ga voor een volledige referentie van alle dropdown-opties, -methoden en -evenementen naar onze Bootstrap 4 JS Dropdown Reference .