Nā hāʻule iho

E hoʻololi i nā uhi ʻokoʻa no ka hōʻike ʻana i nā papa inoa o nā loulou a me nā mea hou aku me ka Bootstrap dropdown plugin.

Ma kēia ʻaoʻao

Nānā nui

Hiki ke hoʻololi ʻia nā hāʻule iho, nā overlay contextual no ka hōʻike ʻana i nā papa inoa o nā loulou a me nā mea hou aku. Hoʻopili ʻia lākou me ka plugin Bootstrap dropdown JavaScript plugin. Hoʻololi ʻia lākou ma ke kaomi ʻana, ʻaʻole ma ka lele ʻana; he hoʻoholo manaʻo hoʻolālā kēia .

Hoʻokumu ʻia nā Dropdowns ma kahi waihona ʻaoʻao ʻekolu, ʻo Popper , kahi e hāʻawi ai i ke kūlana hoʻoikaika a me ka ʻike ʻana i ka ʻike. E ʻoluʻolu e hoʻokomo i ka popper.min.js ma mua o kā Bootstrap JavaScript a i ʻole hoʻohana bootstrap.bundle.min.js/ bootstrap.bundle.jsi loaʻa iā Popper. ʻAʻole hoʻohana ʻia ʻo Popper e hoʻonoho i nā hāʻule i loko o nā navbars ʻoiai ʻaʻole koi ʻia ke kūlana hoʻoikaika.

Hiki ke komo

ʻO ka maʻamau WAI ARIA ka wehewehe ʻana i kahi role="menu"widget maoli , akā kikoʻī kēia i nā menus e like me ka noi e hoʻoulu i nā hana a i ʻole nā hana. Hiki i nā papa kuhikuhi ARIA ke loaʻa nā mea papa inoa, nā mea koho pahu pahu, nā mea papa kuhikuhi kīwila, nā pūʻulu pihi lekiō, a me nā papa kuhikuhi.

ʻO nā hāʻule iho o Bootstrap, ma ka ʻaoʻao ʻē aʻe, ua hoʻolālā ʻia i mea maʻamau a pili i nā kūlana like ʻole a me nā hoʻolālā markup. No ka laʻana, hiki ke hana i nā hāʻule iho i loaʻa nā mea hoʻokomo hou a me nā mana palapala, e like me nā kahua ʻimi a i ʻole nā palapala komo. No kēia kumu, ʻaʻole manaʻo ʻo Bootstrap (ʻaʻole hoʻohui ʻia) i kekahi o nā ʻano rolea me aria-nā ʻano i koi ʻia no nā menus ARIA ʻoiaʻiʻo. Pono nā mea kākau e hoʻokomo i kēia mau ʻano kikoʻī iā lākou iho.

Eia nō naʻe, hoʻohui ʻo Bootstrap i ke kākoʻo i kūkulu ʻia no ka hapa nui o nā papa kuhikuhi papa kuhikuhi maʻamau, e like me ka hiki ke neʻe i nā .dropdown-itemmea hoʻokahi me ka hoʻohana ʻana i nā kī cursor a pani i ka papa kuhikuhi me ke ESCkī.

Nā laʻana

E kāʻei i ke koli o ka hāʻule iho (kāu pihi a i ʻole ka loulou) a me ka papa kuhikuhi hāʻule i loko o .dropdown, a i ʻole kekahi mea e hōʻike ana position: relative;. Hiki ke hoʻoulu ʻia nā dropdowns mai a i <a>ʻole <button>nā mea e kūpono i kāu mau pono pono. Hoʻohana nā laʻana i hōʻike ʻia ma ʻaneʻi i nā mea semantic <ul>inā kūpono, akā kākoʻo ʻia ka markup maʻamau.

pihi hoʻokahi

Hiki ke hoʻololi ʻia kēlā me kēia i kahi .btnhoʻololi i lalo me kekahi mau hoʻololi markup. Eia pehea ʻoe e hoʻohana ai iā lākou me nā <button>mea ʻelua:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

A me <a>nā mea:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

ʻO ka ʻāpana maikaʻi loa hiki iā ʻoe ke hana i kēia me kekahi ʻano pihi, pū kekahi:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Pihi hoʻokaʻawale

Pēlā nō, e hana i nā pihi hoʻokaʻawale me ka hoʻohālikelike like me nā pihi hoʻokahi, akā me ka hoʻohui ʻana .dropdown-toggle-splitno ka spacing kūpono a puni ka papa iho.

Hoʻohana mākou i kēia papa ʻē aʻe e hōʻemi i ka pae ākea paddingma kēlā ʻaoʻao kēia ʻaoʻao o ka caret e 25% a wehe i ka margin-leftmea i hoʻohui ʻia no ka hāʻule iho o nā pihi maʻamau. ʻO kēlā mau hoʻololi ʻē aʻe e hoʻomau i ka mālama mālama i ke pihi hoʻokaʻawale a hāʻawi i kahi ʻāpana kūpono kūpono ma ka ʻaoʻao o ke pihi nui.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Ka nui ana

Hoʻohana nā pihi hāʻule i lalo me nā pihi o nā nui āpau, me nā pihi paʻamau a me nā pihi hoʻokaʻawale.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Nā hāʻule ʻeleʻele

E koho i nā hāʻule iho ʻeleʻele e hoʻohālikelike i kahi navbar ʻeleʻele a i ʻole ke ʻano maʻamau ma ka hoʻohui .dropdown-menu-darkʻana i kahi .dropdown-menu. ʻAʻole koi ʻia nā loli i nā mea hāʻule i lalo.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

A e hoʻohana iā ia i kahi navbar:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Nā kuhikuhi

RTL

Hoʻohālikelike ʻia nā kuhikuhi i ka wā e hoʻohana ai iā Bootstrap ma RTL, ʻike ʻia ka manaʻo .dropstartma ka ʻaoʻao ʻākau.

Kauwaena

E hoʻokaʻawale i ka papa kuhikuhi ma lalo o ke kāʻei me .dropdown-centerka mea makua.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Hoʻokuʻu

E ho'āla i nā menus hāʻule iho ma luna o nā ʻeleʻele ma ka hoʻohui .dropupʻana i ka mea makua.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Hoʻokuʻu i waena

E hoʻokaʻawale i ka papa kuhikuhi ma luna o ke kāʻei me .dropup-centerka mea makua.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

E ho'āla i nā menus hāʻule iho ma ka ʻākau o nā mea ma ka hoʻohui .dropendʻana i ka ʻeleʻele makua.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Hoʻomaka

E ho'āla i nā menus hāʻule iho ma ka ʻaoʻao hema o nā mea ma ka hoʻohui .dropstartʻana i ka mea makua.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Hiki iā ʻoe ke hoʻohana a i <a>ʻole <button>nā mea e like me nā mea hāʻule.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Hiki nō hoʻi iā ʻoe ke hana i nā mea hoʻokuʻu i lalo me ka .dropdown-item-text. E ʻoluʻolu e hana hou me ka CSS maʻamau a i ʻole nā mea pono kikokikona.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

ʻeleu

Hoʻohui .activei nā mea i loko o ka hāʻule iho e hoʻohua iā lākou me he mea lā . No ka lawe ʻana i ke kūlana hana i nā ʻenehana kōkua, e hoʻohana i ke aria-currentʻano - me ka hoʻohana ʻana i ka pagewaiwai no ka ʻaoʻao o kēia manawa, a i ʻole trueno ka mea i kēia manawa i kahi set.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Kinohi

Hoʻohui .disabledi nā mea i loko o ka hāʻule iho e hoʻopaʻa iā lākou me he mea lā i pio .

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Ma ka maʻamau, hoʻonoho ʻia ka papa kuhikuhi iho i lalo 100% mai luna a ma ka ʻaoʻao hema o kona makua. Hiki iā ʻoe ke hoʻololi i kēia me nā .drop*papa kuhikuhi, akā hiki iā ʻoe ke hoʻomalu iā lākou me nā papa hoʻololi hou.

Hoʻohui .dropdown-menu-endi kahi .dropdown-menue hoʻolike ʻākau i ka papa kuhikuhi hāʻule iho. Hōʻike ʻia nā kuhikuhi i ka wā e hoʻohana ai iā Bootstrap ma RTL, ʻike ʻia ka manaʻo .dropdown-menu-endma ka ʻaoʻao hema.

Nā poʻo i luna! Hoʻonoho ʻia nā Dropdowns mahalo iā Popper koe wale nō ke kau ʻia i loko o kahi navbar.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Hoʻopololei pane

Inā makemake ʻoe e hoʻohana i ka alignment pane, e hoʻopau i ke kūlana hoʻoikaika ma ka hoʻohui ʻana i ke data-bs-display="static"ʻano a hoʻohana i nā papa hoʻololi pane.

No ka hoʻolikelike ʻana i ka papa kuhikuhi hāʻule iho me ka wahi haʻihaʻi i hāʻawi ʻia a i ʻole ka nui, hoʻohui .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

No ka hoʻolikelike ʻana i ka papa hāʻule i lalo me ka wahi haʻihaʻi i hāʻawi ʻia a i ʻole ka nui, hoʻohui .dropdown-menu-enda .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

E hoʻomanaʻo ʻaʻole pono ʻoe e hoʻohui i kahi data-bs-display="static"ʻano i nā pihi hāʻule i nā navbars, ʻoiai ʻaʻole hoʻohana ʻia ʻo Popper i nā navbars.

Nā koho hoʻoponopono

No ka lawe ʻana i ka hapa nui o nā koho i hōʻike ʻia ma luna nei, eia kahi demo kīhini liʻiliʻi o nā koho alignment dropdown ma kahi hoʻokahi.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Nā poʻomanaʻo

Hoʻohui i kahi poʻomanaʻo e hōʻailona i nā ʻāpana o nā hana ma kekahi papa kuhikuhi.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Nā mea hoʻokaʻawale

E hoʻokaʻawale i nā hui o nā mea papa kuhikuhi pili me kahi mea hoʻokaʻawale.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

kikokikona

E kau i kekahi kikokikona manuahi i loko o kahi papa kuhikuhi iho me nā kikokikona a hoʻohana i nā pono hana spacing . E hoʻomanaʻo, pono paha ʻoe i nā ʻano nui ʻē aʻe e kāohi i ka laulā papa kuhikuhi.

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Nā palapala

E hoʻokomo i kahi palapala i loko o kahi papa kuhikuhi hāʻule, a i ʻole e hoʻolilo iā ia i loko o kahi papa kuhikuhi, a hoʻohana i ka margin a i ʻole nā mea padding e hāʻawi iā ia i kahi kūpono ʻole āu e makemake ai.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

E hoʻohana data-bs-offseta data-bs-referencehoʻololi paha i kahi o ka hāʻule iho.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

ʻO ke ʻano pani ʻakomi

Ma ka maʻamau, pani ʻia ka papa kuhikuhi i ka wā e kaomi ai i loko a i waho paha o ka papa kuhikuhi. Hiki iā ʻoe ke hoʻohana i ke autoClosekoho e hoʻololi i kēia ʻano o ka hāʻule iho.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Nā mea hoʻololi

Hoʻohui ʻia ma v5.2.0

Ma ke ʻano o ka hoʻololi ʻana o nā ʻano hoʻololi CSS o Bootstrap, hoʻohana nā dropdown i kēia manawa i nā ʻano CSS kūloko no ka hoʻomaikaʻi ʻana i ka manawa .dropdown-menumaoli. Hoʻonohonoho ʻia nā waiwai no nā ʻano CSS ma o Sass, no laila ke kākoʻo mau ʻia nei ka hana maʻamau Sass.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Hiki ke ʻike ʻia ka hana maʻamau ma o nā ʻano CSS ma ka .dropdown-menu-darkpapa kahi e hoʻopau ai mākou i nā waiwai kikoʻī me ka ʻole o ka hoʻohui ʻana i nā mea koho CSS kope.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Nā hoʻololi Sass

Nā hoʻololi no nā hāʻule iho a pau:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Nā mea hoʻololi no ka hāʻule iho ʻeleʻele :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Nā mea hoʻololi no nā mālama mālama CSS e hōʻike ana i ka pilina o kahi hāʻule iho:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mea huikau

Hoʻohana ʻia nā Mixins e hana i nā mālama mālama CSS a hiki ke loaʻa ma scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Hoʻohana

Ma o nā ʻikepili ʻikepili a i ʻole JavaScript, hoʻololi ka plugin dropdown i nā ʻike huna (nā menus dropdown) ma ka hoʻololi ʻana i ka .showpapa ma ka makua .dropdown-menu. Ua data-bs-toggle="dropdown"hilinaʻi ʻia ka ʻano no ka pani ʻana i nā menus dropdown ma kahi pae noi, no laila he manaʻo maikaʻi e hoʻohana mau ia.

Ma nā hāmeʻa hiki ke hoʻopā, wehe i kahi hāʻule iho e hoʻohui i nā mouseovermea lima ʻole i nā keiki koke o ka <body>mea. Pono kēia hack ʻino ʻino e hana a puni i kahi quirk i ka ʻelele hanana hanana ʻo iOS , i ʻole e pale i kahi paʻi ma waho o ka hāʻule iho mai ka hoʻomaka ʻana i ke code e pani i ka hāʻule. Ke pani ʻia ka hāʻule iho mouseover, wehe ʻia kēia mau mea lima ʻole.

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui data-bs-toggle="dropdown"i kahi loulou a i ʻole pihi e hoʻololi i kahi hāʻule iho.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Ma o JavaScript

Kāhea i nā hāʻule iho ma o JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`koi mau

Inā ʻoe e kāhea i kāu hāʻule iho ma o JavaScript a i ʻole e hoʻohana i ka data-api, data-bs-toggle="dropdown"pono mau e noho ma ka mea hoʻoiho o ka dropdown.

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript, hiki iā ʻoe ke hoʻohui i kahi inoa koho i data-bs-, e like me ka data-bs-animation="{value}". E hōʻoia e hoʻololi i ke ʻano hihia o ka inoa koho mai " CamelCase " i " kebab-case " i ka wā e hāʻawi ai i nā koho ma o nā ʻano ʻikepili. No ka laʻana, hoʻohana data-bs-custom-class="beautifier"ma kahi o data-bs-customClass="beautifier".

E like me Bootstrap 5.2.0, kākoʻo nā ʻāpana āpau i kahi hiʻohiʻona ʻikepili i mālama ʻiadata-bs-config i hiki ke mālama i ka hoʻonohonoho ʻāpana maʻalahi ma ke ʻano he kaula JSON. Ke loaʻa nā ʻano mea data-bs-config='{"delay":0, "title":123}'a me data-bs-title="456"nā ʻano, ʻo ka titlewaiwai hope loa 456a na nā ʻano ʻikepili kaʻawale e kāpae i nā waiwai i hāʻawi ʻia ma data-bs-config. Eia kekahi, hiki i nā ʻikepili ʻikepili ke hoʻopaʻa i nā waiwai JSON e like me data-bs-delay='{"show":0,"hide":150}'.

inoa	ʻAno	Default	wehewehe
`autoClose`	boolean, kaula	`true`	E hoʻonohonoho i ke ʻano pani kaʻa o ka hāʻule iho: `true`- e pani ʻia ka hāʻule iho ma ke kaomi ʻana i waho a i ʻole i loko o ka papa kuhikuhi. `false`- e pani ʻia ka hāʻule iho ma ke kaomi ʻana i ke pihi hoʻololi a me ke kelepona lima ʻana a i `hide`ʻole `toggle`ke ʻano. (ʻAʻole e pani ʻia ma ke kaomi ʻana i ke `esc`kī) `'inside'`- e pani ʻia ka hāʻule iho (wale nō) ma ke kaomi ʻana i loko o ka papa kuhikuhi. `'outside'`- e pani ʻia ka hāʻule iho (wale nō) ma ke kaomi ʻana ma waho o ka papa kuhikuhi. Nānā: hiki ke pani ʻia ka hāʻule iho me ke `ESC`kī.
`boundary`	kaula, ʻeleʻele	`'clippingParents'`	Ka palena palena o ka papa kuhikuhi hāʻule iho (e pili wale ana i ka mea hoʻololi hoʻololi ʻo Popper preventOverflow). Ma ka maʻamau, `clippingParents`hiki iā ia ke ʻae i kahi kuhikuhi HTMLElement (ma JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala detectOverflow a Popper .
`display`	kaulahao	`'dynamic'`	Ma ka maʻamau, hoʻohana mākou iā Popper no ka hoʻonohonoho ʻana. Hoʻopau i kēia me `static`.
`offset`	laha, kaula, hana	`[0, 2]`	Offset o ka hāʻule iho e pili ana i kāna pahu hopu. Hiki iā ʻoe ke hāʻawi i kahi kaula i nā ʻano ʻikepili me nā koma i hoʻokaʻawale ʻia e like me: `data-bs-offset="10,20"`. Ke hoʻohana ʻia kahi hana no ka hoʻoholo ʻana i ka offset, ua kapa ʻia ia me kahi mea i loaʻa ka popper placement, ka kuhikuhi, a me ka popper rects e like me kāna hoʻopaʻapaʻa mua. Hoʻoholo ʻia ka mea hoʻomaka DOM node ma ke ʻano he pane ʻelua. Pono ka hana e hoʻihoʻi i kahi lae me nā helu ʻelua: skidding , distance . No ka ʻike hou aku, e nānā i nā palapala offset a Popper .
`popperConfig`	null, mea, hana	`null`	No ka hoʻololi i ka hoʻonohonoho Popper paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper . Ke hoʻohana ʻia kahi hana no ka hana ʻana i ka hoʻonohonoho Popper, kāhea ʻia me kahi mea i loaʻa ka hoʻonohonoho Popper paʻamau o Bootstrap. Kōkua ia iā ʻoe e hoʻohana a hoʻohui i ka paʻamau me kāu hoʻonohonoho ponoʻī. Pono e hoʻihoʻi ka hana i kahi mea hoʻonohonoho no Popper.
`reference`	kaula, mea, mea	`'toggle'`	Mea kuhikuhi o ka papa kuhikuhi. ʻAe i nā waiwai o `'toggle'`, `'parent'`, he HTMLElement reference a i ʻole kekahi mea hāʻawi `getBoundingClientRect`. No ka ʻike hou aku, e nānā i nā palapala hana a Popper a me nā palapala ʻeleʻele virtual .

Ke hoʻohana nei i ka hana me`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Nā ʻano hana

Kaʻina hana	wehewehe
`dispose`	Hoʻopau i ka hāʻule iho o kahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM)
`getInstance`	ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka hiʻohiʻona hāʻule i pili i kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	ʻO ke ʻano static e hoʻihoʻi i kahi hāʻule iho i pili i kahi mea DOM a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Hūnā i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
`show`	Hōʻike i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
`toggle`	Hoʻololi i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
`update`	Hoʻohou i ke kūlana o ka hāʻule iho o kahi mea.

Nā hanana

Hoʻopau ʻia nā hanana hāʻule i lalo i ka mea hoʻololi a laila huʻi ʻia. No laila hiki iā ʻoe ke hoʻohui pū i nā mea hoʻolohe hanana ma ka .dropdown-menu'parent element. hide.bs.dropdowna hidden.bs.dropdownhe clickEventwaiwai ko nā hanana (i ka wā wale nō ke ʻano hanana hanana click) i loaʻa kahi mea hanana no ka hanana kaomi.

ʻAno hanana	wehewehe
`hide.bs.dropdown`	Ke ahi koke i ka wā `hide`i kāhea ʻia ai ke ʻano hana.
`hidden.bs.dropdown`	Hoʻopau ʻia i ka pau ʻana o ka huna ʻana mai ka mea hoʻohana a ua pau nā hoʻololi CSS.
`show.bs.dropdown`	Ke ahi koke ʻia ke `show`kāhea ʻia ke ʻano hana.
`shown.bs.dropdown`	Hoʻopau ʻia ke ʻike ʻia ka hāʻule iho i ka mea hoʻohana a ua pau nā hoʻololi CSS.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Nā hāʻule iho

Nānā nui

Hiki ke komo

Nā laʻana

pihi hoʻokahi

Pihi hoʻokaʻawale

Ka nui ana

Nā hāʻule ʻeleʻele

Nā kuhikuhi

RTL

Kauwaena

Hoʻokuʻu

Hoʻokuʻu i waena

Dropend

Hoʻomaka

Nā mea papa kuhikuhi

ʻeleu

Kinohi

Hoʻoponopono papa kuhikuhi

Hoʻopololei pane

Nā koho hoʻoponopono

Menu maʻiʻo

Nā poʻomanaʻo

Nā mea hoʻokaʻawale

kikokikona

Nā palapala

ʻO ke ʻano pani ʻakomi

CSS

Nā mea hoʻololi

Nā hoʻololi Sass

Mea huikau

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Ma o JavaScript

`data-bs-toggle="dropdown"`koi mau

Nā koho

Ke hoʻohana nei i ka hana me`popperConfig`

Nā ʻano hana

Nā hanana

Nā hāʻule iho

Nānā nui

Hiki ke komo

Nā laʻana

pihi hoʻokahi

Pihi hoʻokaʻawale

Ka nui ana

Nā hāʻule ʻeleʻele

Nā kuhikuhi

RTL

Kauwaena

Hoʻokuʻu

Hoʻokuʻu i waena

Dropend

Hoʻomaka

Nā mea papa kuhikuhi

ʻeleu

Kinohi

Hoʻoponopono papa kuhikuhi

Hoʻopololei pane

Nā koho hoʻoponopono

Menu maʻiʻo

Nā poʻomanaʻo

Poʻomanaʻo hāʻule iho

Nā mea hoʻokaʻawale

kikokikona

Nā palapala

Nā koho hāʻule iho

ʻO ke ʻano pani ʻakomi

CSS

Nā mea hoʻololi

Nā hoʻololi Sass

Mea huikau

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Ma o JavaScript

data-bs-toggle="dropdown"koi mau

Nā koho

Ke hoʻohana nei i ka hana mepopperConfig

Nā ʻano hana

Nā hanana

`data-bs-toggle="dropdown"`koi mau

Ke hoʻohana nei i ka hana me`popperConfig`