Bootstrap 5 rullgardinslista

Grundläggande rullgardinslista

En rullgardin är en växlig meny som tillåter användare att välja värden från en fördefinierad lista:

Exempel

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Rullgardinsknapp
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Länk 1</a></li>
    <li><a class="dropdown-item" href="#">Länk 2</a></li>
    <li><a class="dropdown-item" href="#">Länk 3</a></li>
  </ul>
</div>

Prova själv

Exempel förklaring

.dropdown klassindikation för rullgardin.

För att öppna en rullgardin, använd .dropdown-toggle klassen och data-toggle="dropdown" egenskapen till knappen eller länken.

Tilldela .dropdown-menu klassen till <div> element, kan faktiskt bygga upp rullgardinsmenyn. Lägg sedan .dropdown-item Lägg till klassen till varje element i rullgardinsmenyn (länk eller knapp).

Rullgardinsavskiljare

.dropdown-divider klassen för att skilja upp länkar i rullgardinen med en horisontell tunn kantlinje:

Exempel

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

Prova själv

Rullgardinsrubrik

.dropdown-header klassen för att lägga till rubriker i rullgardinen:

Exempel

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

Prova själv

inaktiverade och aktiva objekt

Använd .active klassen för att markera specifika rullgardinsalternativ (lägger till blå bakgrundsfärg).

För att inaktivera ett element i rullgardinen, använd .disabled klassen (får ljusgrå textfärg och "no-parking-sign"-ikon vid musöver).

Exempel

<li><a class="dropdown-item" href="#">Standard</a></li>
<li><a class="dropdown-item active" href="#">Aktiv</a></li>
<li><a class="dropdown-item disabled" href="#">Inaktiverad</a></li>

Prova själv

Rullgardinsposition

Du kan också genom att .dropend eller .dropstart Lägg till klassen till rullgardinslementet för att skapa "dropend" eller "dropstart"-menyer.Observera att pilen/pekaren läggs till automatiskt:

Dropright

<div class="dropdown dropend">

Prova själv

Dropleft

<div class="dropdown dropstart">

Prova själv

Rättjustera rullgardin nedåt

För att rättjustera rullgardinen till höger, ändra .dropdown-menu-end Lägg till klassen .dropdown-menu elementen:

Exempel

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

Prova själv

Upprullning

Om du vill att rullgardinen ska öppnas uppåt istället för nedåt, ändra <div> elementet med class="dropdown" till "dropup"：

Exempel

<div class="dropup">

Prova själv

Rullgardins text

.dropdown-item-text Klass används för att lägga till ren text till rullgardinsobjekt, eller för att lägga till standardlänksskick till länkar.

Exempel

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Länk 1</a></li>
  <li><a class="dropdown-item" href="#">Länk 2</a></li>
  <li><a class="dropdown-item" href="#">Länk 3</a></li>
  <li><a class="dropdown-item-text" href="#">Textlänk</a></li>
  <li><span class="dropdown-item-text">Ren text</span></li>
</ul>

Prova själv

Kombinerade knappar och rullgardinsmeny

Exempel

<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="#">Telefon</a></li>
      <li><a class="dropdown-item" href="#">Tablett</a></li>
    </ul>
  </div>
</div>

Prova själv

Vertikala kombinerade knappar och rullgardinsmeny

Exempel

<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="#">Telefon</a></li>
      <li><a class="dropdown-item" href="#">Tablett</a></li>
    </ul>
  </div>
</div>

Prova själv