Bootstrap 5 rullegardinliste

Grunnleggende rullegardinliste

En rullegardinmeny er en byttbar meny som tillater brukere å velge verdier fra en forhåndsdefinert liste:

Eksempel

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Rullegardinknapp
  </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>

Prøv det selv

Eksempel Forklaring

.dropdown klasse som indikerer rullegardinmenyen.

For at å åpne en rullegardinmeny, bruk en .dropdown-toggle klassen og data-toggle="dropdown" egenskaben til knapper eller links.

tilføj .dropdown-menu klassen til <div> elementer, der kan faktisk opbygge rullemenuen. Derefter tilføj .dropdown-item klassen tilføjes til hver element (link eller knap) i rullemenuen.

Rullemenu adskillelse

.dropdown-divider klassen til at adskille lenker i rullemenuen med en horisontal tynd kantligning:

Eksempel

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

Prøv det selv

Rullemenu titel

.dropdown-header klassen til at tilføje titler i rullemenuen:

Eksempel

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

Prøv det selv

deaktiverede og aktive elementer

Brug .active klassen til at fremhæve en specifik rulleindgang (tilføjer en blå baggrundsfarve).

For at deaktivere et element i rullemenuen, skal du bruge .disabled klassen (får en lysgrå tekstfarve og "no-parking-sign"-ikon ved musoverførsel).

Eksempel

<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="#">Deaktiveret</a></li>

Prøv det selv

rullemenuens placering

Du kan også bruge .dropend eller .dropstart tilføj klassen til rullelementet for at oprette "dropend" eller "dropstart" menuer. Bemærk, at insertionsmarkoren/pegen tilføjes automatisk:

Dropright

<div class="dropdown dropend">

Prøv det selv

Dropleft

<div class="dropdown dropstart">

Prøv det selv

Højrejusteret rullemenu

For at justere rullemenuen til højre, skal du ændre .dropdown-menu-end tilføj klassen .dropdown-menu elementer:

Eksempel

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

Prøv det selv

Opadgående liste

Hvis du ønsker, at rullemenuen åbner sig opad i stedet for nedad, skal du ændre <div> elementet med class="dropdown" til "dropup"：

Eksempel

<div class="dropup">

Prøv det selv

Rulle tekst

.dropdown-item-text Klassen bruges til at tilføje ren tekst til rullemenuer eller til at tilføje standardstilarter til links.

Eksempel

<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">Ren tekst</span></li>
</ul>

Prøv det selv

Kombinerede knapper og rullemenuer

Eksempel

<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="#">Tablet</a></li>
    </ul>
  </div>
</div>

Prøv det selv

Vertikale kombinerede knapper og rullemenuer

Eksempel

<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="#">Tablet</a></li>
    </ul>
  </div>
</div>

Prøv det selv