Orodha ya kielektroniki ya Bootstrap 5

Orodha ya kielektroniki ya msingi

Menyu ya kielektroniki ina uwezo wa kushangaza na inaruhusiwa kwenda kwenye orodha ya malo ya msingi:

Mfano

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Bofu ya menyu ya kielektroniki
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Viungo 1</a></li>
    <li><a class="dropdown-item" href="#">Viungo 2</a></li>
    <li><a class="dropdown-item" href="#">Viungo 3</a></li>
  </ul>
</div>

Jifunze tena

Mfano wa maadili

.dropdown Mfano wa menyu ya kielektroniki.

Kwa kuwafungua menyu ya kielektroniki, tumia kiwemo cha msingi kwa sababu ya kuzingatia menyu ya kielektroniki. .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。

Tumia .dropdown-menu Class kuingiza <div> Elementi, inaweza kumewa menu ya kudongwa. Kisha tumia .dropdown-item Class inatumiwa kuingiza kila elementi kwenye menu ya kudongwa (kukimbilia kili ama mbinu).

Kichwa cha kichwa cha mawanda cha menu cha kudongwa

.dropdown-divider Class inatumiwa kufikia menu ya kudongwa kwa kufungua kichwa cha kichwa cha mawanda:

Mfano

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

Jifunze tena

Kichwa cha menu cha kudongwa

.dropdown-header Class inatumiwa kuingiza kichwa cha menu cha kudongwa:

Mfano

<li><h5 class="dropdown-header">Kichwa cha menu cha kudongwa 1</h5></li>

Jifunze tena

Zilizokusababisha na zilizoshughulika

Tumia .active Class kumtaarifu kiwango kile cha menu ya kudongwa (kuingiza rangi ya nyuzi ya kijani).

Kwa sababu ya kuwafichua kiwango kile kwenye menu ya kudongwa, tumia .disabled Class (inategemea mawanda ya mwelekeo wa kijani na ikoni ya "no-parking-sign").

Mfano

<li><a class="dropdown-item" href="#">Zaidi ya kidogo</a></li>
<li><a class="dropdown-item active" href="#">Zilizoshughulika</a></li>
<li><a class="dropdown-item disabled" href="#">Zilizokusababisha</a></li>

Jifunze tena

tena menu ya kudongwa

Wewe pia unaweza kuingiza .dropend au .dropstart Kuingiza class ya elementi ya kudongwa kumewa "dropend" au "dropstart" menu. Tafadhali ingaa, kichocheo/kifungo ni inatengenezwa kwa kina:

Dropright

<div class="dropdown dropend">

Jifunze tena

Dropleft

<div class="dropdown dropstart">

Jifunze tena

Kuingalizia menu ya kudongwa kushika nchini

Kwa sababu ya kuangalizia menu ya kudongwa kushika nchini, tungeza .dropdown-menu-end Kuingiza class ya .dropdown-menu ya elementi:

Mfano

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

Jifunze tena

Menu ya kushuka

Je kweli tu kushukwea kufungua menu ya kudongwa kuzingatia ukupanda kama ukishuka, tungeza class="dropdown" ya elementi ya <div>. "dropup"：

Mfano

<div class="dropup">

Jifunze tena

Matexti ya kusambaa

.dropdown-item-text Class inayotumika kusaidia kuingia matexti ya kwanza ya orodha, au kusaidia kuweka muundo wa viungo kwa kwa kawaida.

Mfano

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Viungo 1</a></li>
  <li><a class="dropdown-item" href="#">Viungo 2</a></li>
  <li><a class="dropdown-item" href="#">Viungo 3</a></li>
  <li><a class="dropdown-item-text" href="#">Viungo vya matexti</a></li>
  <li><span class="dropdown-item-text">Matexti ya kwanza</span></li>
</ul>

Jifunze tena

Mbinu ya kumpatikana na orodha ya kusambaa

Mfano

<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="#">Simu</a></li>
      <li><a class="dropdown-item" href="#">Kompyuta ya kifaa</a></li>
    </ul>
  </div>
</div>

Jifunze tena

Mbinu ya kumpatikana na orodha ya kusambaa

Mfano

<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="#">Simu</a></li>
      <li><a class="dropdown-item" href="#">Kompyuta ya kifaa</a></li>
    </ul>
  </div>
</div>

Jifunze tena