in English

Litheohelang

Fetolela likoahelo tsa maemo bakeng sa ho hlahisa manane a likhokahano le tse ling ka plugin ea Bootstrap dropdown.

Kakaretso

Li-dropdown li ka fetoha, li koaheloa ka maemo bakeng sa ho hlahisa manane a lihokelo le tse ling. Li entsoe hore li sebelisane le plugin ea JavaScript e kenyellelitsoeng ea Bootstrap. Li toggle ka ho tobetsa, eseng ka ho hover; ena ke qeto e entsoeng ka boomo .

Li-dropdown li hahiloe holim'a laeborari ea batho ba boraro, Popper , e fanang ka boemo bo matla le ho lemoha pono. Etsa bonnete ba hore o kenyelletsa popper.min.js pele ho Bootstrap's JavaScript kapa sebelisa bootstrap.bundle.min.js/ bootstrap.bundle.jse nang le Popper. Popper ha e sebelisoe ho beha li-dropdown ho li-navbars leha ho le joalo ho sa hlokahale hore ho behoe maemo ka matla.

Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js .

Ho fihlella

Tekanyetso ea WAI ARIA e hlalosa role="menu"widget ea 'nete , empa sena se tobane le menyetla e ts'oanang le ts'ebeliso e hlahisang liketso kapa mesebetsi. Li-menu tsa ARIA li ka ba le lintho tsa menyetla feela, li-menu tsa li-checkbox, li-konopo tsa seea-le-moea, lihlopha tsa likonopo tsa seea-le-moea, le li-menus tse nyane.

Li-dropdown tsa Bootstrap, ka lehlakoreng le leng, li etselitsoe ho ba tse akaretsang le tse sebetsang maemong a fapaneng le meaho ea li-markup. Mohlala, hoa khonahala ho theha li-dropdown tse nang le lintlha tse eketsehileng le litsamaiso tsa liforomo, joalo ka libaka tsa ho batla kapa liforomo tsa ho kena. Ka lebaka lena, Bootstrap ha e lebelle (kapa ho eketsa ka bo eona) efe kapa efe ea rolelitšobotsi aria-tse hlokahalang bakeng sa menyetla ea 'nete ea ARIA . Bangoli ba tla tlameha ho kenyelletsa litšobotsi tsena ka bobona.

Leha ho le joalo, Bootstrap e eketsa ts'ehetso e hahelletsoeng bakeng sa litšebelisano tse ngata tsa li-keyboard tse tloaelehileng, joalo ka bokhoni ba ho tsamaea ka har'a .dropdown-itemlikarolo tsa motho ka mong u sebelisa linotlolo tsa cursor le ho koala menyu ka ESCsenotlolo.

Mehlala

Qetella toggle ea dropdown (konopo kapa sehokelo sa hau) le menu e theoha ka har'a .dropdown, kapa ntho e 'ngoe e phatlalatsang position: relative;. Li-dropdown li ka hlahisoa ho tsoa ho <a>kapa <button>likarolo ho lekana litlhoko tsa hau hantle.

Konopo e le 'ngoe

E 'ngoe le e 'ngoe .btne ka fetoloa mokhoa oa ho theoha ka liphetoho tse ling. Mona ke hore na u ka li sebelisa joang ka <button>likarolo life kapa life:

Ketso Ketso enngwe Ntho e 'ngoe mona 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

'Me ka <a>likarolo:

Ketso Ketso enngwe Ntho e 'ngoe mona 
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

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

Karolo e molemohali ke hore o ka etsa sena ka mofuta ofe kapa ofe oa konopo, hape:

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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>

Konopo ea ho arola

Ka mokhoa o ts'oanang, theha li-dropdown tsa konopo tse arohaneng tse nang le letšoao le ts'oanang le likonopo tse theohang, empa ka kenyelletso ea .dropdown-toggle-splitsebaka se nepahetseng ho potoloha sebaka sa tlhokomelo.

Re sebelisa sehlopha sena se eketsehileng ho fokotsa sebaka se otlolohileng paddingka mahlakoreng a mabeli a tlhokomelo ka 25% le ho tlosa se margin-lefteketsoang bakeng sa ho theoha ha likonopo tse tloaelehileng. Liphetoho tseo tse ling li boloka tlhokomelo e tsepamisitsoe ka har'a konopo ea petsoha 'me e fana ka sebaka sa ho otla se lekaneng se haufi le konopo e kholo.

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- 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-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>

Boholo

Likonopo tse theohang li sebetsa ka likonopo tsa boholo bohle, ho kenyeletsoa li-button tse theolelang le tse arohaneng.

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- 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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- 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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Litsela

Tloha

Kenya lenane la litheolelo tse kaholimo ho likarolo ka ho kenyelletsa .dropupkarolo ea motsoali.

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Lahlela li-menu tse theohang ka letsohong le letona la likarolo ka ho kenyelletsa .droprightkarolo ea motsoali.

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

Hlahisa dimenu tse theohang ka ho le letshehadi la dielemente ka ho kenya .dropleftkarolo ya motswadi.

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>

Likahare tsa "menu" tsa nalane li ne li tlameha ho ba lihokela, empa ha ho sa le joalo ka v4. Joale u ka khetha ho sebelisa <button>likarolo ho li-dropdown tsa hau ho fapana le <a>s.

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

U ka boela ua etsa lintho tse theolelang tse sa sebelisaneng ka .dropdown-item-text. Ikutloe u lokolohile ho etsa setaele ho feta ka CSS ea tloaelo kapa lisebelisoa tsa mongolo.

Mongolo o theoha Ketso Ketso enngwe Ntho e 'ngoe mona 
<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>

E sebetsa

Kenya .activelinthong tse hlahang lethathamong la litheolelo ho li etsa hore li sebetse .

Sehokelo sa kamehla Sehokelo se sebetsang Sehokelo se seng 
<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>

E holofetse

Kenya .disabledlinthong tse hlahang lethathamong la litheolelo ho li etsa joalo ka ha li koaletsoe .

Sehokelo sa kamehla Sehokelo se koetsoeng Sehokelo se seng 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Ka mokhoa o ikhethileng, lethathamo la li-dropdown le beoa ka bo eona 100% ho tloha holimo le ka lehlakoreng le letšehali la motsoali oa eona. Eketsa .dropdown-menu-rightho a .dropdown-menuho le letona lokisetsa menu e theoha.

Hlokomela! Li-dropdown li behiloe ka lebaka la Popper (ntle le ha li le ka har'a navbar). 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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 tsamaisana le karabelo

Haeba u batla ho sebelisa tekano e arabelang, tima boemo bo matla ka ho eketsa data-display="static"semelo le ho sebelisa litlelase tse arabelang.

Ho hokahanya lethathamo la li- dropdown le sebaka se fanoeng kapa se seholoanyane, eketsa .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-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>

Ho ikamahanya ka ho le letšehali ho menu e theoha le sebaka se fanoeng kapa se seholoanyane, eketsa .dropdown-menu-rightle .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-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>

Hlokomela hore ha ho hlokahale hore u kenye data-display="static"li-buttons ho li-navbar, kaha Popper ha e sebelisoe ho navbar.

Likahare tsa menyu

Lihlooho

Kenya hlooho ho beha likarolo tsa liketso ho menu efe kapa efe e theolelang.

Hlooho e theoha
Ketso Ketso enngwe 
<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>

Ba arolang

Arola lihlopha tsa lintho tse amanang le menu ka karohano.

Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<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>

Mongolo

Beha mongolo o fe kapa o fe ka har'a lethathamo la litheolelo 'me u sebelise lisebelisoa tsa sebaka . Hlokomela hore mohlomong u tla hloka mekhoa e meng ea ho etsa boholo ho fokotsa bophara ba menu.

Mohlala o mong oa mongolo o hlahang mahala ka har'a lethathamo la litheolelo.

'Me sena ke ho feta mohlala mongolo.

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

Mefuta

Beha foromo ka har'a menu e theoha, kapa u e etse lethathamong la li-dropdown, 'me u sebelise lisebelisoa tsa marang-rang kapa tsa padding ho e fa sebaka se fosahetseng seo u se hlokang.

E ncha sebakeng seo? ngolisa U lebetse phasewete? 
<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>

Sebelisa data-offsetkapa data-referenceho fetola sebaka sa ho theoha.

Ketso Ketso enngwe Ntho e 'ngoe mona
Ketso Ketso enngwe Ntho e 'ngoe mona
Sehokelo se arohaneng 
<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Tšebeliso

Ka litšoaneleho tsa data kapa JavaScript, plugin e theoha e fetola litaba tse patiloeng (menu e theohang) ka ho fetolela .showsehlopha ho motsoali .dropdown-menu. Tšobotsi e data-toggle="dropdown"ts'epiloe bakeng sa ho koala limmapa tse theohang boemong ba ts'ebeliso, ka hona ke mohopolo o motle ho e sebelisa kamehla.

Ho lisebelisoa tse nolofalitsoeng ke ho ama, ho bula ho theoha ho eketsa lisebelisuoa tse se nang letho ( $.noop) mouseoverho bana ba haufi ba <body>ntho eo. Ts'ebetso ena e mpe e ea hlokahala ho sebetsana le quirk ho baemeli ba ketsahalo ea iOS , e neng e ka thibela pompo kae kapa kae ka ntle ho metheo hore e se ke ea qala khoutu e koalang ho theoha. Hang ha dropdown e koetsoe, lisebelisoa tsena tse ling tse se nang letho mouseoverlia tlosoa.

Ka litšobotsi tsa data

Kenya data-toggle="dropdown"sehokelong kapa konopong ho totobetsa ho theoha.

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

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"e ntse e hlokahala

Ho sa tsotelehe hore na u letsetsa ho theoha ha hau ka JavaScript kapa ho e-na le hoo u sebelisa data-api, data-toggle="dropdown"kamehla ho hlokahala hore u be teng karolong ea "trigger" e theoha.

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset="".

Lebitso Mofuta Ea kamehla Tlhaloso
offset nomoro | khoele | tshebetso 0

Offset ea ho theoha ho amanang le sepheo sa eona.

Ha ts'ebetso e sebelisoa ho khetholla offset, e bitsoa ka ntho e nang le data ea offset e le khang ea eona ea pele. Mosebetsi o tlameha ho khutlisa ntho e nang le sebopeho se ts'oanang. The triggering element DOM node e fetisoa e le khang ea bobeli.

Ho fumana lintlha tse ling, sheba ho Popper's offset docs .
phephisa boolean 'nete Lumella Dropdown hore e phebehe haeba ho ka ba le ho fetellana ho element element. Ho fumana lintlha tse ling etela Popper's flip docs .
moeli khoele | element 'scrollParent' Moeli oa litšitiso tse tsoang ho menu e theoha. E amohela boleng ba 'viewport', 'window', 'scrollParent', kapa HTMLElement reference (JavaScript feela). Ho fumana lintlha tse ling, sheba litokomane tsa Popper tsa preventOverflow .
sesupo khoele | element 'fetola' Reference element ea menu e theoha. E amohela boleng ba 'toggle', 'parent', kapa HTMLElement reference. Ho fumana lintlha tse ling, sheba ho Popper's referenceObject docs .
pontsho khoele 'dynamic' Ka ho sa feleng, re sebelisa Popper bakeng sa boemo bo matla. Tlosa sena ka static.
popperConfig null | ntho lefeela Ho fetola tlhophiso ea kamehla ea Bootstrap ea Popper, bona tlhophiso ea Popper

Ela hloko ha boundarye behiloe boleng bofe kapa bofe ntle le 'scrollParent', setaele position: staticse sebelisoa .dropdownsetshelong.

Mekhoa

Mokhoa Tlhaloso
$().dropdown('toggle') E fetola menyetla ea ho theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.
$().dropdown('show') E bonts'a menu e theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.
$().dropdown('hide') E pata lenane la ho theoha la navbar e fanoeng kapa navigation e nang le li-tabbed.
$().dropdown('update') E kaonefatsa boemo ba ho theoha ha element.
$().dropdown('dispose') E senya ho theoha ha element.

Liketsahalo

Liketsahalo tsohle tse theohang li fetisetsoa ho karolo ea .dropdown-menumotsoali 'me li na le relatedTargetthepa, eo boleng ba eona e leng toggling anchor element. hide.bs.dropdown'me hidden.bs.dropdownliketsahalo li na le clickEventthepa (feela ha mofuta oa ketsahalo ea pele e le click) e nang le Sepheo sa Ketsahalo bakeng sa ketsahalo ea ho tobetsa.

Ketsahalo Tlhaloso
show.bs.dropdown Ketsahalo ena e tuka hang hang ha mokhoa oa mohlala oa pontšo o bitsoa.
shown.bs.dropdown Ketsahalo ena e ts'oaroa ha ho theoha ho bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
hide.bs.dropdown Ketsahalo ena e lelekoa hang hang ha mokhoa oa ho pata o se o bitsoa.
hidden.bs.dropdown Ketsahalo ena e ts'oaroa ha ho theoha ho felile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})