Bootstrap 5 dropdown-lijst

Basis dropdown-lijst

Een dropdown-menu is een schakelbare menu die gebruikers toestaat om waarden uit een vooraf gedefinieerde lijst te kiezen:

Voorbeeld

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown-knop
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Probeer het zelf

Voorbeeldverklaring

.dropdown klasse die de dropdown-menu aanduidt.

Om een dropdown-menu te openen, gebruik dan een ingestelde .dropdown-toggle klasse en data-toggle="dropdown" het attribuut van de knop of link.

toevoegen aan .dropdown-menu klasse toe aan <div> elementen, die de dropdown-menu kunnen bouwen. Voeg vervolgens .dropdown-item voeg de class toe aan elk element in de dropdown-menu (link of knop).

dropdown-lijst scheidingslijn

.dropdown-divider klasse om links in de dropdown-menu te scheiden met een horizontale dunne rand:

Voorbeeld

<li><hr class="dropdown-divider"></hr></li>

Probeer het zelf

dropdown-lijst titel

.dropdown-header klasse om titels toe te voegen aan de dropdown-menu:

Voorbeeld

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

Probeer het zelf

uitgeschakelde en actieve items

Gebruik .active klasse om een specifieke dropdown-item te markeren (voeg een blauwe achtergrondkleur toe).

Om een item in de dropdown-menu uit te schakelen, gebruik dan .disabled klasse (verkrijgt een lichtgrijze tekstkleur en "no-parking-sign"-pictogram bij hover).

Voorbeeld

<li><a class="dropdown-item" href="#">normaal</a></li>
<li><a class="dropdown-item active" href="#">actief</a></li>
<li><a class="dropdown-item disabled" href="#">uitgeschakeld</a></li>

Probeer het zelf

de positie van de dropdown-lijst

U kunt ook .dropend of .dropstart voeg de class toe aan de dropdown-elementen om "dropend" of "dropstart"-menu's te maken. Let op, de insertteken/speerpunt wordt automatisch toegevoegd:

Dropright

<div class="dropdown dropend">

Probeer het zelf

Dropleft

<div class="dropdown dropstart">

Probeer het zelf

omhoogklap lijst rechtsgelinkt

Als u de dropdown-menu rechtsgelinkt wilt hebben, wijzig dan .dropdown-menu-end voeg de class toe aan de .dropdown-menu van de elementen:

Voorbeeld

<div class="dropdown-menu dropdown-menu-end">

Probeer het zelf

omhoogklap lijst

Als u de dropdown-menu wilt openen naar boven in plaats van naar beneden, wijzig dan het <div> element met class="dropdown" "dropup"：

Voorbeeld

<div class="dropup">

Probeer het zelf

Dropdown-tekst

.dropdown-item-text De klasse wordt gebruikt om puur tekst aan dropdown-items toe te voegen, of om de standaard linkstijl voor links toe te voegen.

Voorbeeld

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Tekstlink</a></li>
  <li><span class="dropdown-item-text">Pure tekst</span></li>
</ul>

Probeer het zelf

Combinatieknoppen en dropdown-lijsten

Voorbeeld

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefoon</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Probeer het zelf

Verticale combinatieknoppen en dropdown-lijsten

Voorbeeld

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Telefoon</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Probeer het zelf