Source

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.

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 .

Kūkulu ʻia nā dropdown ma kahi waihona ʻaoʻao ʻekolu, ʻo Popper.js , kahi e hāʻawi ai i ke kūlana hoʻoikaika a me ka ʻike ʻana. 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.jsaia i loko o Popper.js. ʻAʻole hoʻohana ʻia ʻo Popper.js e hoʻonoho i nā hāʻule i lalo i nā navbars ʻoiai ʻaʻole koi ʻia ke kūlana hoʻoikaika.

Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia .

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.

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:

Action Another action Something else here 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

A me <a>nā mea:

Action Another action Something else here 
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

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

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Nā kuhikuhi

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.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

hema hema

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Pono nā loulou i ka papa kuhikuhi papa kuhikuhi moʻolelo , akā ʻaʻole ia ka hihia me v4. I kēia manawa hiki iā ʻoe ke hoʻohana i <button>nā mea i loko o kāu dropdown ma kahi o <a>s wale nō.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</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.

ʻImi ʻikamu hāʻule i lalo Hana ʻO kekahi hana He mea ʻē aʻe ma ʻaneʻi 
<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

ʻeleu

Hoʻohui .activei nā mea i loko o ka hāʻule iho e hoʻohua iā lākou me he mea lā .

loulou mau Loulou hana ʻO kekahi loulou 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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 .

loulou mau Ua pio ka loulou ʻO kekahi loulou 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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. Hoʻohui .dropdown-menu-righti kahi .dropdown-menue hoʻolike ʻākau i ka papa kuhikuhi hāʻule iho.

Nā poʻo i luna! Hoʻonoho ʻia nā hāʻule i lalo i ka mahalo iā Popper.js (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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</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-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}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</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-righta .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

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

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.

Poʻomanaʻo hāʻule iho
Hana ʻO kekahi hana 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Nā mea hoʻokaʻawale

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

Hana ʻO kekahi hana He mea ʻē aʻe ma ʻaneʻi
loulou kaawale 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

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.

ʻ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="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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-offseta data-referencehoʻololi paha i kahi o ka hāʻule iho.

Action Another action Something else here
Action Another action Something else here
Separated link 
<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Hoʻohana

Ma o nā ʻikepili ʻikepili a i ʻole JavaScript, hoʻololi ka plugin dropdown i ka ʻike huna (nā menus dropdown) ma ka hoʻololi ʻana i ka .showpapa ma ka mea papa inoa makua. Ua data-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 i lalo e hoʻohui i nā mea lima ʻole ( $.noop) mouseoveri 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-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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Ma o JavaScript

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

$('.dropdown-toggle').dropdown()
data-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-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. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset="".

inoa ʻAno Default wehewehe
offset helu | kaula | hana 0

Offset o ka hāʻule iho e pili ana i kāna pahu hopu.

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 ʻikepili offset e like me kāna hoʻopaʻapaʻa mua. Pono ka hana e hoʻihoʻi i kahi mea me ke ʻano like. Hoʻoholo ʻia ka mea hoʻomaka DOM node ma ke ʻano he pane ʻelua.

No ka ʻike hou aku e nānā i nā palapala offset a Popper.js .
hoʻohuli boolean ʻoiaʻiʻo E ʻae i ka Dropdown e hoʻohuli i ka wā e kau ana ma luna o ka mea kuhikuhi. No ka ʻike hou aku, e nānā i nā palapala flip a Popper.js .
palena kaula | ʻeleʻele 'scrollParent' ʻO ka palena palena o ka papa kuhikuhi. ʻAe i nā waiwai o 'viewport', 'window', 'scrollParent', a i ʻole HTMLElement reference (JavaScript wale nō). No ka ʻike hou aku e nānā i nā palapala preventOverflow a Popper.js .
kuhikuhi kaula | ʻeleʻele 'hoololi' Mea kuhikuhi o ka papa kuhikuhi. ʻAe i nā waiwai o 'toggle', 'parent', a i ʻole HTMLElement reference. No ka 'ike hou aku, e nānā i ka Popper.js's referenceObject docs .
hōʻike kaulahao 'dynamic' Ma ka paʻamau, hoʻohana mākou iā Popper.js no ke kūlana hoʻoikaika. Hoʻopau i kēia me static.
popperConfig null | mea null No ka hoʻololi ʻana i ka hoʻonohonoho Popper.js paʻamau o Bootstrap, e ʻike i ka hoʻonohonoho ʻana o Popper.js

E hoʻomaopopo i ka wā boundaryi hoʻonoho ʻia i kekahi waiwai ʻē aʻe ma mua o 'scrollParent', position: staticua hoʻohana ʻia ke ʻano i ka .dropdownipu.

Nā ʻano hana

Kaʻina hana wehewehe
$().dropdown('toggle') Hoʻololi i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
$().dropdown('show') Hōʻike i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
$().dropdown('hide') Hūnā i ka papa kuhikuhi hāʻule iho o kahi hoʻokele hoʻokele i hāʻawi ʻia.
$().dropdown('update') Hoʻohou i ke kūlana o ka hāʻule iho o kahi mea.
$().dropdown('dispose') Hoʻopau i ka hāʻule iho o kahi mea.

Nā hanana

Hoʻopau ʻia nā hanana hāʻule i lalo i ka ʻeleʻele .dropdown-menumakua a loaʻa iā ia kahi relatedTargetwaiwai, nona ka waiwai o ka mea heleuma e hoʻohuli ana. hide.bs.dropdowna hidden.bs.dropdownhe clickEventwaiwai ko nā hanana (ʻo ia wale nō ke ʻano hanana kumu click) i loaʻa i kahi hanana hanana no ka hanana kaomi.

Hanana wehewehe
show.bs.dropdown Hoʻopau koke ʻia kēia hanana ke kāhea ʻia ke ʻano hana hōʻike.
shown.bs.dropdown Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka hāʻule iho i ka mea hoʻohana (e kali no nā hoʻololi CSS, e hoʻopau).
hide.bs.dropdown Hoʻopau koke ʻia kēia hanana i ka wā i kāhea ʻia ai ke ʻano hide instance.
hidden.bs.dropdown Hoʻopau ʻia kēia hanana i ka pau ʻana o ka hūnā ʻia mai ka mea hoʻohana (e kali no ka hoʻololi CSS, e hoʻopau). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})