Source

Dagiti dropdown

I-toggle dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan ​​dagiti silpo ken dadduma pay babaen ti Bootstrap dropdown plugin.

Panangkita iti pakabuklan

Dagiti dropdown ket mabalin a mabaliwan, dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan ​​dagiti silpo ken dadduma pay. Naaramid dagitoy nga interaktibo babaen ti nairaman a Bootstrap dropdown JavaScript plugin. Ma-toggle dagitoy babaen ti panag-click, saan a babaen ti panag-hover; daytoy ket nairanta a pangngeddeng iti disenio .

Dagiti dropdown ket naibangon iti maysa a maikatlo a partido a biblioteka, ti Popper.js , a mangipaay ti dinamiko a panagposision ken panagduktal ti viewport. Siguraduen nga iraman ti popper.min.js sakbay ti JavaScript ti Bootstrap wenno usaren ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper.js. Ti Popper.js ket saan a maus-usar a mangiposision kadagiti dropdown kadagiti navbar nupay kasta a kas ti dinamiko a panagposision ket saan a kasapulan.

No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js .

Ti pannakagun-od

Ti pagalagadan ti WAI ARIA ket mangikeddeng ti aktual a role="menu"widget , ngem daytoy ket espesipiko kadagiti kasla aplikasion a menu a mangtignay kadagiti panagtignay wenno dagiti panagandar. Dagiti menu ti ARIA ket mabalin laeng nga aglaon kadagiti banag ti menu, dagiti banag ti menu ti kahon ti tsek, dagiti banag ti menu ti buton ti radio, dagiti grupo ti buton ti radio, ken dagiti sub-menu.

Iti sabali a bangir, dagiti dropdown ti Bootstrap ket nadisenio a sapasap ken maipakat kadagiti nadumaduma a kasasaad ken dagiti estruktura ti markup. Kas pagarigan, mabalin ti mangpartuat kadagiti dropdown a naglaon kadagiti kanayonan nga input ken dagiti kontrol ti porma, a kas dagiti tay-ak ti panagbiruk wenno dagiti porma ti panagserrek. Gapu iti daytoy a rason, ti Bootstrap ket saan a mangnamnama (wenno automatiko a manginayon) ti ania man kadagiti roleken dagiti aria-kababalin a kasapulan para kadagiti pudno nga ARIA a menu. Masapul nga iraman dagiti autor dagitoy nga ad-adda nga espesipiko a kababalin a mismo.

Nupay kasta, ti Bootstrap ket mangnayon ti naibangon a suporta para kadagiti kaaduan a pagalagadan a panagtitinnulong ti menu ti teklado, a kas ti abilidad nga aggaraw kadagiti indibidual .dropdown-itemnga elemento babaen ti panagusar kadagiti tulbek ti kursor ken mangiserra ti menu babaen ti ESCtulbek.

Dagiti pagarigan

Balkoten ti toggle ti dropdown (ti buton wenno silpomo) ken ti dropdown menu iti uneg ti .dropdown, wenno sabali nga elemento a mangideklara position: relative;iti . Mabalin a mai-trigger dagiti dropdown manipud <a>wenno <button>dagiti elemento tapno nasaysayaat a maibagay kadagiti mabalin a kasapulam.

Maymaysa a buton

Ania man a single .btnket mabalin a pagbalinen a dropdown toggle nga addaan kadagiti sumagmamano a panagbalbaliw ti markup. Adtoy no kasano a mabalinmo nga ikabil dagitoy nga agtrabaho kadagiti asinoman <button>nga elemento:

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>

Ket addaan kadagiti <a>elemento:

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>

Ti kasayaatan a paset ket mabalinmo nga aramiden daytoy iti ania man a buton a variant, met:

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>

Split ti buton

Kasta met, mangpartuat kadagiti nabingay a buton a dropdown nga addaan iti gangani a kapada a marka a kas dagiti agmaymaysa a buton a dropdown, ngem addaan ti pannakainayon ti .dropdown-toggle-splitpara iti umno a panagsisina iti aglawlaw ti dropdown a caret.

Usarenmi daytoy nga ekstra a klase tapno mapabassit ti horizontal paddingiti agsumbangir a sikigan ti caret iti 25% ken ikkaten ti margin-leftthat's added para kadagiti regular a button dropdown. Dagita nga ekstra a panagbalbaliw pagtalinaedenda a naisentro ti caret iti split button ken mangipaay iti ad-adda a maitutop ti kadakkelna a lugar a maidungpar iti abay ti kangrunaan a buton.

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>

Panag-sizing

Dagiti buton a dropdown ket agtrabaho kadagiti buton ti amin a kadakkel, a mairaman dagiti default ken split a dropdown a buton.

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

Dagiti Direksion

Dropup nga

Mangtignay kadagiti dropdown a menu iti ngato dagiti elemento babaen ti pananginayon .dropupiti nagannak nga elemento.

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 nga

Mangtignay kadagiti dropdown a menu iti kannawan dagiti elemento babaen ti pananginayon .droprightiti nagannak nga elemento.

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 nga

Mangtignay kadagiti dropdown a menu iti kannigid dagiti elemento babaen ti pananginayon .dropleftiti nagannak nga elemento.

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>

Iti pakasaritaan dagiti linaon ti dropdown a menu ket masapul a dagiti silpo, ngem saanen a kasta ti kaso ti v4. Ita mabalinmo nga opsional nga usaren <button>dagiti elemento kadagiti dropdown-mo imbes a ti laeng <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>

Mabalinmo pay ti mangpartuat kadagiti saan nga interaktibo a dropdown a banag babaen ti .dropdown-item-text. Mariknam a nawaya nga estilo nga ad-adda pay babaen dagiti kostumbre a CSS wenno dagiti utilidad ti teksto.

Dropdown nga teksto ti aytem Aksion Sabali pay nga aramid Sabali pay ditoy 
<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>

Aktibo

Inayon .activekadagiti banag iti dropdown tapno estilo dagitoy a kas aktibo .

Regular nga link Aktibo nga link Sabali pay a silpo 
<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>

Awanan ti kabaelan

Inayon .disabledkadagiti banag iti dropdown tapno estilo dagitoy a kas baldado .

Regular nga link Nabaldado ti silpo Sabali pay a silpo 
<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>

Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Inayon .dropdown-menu-rightiti a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu.

Ulo nga agpangato! Dagiti dropdown ket naiposision gapu ti Popper.js (malaksid no dagitoy ket linaon ti maysa 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>

Responsibo a panagtunos

No kayatmo nga usaren ti sumungbat a panagtunos, balbaliwan ti dinamiko a panagposision babaen ti pananginayon ti data-display="static"attribute ken usarem dagiti sungbat a klase ti panagduduma.

Tapno maitunos iti kannawan ti dropdown menu iti naited a breakpoint wenno dakdakkel, inayon ti .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>

Tapno maitunos ti kannigid a dropdown menu iti naited a breakpoint wenno dakdakkel, inayon .dropdown-menu-rightken .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>

Imutektekanyo a saanmo a kasapulan ti manginayon ti data-display="static"attribute kadagiti dropdown a buton kadagiti navbar, gapu ta ti Popper.js ket saan a maus-usar kadagiti navbar.

Linaon ti menu

Dagiti ulo

Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.

Dropdown nga ulo
Aksion Sabali pay nga aramid 
<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>

Dagiti Mangbingaybingay

Pagsisinaen dagiti grupo dagiti mainaig a banag ti menu babaen ti divider.

Aksion Sabali pay nga aramid Sabali pay ditoy
Naisina a silpo 
<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>

Teksto

Ikabil ti ania man a nawaya a porma a teksto iti uneg ti dropdown a menu nga addaan iti teksto ken agusar kadagiti utilidad ti panagsisina . Imutektekanyo a kasapulam la ketdi dagiti kanayonan nga estilo ti panagdakkel tapno malapdan ti kalawa ti menu.

Sumagmamano a pagarigan a teksto a nawaya nga agayus iti uneg ti dropdown menu.

Ket daytoy ti ad-adda a pagarigan a teksto.

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

Dagiti Pormas

Mangikabilka iti porma iti uneg ti dropdown menu, wenno aramidem dayta a dropdown menu, ken agusarka kadagiti margin wenno padding utilities tapno maitedmo iti negatibo nga espasio a kasapulam.

Baro iti aglawlaw ditoy? Agpirma Nalipatan mo ti password? 
<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>

Usaren ti data-offsetwenno data-referencetapno baliwan ti lokasion ti dropdown.

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>

Panagusar

Babaen dagiti kabileg ti datos wenno JavaScript, ti dropdown a plugin ket mangbalbaliw ti nailemmeng a linaon (dagiti dropdown a menu) babaen ti panangi-toggle ti .showklase iti banag ti listaan ​​dagiti nagannak. Ti data-toggle="dropdown"attribute ket agpannuray para iti panagserra kadagiti dropdown a menu iti maysa a lebel ti aplikasion, isu a nasayaat nga ideya a kanayon nga usaren daytoy.

Kadagiti touch-enabled nga alikamen, ti pananglukat iti dropdown ket manginayon kadagiti empty ( $.noop) mouseoverhandler kadagiti dagus nga annak ti <body>elemento. Daytoy nga aminen a naalas a hack ket kasapulan tapno agtrabaho iti aglawlaw ti maysa a quirk iti iOS’ event delegation , a no saan ket manglapped iti maysa a tap iti sadinoman iti ruar ti dropdown manipud iti panangtignay iti kodigo a mangiserra iti dropdown. Apaman a naserraan ti dropdown, mouseovermaikkat dagitoy a kanayonan nga empty handler.

Babaen kadagiti attribute ti datos

Inayon data-toggle="dropdown"iti link wenno buton tapno mai-toggle ti dropdown.

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

Babaen ti JavaScript

Tawagan dagiti dropdown babaen ti JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"kasapulan pay laeng

Uray no awagam ti dropdownmo babaen ti JavaScript wenno imbes ketdi usarem ti data-api, data-toggle="dropdown"ket kanayon a kasapulan nga adda iti trigger element ti dropdown.

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset="".

Nagan Tipo Default Panangiladawan
offset nga numero | kuerdas nga | amad 0 nga

Offset ti dropdown relatibo iti targetna.

No ti maysa a panagandar ket maus-usar a mangikeddeng ti offset, daytoy ket maawagan babaen ti maysa a banag a naglaon ti datos ti offset a kas ti umuna nga argumentona. Ti function ket masapul nga isublina ti maysa a banag nga addaan iti isu met laeng nga estruktura. Ti mangtignay nga elemento a DOM a nodo ket maipasa a kas ti maikadua nga argumento.

Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ti Popper.js .
ibaliktad boolean nga agpayso Bay-an ti Dropdown nga ag-flip no adda panagtuon iti reperensia nga elemento. Para iti ad-adu pay nga impormasion kitaen dagiti flip docs ti Popper.js .
beddeng ti pagbeddengan kuerdas nga | elemento 'ag-scrollParent'. Beddeng ti limitasion ti panaglablabes ti dropdown a menu. Awaten dagiti pateg ti 'viewport', 'window', 'scrollParent', wenno ti reperensia ti HTMLElement (JavaScript laeng). Para iti ad-adu pay nga impormasion kitaen ti preventOverflow docs ti Popper.js .
reperensia kuerdas nga | elemento 'ag-toggle'. Reperensia nga elemento ti dropdown menu. Awaten dagiti pateg ti 'toggle', 'parent', wenno ti reperensia ti HTMLElement. Para iti ad-adu pay nga impormasion kitaen ti referenceObject docs ti Popper.js .
ipakita kuerdas 'dinamiko'. Babaen ti default, usarenmi ti Popper.js para iti dinamiko a panagposision. Ibaldado daytoy babaen ti static.
popperKonfig null nga | banag nawaswas Tapno baliwan ti default a Popper.js a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper.js

Imutektekanyo no boundarynaikeddeng iti ania man a pateg malaksid ti 'scrollParent', ti estilo position: staticket maipakat iti .dropdownpagkargaan.

Dagiti Pamay-an

Wagas Panangiladawan
$().dropdown('toggle') I-toggle ti dropdown menu ti naited a navbar wenno tabbed navigation.
$().dropdown('show') Ipakita ti dropdown menu ti naited a navbar wenno tabbed navigation.
$().dropdown('hide') Ilemmeng ti dropdown menu ti naited a navbar wenno tabbed navigation.
$().dropdown('update') Ipabaro ti posision ti dropdown ti maysa nga elemento.
$().dropdown('dispose') Dadaelenna ti dropdown ti maysa nga elemento.

Dagiti Pasamak

Amin a dropdown a pasamak ket maipaputok iti .dropdown-menunagannak nga elemento ti ' ken addaan iti relatedTargettagikua, a ti pategna ket ti agbalbaliw nga elemento ti angkla. hide.bs.dropdownken hidden.bs.dropdowndagiti pasamak ket addaan iti clickEventtagikua (no laeng ti orihinal a kita ti pasamak ket click) a naglaon ti Bagay ti Pasamak para iti pasamak ti panagpidut.

Pasamak Panangiladawan
show.bs.dropdown Daytoy a pasamak ket agputok a dagus no ti pamay-an ti show instance ket maawagan.
shown.bs.dropdown Daytoy a pasamak ket mapaputok no ti dropdown ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto).
hide.bs.dropdown Daytoy a pasamak ket dagus a mapaputok no ti pamay-an ti panaglemmeng ti pagarigan ket naawagan.
hidden.bs.dropdown Daytoy a pasamak ket mapaputok no ti dropdown ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS, tapno makompleto). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})