in English

Mga dropdown

I-toggle ang mga overlay sa konteksto para sa pagpakita sa mga lista sa mga link ug uban pa gamit ang Bootstrap dropdown plugin.

Overview

Ang mga dropdown kay ma-toggle, contextual overlay para sa pagpakita sa mga lista sa mga link ug uban pa. Gihimo sila nga interactive sa gilakip nga Bootstrap dropdown JavaScript plugin. Gibalhin sila pinaagi sa pag-klik, dili pinaagi sa pag-hover; kini usa ka tinuyo nga desisyon sa disenyo .

Ang mga dropdown gitukod sa usa ka ikatulo nga partido nga librarya, Popper , nga naghatag dinamikong pagpoposisyon ug pagtan-aw sa viewport. Siguruha nga iapil ang popper.min.js sa wala pa ang JavaScript sa Bootstrap o paggamit bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay sulud nga Popper. Ang Popper wala gigamit sa pagpahimutang sa mga dropdown sa mga navbar bisan kung dili kinahanglan ang dinamikong pagpoposisyon.

Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .

Accessibility

Ang WAI ARIA nga sumbanan naghubit sa usa ka aktuwal nga role="menu"widget , apan kini espesipiko sa mga menu nga sama sa aplikasyon nga nagpalihok sa mga aksyon o mga gimbuhaton. Ang mga menu sa ARIA mahimo ra nga adunay mga butang sa menu, mga butang sa menu sa checkbox, mga butang sa menu sa radio button, mga grupo sa radio button, ug mga sub-menu.

Ang mga dropdown sa Bootstrap, sa laing bahin, gidisenyo nga mahimong generic ug magamit sa lain-laing mga sitwasyon ug markup structures. Pananglitan, posible nga maghimo mga dropdown nga adunay dugang nga mga input ug mga kontrol sa porma, sama sa mga natad sa pagpangita o mga porma sa pag-login. Tungod niini nga rason, ang Bootstrap wala magdahom (ni awtomatik nga makadugang) sa bisan unsa roleug mga aria-hiyas nga gikinahanglan para sa tinuod nga ARIA nga mga menu. Kinahanglang ilakip sa mga tagsulat kining mas espesipikong mga hiyas sa ilang kaugalingon.

Bisan pa, ang Bootstrap nagdugang sa built-in nga suporta alang sa kadaghanan sa mga standard nga keyboard nga mga interaksyon sa menu, sama sa abilidad sa paglihok sa indibidwal .dropdown-itemnga mga elemento gamit ang mga yawe sa cursor ug isira ang menu gamit ang ESCyawe.

Mga pananglitan

I-wrap ang toggle sa dropdown (imong buton o link) ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagpahayag position: relative;. Ang mga dropdown mahimong ma-trigger gikan sa <a>o <button>mga elemento aron mas mohaum sa imong potensyal nga mga panginahanglan.

Usa ka butones

Ang bisan unsang single .btnmahimo nga usa ka dropdown toggle nga adunay pipila nga mga pagbag-o sa markup. Ania kung giunsa nimo kini magamit sa bisan unsang <button>mga elemento:

Aksyon Laing aksyon Laing butang dinhi 
<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>

Ug uban sa <a>mga elemento:

Aksyon Laing aksyon Laing butang dinhi 
<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>

Ang labing kaayo nga bahin mao nga mahimo nimo kini sa bisan unsang variant sa buton, usab:

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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>

Split button

Sa susama, paghimo og split button dropdowns nga adunay halos parehas nga markup sa single button nga dropdowns, apan uban ang pagdugang sa .dropdown-toggle-splitpara sa saktong spacing sa palibot sa dropdown caret.

Gigamit namo kini nga dugang nga klase aron makunhuran ang pinahigda paddingsa bisan asa nga kilid sa caret sa 25% ug tangtangon ang margin-leftgidugang alang sa regular nga mga dropdown sa buton. Kadtong dugang nga mga pagbag-o nagpadayon sa caret nga nakasentro sa split button ug naghatag usa ka mas tukma nga gidak-on nga hit nga lugar sunod sa main button.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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>

Pagsukod

Ang mga dropdown sa buton nagtrabaho sa mga buton sa tanan nga gidak-on, lakip ang default ug split dropdown nga mga buton.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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>
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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>

Direksyon

Dropup

I-trigger ang mga dropdown menu sa ibabaw sa mga elemento pinaagi sa pagdugang .dropupsa elemento sa ginikanan.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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

I-trigger ang mga dropdown menu sa tuo sa mga elemento pinaagi sa pagdugang .droprightsa elemento sa ginikanan.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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>

Tulo sa wala

I-trigger ang mga dropdown menu sa wala sa mga elemento pinaagi sa pagdugang .dropleftsa elemento sa ginikanan.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<!-- 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>

Ang mga sulud sa dropdown menu sa kasaysayan kinahanglan nga mga link, apan dili na kana ang kaso sa v4. Karon mahimo nimong gamiton ang <button>mga elemento sa imong mga dropdown imbis nga <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>

Makahimo ka usab og dili interactive nga dropdown nga mga butang nga adunay .dropdown-item-text. Mobati nga gawasnon sa pag-istilo sa dugang gamit ang custom CSS o text utilities.

Teksto sa dropdown nga butang Aksyon Laing aksyon Laing butang dinhi 
<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

Idugang .activesa mga aytem sa dropdown aron i- estilo kini nga aktibo .

Regular nga link Aktibo nga link Laing sumpay 
<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>

Nabaldado

Idugang .disabledsa mga aytem sa dropdown aron i- estilo kini isip disabled .

Regular nga link Na-disable nga link Laing sumpay 
<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>

Sa kasagaran, ang usa ka dropdown menu awtomatik nga gipahimutang 100% gikan sa ibabaw ug ubay sa wala nga bahin sa ginikanan niini. Idugang .dropdown-menu-rightsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu.

Taas ang ulo! Ang mga dropdown gipahimutang salamat sa Popper (gawas kung kini naa sa usa ka 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>

Responsive alignment

Kung gusto nimo gamiton ang responsive alignment, disable dynamic positioning pinaagi sa pagdugang sa data-display="static"attribute ug gamita ang responsive variation classes.

Aron ipahiangay sa tuo ang dropdown menu sa gihatag nga breakpoint o mas dako, idugang .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>

Aron i-align sa wala ang dropdown menu sa gihatag nga breakpoint o mas dako, idugang .dropdown-menu-rightug .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>

Timan-i nga dili nimo kinahanglan nga magdugang ug data-display="static"attribute sa dropdown buttons sa navbars, kay ang Popper wala gigamit sa navbars.

Kontento sa menu

Mga ulohan

Pagdugang og usa ka header sa pag-label sa mga seksyon sa mga aksyon sa bisan unsang dropdown menu.

Dropdown nga ulohan
Aksyon Laing aksyon 
<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>

Mga dibisyon

Pagbulag sa mga grupo sa mga may kalabutan nga mga butang sa menu nga adunay usa ka divider.

Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<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>

Text

Ibutang ang bisan unsang libre nga porma nga teksto sa sulod sa usa ka dropdown menu nga adunay teksto ug gamita ang mga gamit sa spacing . Timan-i nga lagmit kinahanglan nimo ang dugang nga mga istilo sa pagsukod aron mapugngan ang gilapdon sa menu.

Pipila ka pananglitan nga teksto nga libre nga nagdagayday sulod sa dropdown menu.

Ug kini usa pa ka pananglitan nga 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>

Mga porma

Ibutang ang usa ka porma sulod sa dropdown menu, o himoa kini nga dropdown menu, ug gamita ang margin o padding utilities aron mahatagan kini og negatibong luna nga imong gikinahanglan.

Bag-o dinhi? Sign up Nakalimot sa 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>

Gamita data-offseto data-referencepara usbon ang lokasyon sa dropdown.

Aksyon Laing aksyon Laing butang dinhi
Aksyon Laing aksyon Laing butang dinhi
Gibulag nga sumpay 
<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>

Paggamit

Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .showklase sa ginikanan .dropdown-menu. Ang data-toggle="dropdown"hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.

Sa touch-enabled nga mga device, ang pag-abli sa dropdown magdugang og walay sulod ( $.noop) mouseovernga mga tigdumala sa mga anak sa <body>elemento. Kining giangkon nga mangil-ad nga hack gikinahanglan aron masulbad ang usa ka quirk sa delegasyon sa panghitabo sa iOS , nga kung dili makapugong sa usa ka gripo bisan asa sa gawas sa dropdown gikan sa pag-trigger sa code nga nagsira sa dropdown. Kung sirado na ang dropdown, kining mga dugang nga walay sulod nga mouseovermga handler kuhaon.

Pinaagi sa data attributes

Idugang data-toggle="dropdown"sa usa ka link o buton aron i-toggle ang dropdown.

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

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"gikinahanglan pa

Dili igsapayan kung imong tawagan ang imong dropdown pinaagi sa JavaScript o sa baylo nga gamiton ang data-api, data-toggle="dropdown"kinahanglan kanunay nga naa sa elemento sa pag-trigger sa dropdown.

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Ngalan Matang Default Deskripsyon
offset numero | hilo | function 0

Offset sa dropdown kalabot sa target niini.

Kung ang usa ka function gigamit aron mahibal-an ang offset, gitawag kini nga adunay usa ka butang nga adunay sulud nga data sa offset ingon una nga argumento niini. Kinahanglang ibalik sa function ang usa ka butang nga adunay parehas nga istruktura. Ang triggering element nga DOM node gipasa isip ikaduhang argumento.

Alang sa dugang nga impormasyon tan-awa ang Popper's offset docs .
paltik boolean tinuod Tugoti ang Dropdown nga mag-flip kung adunay nagsapaw sa reference nga elemento. Alang sa dugang nga impormasyon tan-awa ang Popper's flip docs .
utlanan hilo | elemento 'scrollParent' Ang pag-awas sa limitasyon sa dropdown menu. Gidawat ang mga kantidad sa 'viewport', 'window', 'scrollParent', o usa ka HTMLElement reference (JavaScript lang). Alang sa dugang nga impormasyon tan-awa ang Popper's preventOverflow docs .
pakisayran hilo | elemento 'toggle' Reference nga elemento sa dropdown menu. Gidawat ang mga kantidad sa 'toggle', 'parent', o usa ka reference sa HTMLElement. Alang sa dugang nga impormasyon tan-awa ang Popper's referenceObject docs .
display hilo 'dinamikong' Sa kasagaran, gigamit namo ang Popper alang sa dinamikong pagpoposisyon. I-disable kini gamit ang static.
popperConfig null | butang null Aron usbon ang default Popper config sa Bootstrap, tan-awa ang configuration sa Popper

Timan-i kung kanus boundary-a gibutang sa bisan unsang kantidad gawas sa 'scrollParent', ang istilo position: staticgipadapat sa .dropdownsulud.

Pamaagi

Pamaagi Deskripsyon
$().dropdown('toggle') I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.
$().dropdown('show') Nagpakita sa dropdown menu sa gihatag nga navbar o tabbed navigation.
$().dropdown('hide') Gitagoan ang dropdown menu sa gihatag nga navbar o tabbed navigation.
$().dropdown('update') Gi-update ang posisyon sa dropdown sa usa ka elemento.
$().dropdown('dispose') Giguba ang dropdown sa usa ka elemento.

Mga panghitabo

Ang tanan nga dropdown nga mga panghitabo gipabuthan sa .dropdown-menuelemento sa ginikanan ug adunay relatedTargetkabtangan, kansang bili mao ang toggling anchor nga elemento. hide.bs.dropdownug hidden.bs.dropdownang mga panghitabo adunay usa ka clickEventkabtangan (lamang kung ang orihinal nga tipo sa panghitabo mao ang click) nga adunay sulod nga usa ka Event Object para sa click nga panghitabo.

Panghitabo Deskripsyon
show.bs.dropdown Kini nga panghitabo modilaab dayon kung ang paagi sa pagpakita nga pananglitan gitawag.
shown.bs.dropdown Kini nga panghitabo gipabuto kung ang dropdown nahimo nga makita sa tiggamit (maghulat alang sa mga transisyon sa CSS, aron makompleto).
hide.bs.dropdown Kini nga panghitabo gipabuto dayon kung ang paagi sa pagtago sa pananglitan gitawag na.
hidden.bs.dropdown Kini nga panghitabo gipabuto kung ang dropdown nahuman na nga gitago gikan sa user (maghulat alang sa mga transisyon sa CSS, aron makompleto). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})