Bootstrap 5 pudotusvalikko

Perus pudotusvalikko

Pudotusvalikko on vaihdettava valikko, joka mahdollistaa käyttäjän valinnan esivalitusta luettelosta:

Esimerkki

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

Kokeile itse

Esimerkki selityksestä

.dropdown merkitsemään pudotusvalikon.

Jos haluat avata pudotusvalikon, käytä luokkaa .dropdown-toggle {} luokka ja data-toggle="dropdown"

ominaisuukselle .dropdown-menu luokan <div> elementtiä, jotka voivat rakentaa todellisen pudotusvalikon. Lisäksi lisää .dropdown-item lisää luokka jokaiseen elementtiin (linkki tai painike).

pudotusvalikon erottelija

.dropdown-divider luokkaa erottamaan linkkejä horisontaalisella ohujoukolla pudotusvalikossa:

Esimerkki

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

Kokeile itse

pudotusvalikon otsikko

.dropdown-header luokkaa lisätäksesi otsikon pudotusvalikkoon:

Esimerkki

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

Kokeile itse

ei käytettävissä ja aktiivisia elementtejä

Käytä .active luokkaa korostaaksesi tiettyä pudotusvalikon elementtiä (lisätään sininen tausta).

Jos haluat poistaa pudotusvalikon jonkin elementin käytettävyyden, käytä .disabled luokan (valittuna saat ohuemmän tekstin ja "no-parking-sign"-kuvakkeen).

Esimerkki

<li><a class="dropdown-item" href="#">Tavallinen</a></li>
<li><a class="dropdown-item active" href="#">Aktiivinen</a></li>
<li><a class="dropdown-item disabled" href="#">Ei käytettävissä</a></li>

Kokeile itse

pudotusvalikon sijainti

Voit myös määrittää pudotusvalikon sijainnin: .dropend tai .dropstart lisää "dropend" tai "dropstart"-valikon luomiseksi elementtiin, johon on lisätty luokka. Huomaa, että nuoli lisätään automaattisesti:

Dropright

<div class="dropdown dropend">

Kokeile itse

Dropleft

<div class="dropdown dropstart">

Kokeile itse

oikealle tasalle järjestettävä pudotusvalikko

Jos haluat oikealle tasalle järjestettävän pudotusvalikon, muuta .dropdown-menu-end lisää "dropdown-menu"-luokka elementtiin, joka .dropdown-menu seuraaville elementeille:

Esimerkki

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

Kokeile itse

Ylöspäin avautuva valikko

Jos haluat, että pudotusvalikko avataan ylöspäin eikä alaspäin, muuta class="dropdown" -elementtiä seuraavasti: "dropup"：

Esimerkki

<div class="dropup">

Kokeile itse

Pudotusvalikkoteksti

.dropdown-item-text Luokka lisätään pudotusvalikkoon lisätäänkö siihen puhtaa tekstiä, tai lisätäänkö linkille oletuslinkin tyyliä.

Esimerkki

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Linkki 1</a></li>
  <li><a class="dropdown-item" href="#">Linkki 2</a></li>
  <li><a class="dropdown-item" href="#">Linkki 3</a></li>
  <li><a class="dropdown-item-text" href="#">Tekstilinkki</a></li>
  <li><span class="dropdown-item-text">Puhtainen teksti</span></li>
</ul>

Kokeile itse

Yhdistelmäpainikkeet ja pudotusvalikko

Esimerkki

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

Kokeile itse

Pystysuuntaiset yhdistelmäpainikkeet ja pudotusvalikko

Esimerkki

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

Kokeile itse