Source

Awọn idasile

Yipada awọn agbekọja ọrọ-ọrọ fun iṣafihan awọn atokọ ti awọn ọna asopọ ati diẹ sii pẹlu ohun itanna silẹ Bootstrap.

Akopọ

Awọn isubu jẹ iyipada, awọn agbekọja ọrọ-ọrọ fun iṣafihan awọn atokọ ti awọn ọna asopọ ati diẹ sii. Wọn jẹ ibaraenisepo pẹlu ohun itanna JavaScript dropdown Bootstrap to wa. Wọn ti yipada nipasẹ titẹ, kii ṣe nipa gbigbe; eyi jẹ ipinnu apẹrẹ ero inu .

Awọn idasile ti wa ni itumọ ti lori ile-ikawe ẹnikẹta, Popper.js , eyiti o pese ipo agbara ati wiwa wiwo wiwo. Rii daju pe o ni popper.min.js ṣaaju Bootstrap's JavaScript tabi lo bootstrap.bundle.min.js/ bootstrap.bundle.jseyiti o ni Popper.js ninu. Popper.js ko lo si ipo awọn silẹ ni awọn navbars botilẹjẹpe ipo ti o ni agbara ko nilo.

Ti o ba n kọ JavaScript wa lati orisun, o niloutil.js .

Wiwọle

Boṣewa WAI ARIArole="menu" n ṣalaye ẹrọ ailorukọ gangan , ṣugbọn eyi jẹ pato si awọn akojọ aṣayan ohun elo ti o nfa awọn iṣe tabi awọn iṣẹ. Awọn akojọ aṣayan ARIA le ni awọn ohun akojọ aṣayan nikan, awọn apoti akojọ aṣayan apoti, awọn ohun akojọ aṣayan bọtini redio, awọn ẹgbẹ bọtini redio, ati awọn akojọ aṣayan-ipin.

Bootstrap's dropdowns, ni ida keji, jẹ apẹrẹ lati jẹ jeneriki ati iwulo si ọpọlọpọ awọn ipo ati awọn ẹya isamisi. Fun apẹẹrẹ, o ṣee ṣe lati ṣẹda awọn silẹ ti o ni awọn igbewọle afikun ninu ati awọn idari fọọmu, gẹgẹbi awọn aaye wiwa tabi awọn fọọmu iwọle. Fun idi eyi, Bootstrap ko nireti (tabi ṣafikun laifọwọyi) eyikeyi roleati awọn aria-abuda ti o nilo fun awọn akojọ aṣayan ARIA otitọ. Awọn onkọwe yoo ni lati ṣafikun awọn abuda kan pato diẹ sii funrararẹ.

Bibẹẹkọ, Bootstrap ṣe afikun atilẹyin ti a ṣe sinu pupọ julọ awọn ibaraenisọrọ akojọ aṣayan bọtini itẹwe, gẹgẹbi agbara lati gbe nipasẹ awọn .dropdown-itemeroja kọọkan nipa lilo awọn bọtini kọsọ ati pa akojọ aṣayan pẹlu ESCbọtini.

Awọn apẹẹrẹ

Fi ipari si toggle dropdown (bọtini tabi ọna asopọ rẹ) ati akojọ aṣayan silẹ laarin .dropdown, tabi nkan miiran ti o sọ position: relative;. Awọn idasile le jẹ okunfa lati <a>tabi <button>awọn eroja lati baamu awọn iwulo agbara rẹ dara julọ.

Bọtini ẹyọkan

Eyikeyi ẹyọkan .btnle yipada si yiyi silẹ silẹ pẹlu diẹ ninu awọn iyipada isamisi. Eyi ni bii o ṣe le fi wọn ṣiṣẹ pẹlu awọn <button>eroja mejeeji:

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>

Ati pẹlu <a>awọn eroja:

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>

Apakan ti o dara julọ ni pe o le ṣe eyi pẹlu iyatọ bọtini eyikeyi, paapaa:

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>

Bọtini pipin

Bakanna, ṣẹda awọn ifasilẹ bọtini pipin pẹlu isamisi isamisi kanna bi awọn silẹ bọtini ẹyọkan, ṣugbọn pẹlu afikun .dropdown-toggle-splitfun aye to dara ni ayika itọju sisọ silẹ.

A lo kilasi afikun yii lati dinku petele paddingni ẹgbẹ mejeeji ti itọju nipasẹ 25% ati yọkuro margin-lefteyiti o ṣafikun fun awọn silẹ bọtini deede. Awọn iyipada afikun wọnyẹn jẹ ki abojuto dojukọ ni bọtini pipin ati pese agbegbe ti o ni iwọn deede diẹ sii lẹgbẹẹ bọtini akọkọ.

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>

Titobi

Bọtini sisọ silẹ ṣiṣẹ pẹlu awọn bọtini ti gbogbo titobi, pẹlu aiyipada ati awọn bọtini itusilẹ pipin.

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

Awọn itọnisọna

Sisọ silẹ

Nfa awọn akojọ aṣayan silẹ loke awọn eroja nipa fifi kun .dropupsi eroja obi.

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

Nfa awọn akojọ aṣayan silẹ ni apa ọtun ti awọn eroja nipa fifi kun .droprightsi eroja obi.

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>

Sisọ silẹ

Nfa awọn akojọ aṣayan silẹ ni apa osi ti awọn eroja nipa fifi kun .dropleftsi eroja obi.

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>

Awọn akoonu akojọ aṣayan silẹ itan-akọọlẹ gbọdọ jẹ awọn ọna asopọ, ṣugbọn iyẹn kii ṣe ọran mọ pẹlu v4. Bayi o le ni iyan lo <button>awọn eroja ninu rẹ dropdowns dipo ti o kan <a>s.

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

O tun le ṣẹda awọn ohun kan silẹ ti kii ṣe ibaraẹnisọrọ pẹlu .dropdown-item-text. Lero lati ni ara siwaju pẹlu CSS aṣa tabi awọn ohun elo ọrọ.

Ọrọ ohun kan silẹ Iṣe Iṣe miiran Nkankan miran nibi 
<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>

Ti nṣiṣe lọwọ

Fikun -un .activesi awọn ohun kan ninu sisọ silẹ lati ṣe ara wọn bi lọwọ .

Ọna asopọ deede Ti nṣiṣe lọwọ ọna asopọ Ọna asopọ miiran 
<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>

Alaabo

Ṣafikun .disabledawọn ohun kan ninu sisọ silẹ lati ṣe ara wọn bi alaabo .

Ọna asopọ deede Alaabo ọna asopọ Ọna asopọ miiran 
<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>

Nipa aiyipada, akojọ aṣayan silẹ ti wa ni ipo laifọwọyi 100% lati oke ati ni apa osi ti obi rẹ. Fikun -un .dropdown-menu-rightsi .dropdown-menuapa ọtun mö akojọ aṣayan silẹ.

Efeti sile! Dropdowns wa ni ipo ọpẹ si Popper.js (ayafi nigba ti won ti wa ni o wa ninu a 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>

Titete idahun

Ti o ba fẹ lo titete idahun, mu ipo ti o ni agbara ṣiṣẹ nipa fifi abuda kun data-display="static"ati lo awọn kilasi iyatọ idahun.

Lati mö ọtun akojọ aṣayan silẹ pẹlu aaye fifọ ti a fun tabi tobi, ṣafikun .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>

Lati mö apa osi akojọ aṣayan silẹ pẹlu aaye fifọ ti a fun tabi tobi, ṣafikun .dropdown-menu-rightati .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 akiyesi pe o ko nilo lati ṣafikun abuda kan data-display="static"si awọn bọtini sisọ silẹ ni awọn navbars, nitori Popper.js ko lo ninu awọn navbars.

Akojọ akoonu

Awọn akọle

Ṣafikun akọsori kan si aami awọn apakan awọn iṣe ni eyikeyi akojọ aṣayan silẹ.

Akọsori silẹ
Iṣe Iṣe miiran 
<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>

Awọn onipinpin

Awọn ẹgbẹ ọtọtọ ti awọn ohun akojọ aṣayan ti o jọmọ pẹlu onipinpin.

Iṣe Iṣe miiran Nkankan miran nibi
Iyatọ ọna asopọ 
<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>

Ọrọ

Fi ọrọ fọọmu eyikeyi sinu akojọ aṣayan silẹ pẹlu ọrọ ati lo awọn ohun elo ayeraye . Ṣe akiyesi pe o ṣeese yoo nilo awọn aṣa iwọn afikun lati ṣe idiwọ iwọn akojọ aṣayan.

Diẹ ninu awọn ọrọ apẹẹrẹ ti nṣàn ni ọfẹ laarin akojọ aṣayan silẹ.

Ati pe eyi jẹ ọrọ apẹẹrẹ diẹ sii.

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

Awọn fọọmu

Fi fọọmu kan sinu akojọ aṣayan silẹ, tabi ṣe sinu akojọ aṣayan silẹ, ati lo ala tabi awọn ohun elo padding lati fun ni aaye odi ti o nilo.

Titun ni ayika ibi? forukọsilẹ Gbagbe ọrọ aṣina bi? 
<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>

Lo data-offsettabi data-referencelati yi ipo silẹ silẹ.

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>

Lilo

Nipasẹ awọn abuda data tabi JavaScript, ohun itanna sisọ silẹ yipada akoonu ti o farapamọ (awọn akojọ aṣayan silẹ) nipa yiyi .showkilaasi lori ohun atokọ obi. Ẹya data-toggle="dropdown"naa gbarale fun pipade awọn akojọ aṣayan silẹ ni ipele ohun elo, nitorinaa o jẹ imọran ti o dara lati lo nigbagbogbo.

Lori awọn ẹrọ ti a fi ọwọ kan, ṣiṣi silẹ silẹ yoo ṣafikun ofo ( $.noop) mouseoverawọn olutọju si awọn ọmọ lẹsẹkẹsẹ ti <body>nkan naa. Eleyi Admittedly ilosiwaju gige jẹ pataki lati ṣiṣẹ ni ayika a quirk ni iOS' iṣẹlẹ aṣoju , eyi ti yoo bibẹkọ ti se kan tẹ ni kia kia nibikibi ti ita ti awọn dropdown lati nfa awọn koodu ti o tilekun awọn dropdown. Ni kete ti awọn dropdown ti wa ni pipade, awọn afikun sofo mouseovermimu ti wa ni kuro.

Nipasẹ awọn abuda data

Ṣafikun data-toggle="dropdown"si ọna asopọ kan tabi bọtini lati yi jisilẹ silẹ.

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

Nipasẹ JavaScript

Pe awọn silẹ nipasẹ JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"si tun beere

Laibikita boya o pe dropdown rẹ nipasẹ JavaScript tabi dipo lo data-api, data-toggle="dropdown"nigbagbogbo nilo lati wa lori ipin okunfa ti sisọ silẹ.

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-offset="".

Oruko Iru Aiyipada Apejuwe
aiṣedeede nọmba | okun | iṣẹ 0

Aiṣedeede ti sisọ silẹ ni ibatan si ibi-afẹde rẹ.

Nigbati a ba lo iṣẹ kan lati pinnu aiṣedeede, a pe pẹlu ohun kan ti o ni data aiṣedeede bi ariyanjiyan akọkọ rẹ. Iṣẹ naa gbọdọ da ohun kan pada pẹlu eto kanna. Ipin DOM ti o nfa ti kọja bi ariyanjiyan keji.

Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper.js .
isipade boolian ooto Gba silẹ silẹ lati yi pada ni ọran ti agbekọja lori eroja itọkasi. Fun alaye diẹ sii tọka si awọn iwe aṣẹ isipade Popper.js .
ààlà okun | eroja 'yi lọ Obi' Ààlà ìkálọ́wọ́kò àkúnwọ́sílẹ̀ ti àtòjọ ìsokọ̀sílẹ̀. Gba awọn iye ti 'viewport', 'window', 'scrollParent', tabi itọkasi HTMLElement (JavaScript nikan). Fun alaye diẹ sii tọka si Popper.js's preventOverflow docs .
itọkasi okun | eroja 'yipada' Itọkasi ano ti awọn dropdown akojọ. Gba awọn iye ti 'toggle', 'parent', tabi itọkasi HTMLElement. Fun alaye diẹ sii tọka si awọn iwe aṣẹ itọkasiObject ti Popper.js .
ifihan okun 'ti o ni agbara' Nipa aiyipada, a lo Popper.js fun ipo ti o ni agbara. Mu eyi ṣiṣẹ pẹlu static.
popperConfig asan | nkan asan Lati yi Bootstrap aiyipada Popper.js konfigi pada, wo iṣeto Popper.js

Akiyesi nigbati boundaryo ti ṣeto si eyikeyi iye miiran ju 'scrollParent', ara ti position: staticwa ni loo si awọn .dropdowneiyan.

Awọn ọna

Ọna Apejuwe
$().dropdown('toggle') Yi akojọ aṣayan-silẹ ti navbar ti a fun tabi lilọ kiri taabu pada.
$().dropdown('show') Ṣe afihan akojọ aṣayan silẹ ti navbar ti a fun tabi lilọ kiri taabu.
$().dropdown('hide') Tọju akojọ aṣayan silẹ ti navbar ti a fun tabi lilọ kiri taabu.
$().dropdown('update') Ṣe imudojuiwọn ipo sisọ silẹ eroja kan.
$().dropdown('dispose') Pa ohun ano ká dropdown.

Awọn iṣẹlẹ

Gbogbo dropdown iṣẹlẹ ti wa ni kuro lenu ise ni .dropdown-menu's obi ano ati ki o ni a relatedTargetohun ini, ti iye ni toggling oran ano. hide.bs.dropdownati hidden.bs.dropdownawọn iṣẹlẹ ni ohun clickEvent-ini (nikan nigbati iru iṣẹlẹ atilẹba jẹ click) ti o ni Ohun iṣẹlẹ kan fun iṣẹlẹ tẹ.

Iṣẹlẹ Apejuwe
show.bs.dropdown Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni.
shown.bs.dropdown Iṣẹlẹ yii jẹ ina nigbati sisọ silẹ ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS, lati pari).
hide.bs.dropdown Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna apẹẹrẹ pamọ ti pe.
hidden.bs.dropdown Iṣẹlẹ yii jẹ ina nigbati sisọ silẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS, lati pari). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})