Bootstrap 5 Dropdown List

Basic Dropdown List

Ang dropdown menu ay isang tunay na menu na pwedeng magbigay-buhay, na nagbibigay sa mga gumagamit ng pagpipilian upang piliin ang halaga mula sa predefined list:

Mga Halimbawa

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

Subukan Ngayon

Halimbawa sa paliwanag

.dropdown klaseng nagsasabi ng dropdown menu.

Para maabli ang buksan ang dropdown menu, gamitin ang na-set na .dropdown-toggle klase at data-toggle="dropdown" attribute.

button or link na may .dropdown-menu klase sa <div> element, na maaaring aktwal na bumuo ng dropdown menu. Pagkatapos, idagdag ang .dropdown-item klase idagdag sa bawat elemento sa dropdown menu (link or button).

Dropdown list separator

.dropdown-divider klase upang hatiin ang dropdown menu na may horizontal thin border:

Mga Halimbawa

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

Subukan Ngayon

Dropdown list header

.dropdown-header klase upang magdagdag ng header sa dropdown menu:

Mga Halimbawa

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

Subukan Ngayon

disabled and active items

Gumamit ng .active klase upang highlight ang partikular na dropdown item (addding blue background color).

Kung gusto mong idisable ang isang item sa dropdown list, gamitin ang .disabled klase (nakuha ng liwanag na light grey text color at "no-parking-sign" icon sa paghanggang).

Mga Halimbawa

<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Active</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled</a></li>

Subukan Ngayon

position of dropdown list

Maaari ka ring gamitin ang .dropend o .dropstart Magdagdag ng klase sa dropdown element upang lumikha ng "dropend" o "dropstart" menu. Maging maingat, ang simbolo ng pagpasok/sibol ay awtomatikong idadagdag:

Dropright

<div class="dropdown dropend">

Subukan Ngayon

Dropleft

<div class="dropdown dropstart">

Subukan Ngayon

Right-align dropdown list

Kung gusto mong mag-kanan ang kanang bahagi ng dropdown menu, palitan ang .dropdown-menu-end Magdagdag ng klase .dropdown-menu ng mga elemento:

Mga Halimbawa

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

Subukan Ngayon

Uplink list

Kung gusto mong palakasin ang dropdown menu papunta sa itaas kaysa sa ilalim, palitan ang <div> element na may class="dropdown". "dropup"：

Mga Halimbawa

<div class="dropup">

Subukan Ngayon

Dropdown Teksto

.dropdown-item-text Ang klase ay ginagamit upang magdagdag ng teksto sa dropdown item, o upang magdagdag ng common na estilo ng link sa link.

Mga Halimbawa

<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="#">Text Link</a></li>
  <li><span class="dropdown-item-text">Text</span></li>
</ul>

Subukan Ngayon

Mga nagkakasamang buton at dropdown na listahan

Mga Halimbawa

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

Subukan Ngayon

Mga nakatatiling buton at dropdown na listahan

Mga Halimbawa

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

Subukan Ngayon