Holo i ka ʻike nui Holo i ka hoʻokele docs
in English

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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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 ʻokoʻa 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 kaila 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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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.

Hoʻokuʻu

E hoʻoulu i nā menus hāʻule iho ma luna o nā mea ma ka hoʻohui .dropupʻana i ka ʻeleʻele 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>

Dropright

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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

hema hema

E hoʻoulu i nā menus hāʻule i lalo ma ka hema o nā mea ma o 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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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 aku me ka CSS maʻamau a i ʻole nā ​​mea pono kikokikona.

<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 i lalo e hoʻohālikelike 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 pūʻulu.

<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 ka hāʻule i lalo e hoʻohua iā lākou me he mea lā i pio .

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">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. 
<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.

<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.

<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 lalo 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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

Menu maʻiʻo

Nā poʻomanaʻo

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

<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.

<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 i lalo me ka kikokikona a hoʻohana i nā pono hana spacing . E hoʻomanaʻo e pono paha ʻoe i nā ʻano nui ʻē aʻe e kāohi i ka laulā papa kuhikuhi.

ʻO kekahi laʻana kikokikona e kahe manuahi ana i loko o ka papa kuhikuhi.

A he laʻana kikokikona hou aʻe kēia.

<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.

Mea hou a puni? Kau inoa Poina ka ʻōlelo huna? 
<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>
<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>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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

ʻO ka mea paʻ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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

Sass

Nā mea hoʻololi

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:             rgba($black, .15);
$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($gray-900, 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:           $dropdown-padding-y $dropdown-item-padding-x;

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 launa pū ʻana 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 hoʻopā ʻia, 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 dropdown mai ka hoʻomaka ʻana i ke code e pani ana i ka hāʻule iho. 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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Ma o JavaScript

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

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"koi mau

Inā ʻoe e kāhea aku 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ʻomaka o ka dropdown.

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-, e like me ka data-bs-offset="". 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, ma kahi o ka hoʻohana ʻana data-bs-autoClose="false", hoʻohana data-bs-auto-close="false".

inoa ʻAno Default wehewehe
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 .
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 .
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 .
autoClose boolean | kaulahao 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 toggleke ʻano. (ʻAʻole e pani ʻia ma ke kaomi ʻana i ke esckī)
  • '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.
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.

Ke hoʻohana nei i ka hana mepopperConfig

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

Nā ʻano hana

Kaʻina hana wehewehe
toggle Hoʻololi 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.
hide Hūnā 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.
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)

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.

Kaʻina hana wehewehe
show.bs.dropdown E puhi koke ʻia ke kāhea ʻia ke ʻano hana hōʻike.
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.
hide.bs.dropdown E puhi koke ʻia ke kāhea ʻia ke ʻano hiʻohiʻona huna.
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. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})