Source

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 bang, Popper.js , 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.js. Popper.js ha e sebelisoe ho beha li-dropdown ho li-navbars leha ho le joalo ho sa hlokahale hore ho behoe boemo bo itseng.

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:

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>

'Me ka <a>likarolo:

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>

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

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>

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.

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>

Boholo

Likonopo tse theohang li sebetsa ka likonopo tsa boholo bohle, ho kenyeletsoa li-button tse theolelang le tse 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-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>

Litsela

Tloha

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

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

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

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>

Dropleft

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

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>

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

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.

Sengolwa sa ntho e 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

Eketsa .disabledlinthong tse hlahang lethathamong 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" href="#" tabindex="-1" aria-disabled="true">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.js (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-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 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-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>

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

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

Likahare tsa menyu

Lihlooho

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

Sehlooho se 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 lethathamo la litheolelo, kapa u e etse lethathamong la ho theoha, '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.

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>

Tšebeliso

Ka litšoaneleho tsa data kapa JavaScript, plugin e theohang e fetola litaba tse patiloeng (menu e theohang) ka ho fetola .showsehlopha lethathamong la batsoali. 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 lisebelisoa 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 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>

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 e 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.js'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, sheba ho Popper.js'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 ho Popper.js's preventOverflow docs .
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.js's referenceObject docs .
pontsho khoele 'dynamic' Ka ho sa feleng, re sebelisa Popper.js bakeng sa boemo bo matla. Tlosa sena ka static.
popperConfig null | ntho lefeela Ho fetola tlhophiso ea kamehla ea Bootstrap ea Popper.js, bona tlhophiso ea Popper.js

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