in English

Dropdowns

Ampifamadiho ny overlay contextual amin'ny fampisehoana lisitry ny rohy sy ny maro hafa miaraka amin'ny plugin bootstrap dropdown.

Overview

Ny dropdowns dia azo toggle, overlay contextual mba hampisehoana ny lisitry ny rohy sy ny maro hafa. Izy ireo dia natao hifaneraserana miaraka amin'ny plugin Bootstrap dropdown JavaScript. Avadika amin'ny alalan'ny fanindriana izy ireo, fa tsy amin'ny fanodinkodinana; Fanapahan - kevitra noforonina izany .

Ny dropdowns dia naorina amin'ny tranomboky an'ny antoko fahatelo, Popper.js , izay manome toerana mavitrika sy fitsikilovana. Aza hadino ny mampiditra popper.min.js alohan'ny Bootstrap's JavaScript na mampiasa bootstrap.bundle.min.js/ bootstrap.bundle.jsizay misy Popper.js. Popper.js dia tsy ampiasaina amin'ny fametrahana ny dropdowns amin'ny navbars na dia tsy ilaina aza ny fametrahana dynamic.

Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js .

Accessibility

Ny fenitry ny WAI ARIA dia mamaritra ny role="menu"widget tena izy , saingy manokana amin'ny menus mitovy amin'ny fampiharana izay miteraka hetsika na asa. Ny menio ARIA dia tsy afaka mirakitra afa-tsy ireo singa sakafo, ireo singa ao amin'ny boaty fanamarihana, ireo singa ao amin'ny sakafo bokotra radio, ireo vondrona bokotra radio ary ireo zana-menina.

Ny fampidinana an'i Bootstrap kosa dia natao ho an'ny ankapobeny sy azo ampiharina amin'ny toe-javatra isan-karazany sy rafitra marika. Ohatra, azo atao ny mamorona dropdown izay misy fampidirana fanampiny sy fanaraha-maso ny endrika, toy ny sahan-karoka na ny endrika fidirana. Noho izany antony izany, Bootstrap dia tsy manantena (na manampy ho azy) ny iray amin'ireo roletoetra aria-ilaina amin'ny menu ARIA marina . Ny mpanoratra dia tsy maintsy mampiditra ireo toetra manokana ireo ny tenany.

Na izany aza, ny Bootstrap dia manampy fanohanana natsangana ho an'ny ankamaroan'ny fifandraisana amin'ny sakafo fitendry mahazatra, toy ny fahafahana mivezivezy amin'ny .dropdown-itemsinga tsirairay amin'ny fampiasana ny fanalahidin'ny cursor ary manidy ny sakafo amin'ny ESCfanalahidy.

OHATRA

Apetaho ao anaty .dropdown, na singa iray hafa manambara ny position: relative;. Ny dropdowns dia azo avy amin'ny singa <a>na <button>singa mba hifanaraka tsara kokoa amin'ny zavatra ilainao.

bokotra tokana

Ny singa .btntsirairay dia azo avadika ho toggle midina miaraka amin'ny fanovana marika. Ity ny fomba ahafahanao mampiasa azy ireo amin'ny <button>singa roa:

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>

Ary miaraka amin'ny <a>singa:

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>

Ny ampahany tsara indrindra dia azonao atao izany amin'ny variana bokotra rehetra ihany koa:

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>

bokotra fisarahana

Torak'izany koa, mamorona fidinan'ny bokotra fisarahana miaraka amin'ny marika mitovy amin'ny fanidiana bokotra tokana, fa miaraka amin'ny fanampin'ny .dropdown-toggle-splitelanelana mety manodidina ny caret dropdown.

Ampiasainay ity kilasy fanampiny ity mba hampihenana ny marindrano paddingamin'ny lafiny roa amin'ny caret amin'ny 25% ary hanesorana ny margin-leftizay ampiana ho an'ny fanariana bokotra mahazatra. Ireo fanovana fanampiny ireo dia mitazona ny caret afovoany amin'ny bokotra fisarahana ary manome faritra voadona mifanentana kokoa eo akaikin'ny bokotra lehibe.

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>

Famaritana

Ny fidinana bokotra dia miasa miaraka amin'ny bokotra amin'ny habe rehetra, ao anatin'izany ny bokotra midina midina sy misaraka.

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

Toro-lalana

Dropup

Ampidiro ny menio midina eo ambonin'ny singa amin'ny fanampiana .dropupny singa ray.

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

Ampidiro ny menio midina eo an-kavanan'ireo singa amin'ny fanampiana .droprightamin'ny singa ray.

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

Ampidiro ny menio midina eo ankavian'ireo singa amin'ny fanampiana .dropleftny singa ray.

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>

Ny votoatin'ny menio midina ara-tantara dia tokony ho rohy, saingy tsy izany intsony no mitranga amin'ny v4. Ankehitriny ianao dia afaka mampiasa <button>singa ao amin'ny dropdowns fa tsy <a>s fotsiny.

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

Azonao atao koa ny mamorona singa midina tsy misy interactive miaraka amin'ny .dropdown-item-text. Aza misalasala manara-penitra bebe kokoa miaraka amin'ny CSS manokana na fitaovana lahatsoratra.

Lahatsoratra midina Action Hetsika hafa Zavatra hafa eto 
<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>

Active

Ampio .activeamin'ny singa ao amin'ny dropdown mba hametahana azy ireo ho mavitrika .

Rohy tsy tapaka Rohy mavitrika Rohy iray hafa 
<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>

sembana

Ampio .disabledamin'ny singa ao amin'ny dropdown mba hametahana azy ireo ho kilemaina .

Rohy tsy tapaka Rohy kilemaina Rohy iray hafa 
<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>

Amin'ny alàlan'ny default, apetraka ho azy 100% avy any ambony sy eo amin'ny ilany havia amin'ny ray aman-dreniny ny menio midina. Ampio .dropdown-menu-rightamin'ny .dropdown-menurindran-kavanana ny menio midina.

Fampitandremana! Ny dropdowns dia napetraka noho ny Popper.js (afa-tsy rehefa voarakitra ao anaty 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>

Fandrindrana mamaly

Raha te-hampiasa alignment responsive ianao dia esory ny toerana dynamique amin'ny alàlan'ny fampidirana ilay data-display="static"toetra ary ampiasao ny kilasy fanovana valiny.

Mba hampifanitsiana havanana ny menio midina miaraka amin'ny teboka tapaka nomena na lehibe kokoa, ampio .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>

Mba hampifanitsiana ny menio midina ankavia.dropdown-menu-right amin'ny teboka tapaka nomena na lehibe kokoa, ampio ary .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>

Mariho fa tsy mila manampy data-display="static"toetra ianao amin'ny bokotra midina ao amin'ny navbars, satria Popper.js dia tsy ampiasaina amin'ny navbars.

Ny votoatin'ny menu

lohapejy

Manampia lohapejy hanamarihana ny ampahan'ny hetsika ao amin'ny menio midina.

Lohateny midina
Action Hetsika hafa 
<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>

Mpizarazara

Saraho ny vondrona misy sakafo mifandraika amin'ny fizarana.

Action Hetsika hafa Zavatra hafa eto
Rohy misaraka 
<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

Apetraho ao anatin'ny menio midina miaraka amin'ny lahatsoratra ary ampiasao ny fampiasan'ny spacing . Mariho fa mety mila fomba fandrefesana fanampiny ianao mba hanerena ny sakan'ny menio.

Ohatra sasantsasany izay mikoriana maimaim-poana ao amin'ny menio midina.

Ary ity dia lahatsoratra ohatra bebe kokoa.

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

teny

Asio endrika iray ao anatin'ny menio midina, na ataovy ao anaty menio midina, ary ampiasao ny fampiasa amin'ny sisiny na padding mba hanomezana azy ny toerana ratsy ilainao.

Vaovao eto? Hiditra Mpikambana Hadino ny tenimiafina? 
<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>

Ampiasao data-offsetna data-referencehanovana ny toerana misy ny fidina.

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>

Fampiasana

Amin'ny alàlan'ny toetran'ny data na JavaScript, ny plugin fidinana dia mamadika votoaty miafina (meno midina) amin'ny alàlan'ny fanodina ny .showkilasy amin'ny lisitry ny ray aman-dreny. Ny data-toggle="dropdown"toetra dia iankinana amin'ny fanakatonana ny menio midina amin'ny ambaratonga fampiharana, noho izany dia tsara ny mampiasa azy foana.

Amin'ny fitaovana azo ampiasaina amin'ny fikitihana, ny fanokafana ny fidinana dia manampy mpiandraikitra ( $.noop) tsy misy na inona na inona mouseoveramin'ireo ankizy avy hatrany amin'ilay <body>singa. Ity hack tena ratsy ekena ity dia ilaina amin'ny fampandehanana ny quirk amin'ny delegasiona hetsika iOS , izay raha tsy izany dia manakana ny paompy na aiza na aiza ivelan'ny dropdown tsy hiteraka ny code izay manidy ny dropdown. Rehefa mihidy ny mouseoverfidinana dia esorina ireo mpikirakira poakaty fanampiny ireo.

Amin'ny alàlan'ny data attributes

Ampio data-toggle="dropdown"amin'ny rohy na bokotra iray mba hivezivezena ny fidina.

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

Amin'ny JavaScript

Antsoy amin'ny alalan'ny JavaScript ny dropdowns:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"mbola takiana

Na inona na inona miantso ny fidinao amin'ny JavaScript ianao na mampiasa ny data-api, data-toggle="dropdown"dia tsy maintsy misy foana ny singa trigger an'ny dropdown.

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset="".

Anarana Type toerana misy anao Description
offset laharana | string | asa 0

Offset amin'ny fidinana mifandraika amin'ny tanjony.

Rehefa ampiasaina hamaritana ny offset ny asa iray, dia antsoina miaraka amin'ny zavatra misy ny data offset ho tohan-kevitra voalohany. Ny asa dia tsy maintsy mamerina zavatra mitovy rafitra. Ny node DOM node dia alefa ho tohan-kevitra faharoa.

Raha mila fanazavana fanampiny dia jereo ny Popper.js's offset docs .
Atsimbadiho boolean marina Avelao hihodina ny Dropdown raha sendra misy mifanipaka amin'ny singa fanondro. Raha mila fanazavana fanampiny dia jereo ny Popper.js's flip docs .
sisin-tany string | singa 'scrollParent' Fehezan'ny fihoaram-pefy amin'ny menio midina. Manaiky ny sandan'ny 'viewport', 'window', 'scrollParent', na reference HTMLElement (JavaScript ihany). Raha mila fanazavana fanampiny dia jereo ny Popper.js's preventOverflow docs .
Reference string | singa 'toggle' Singa fanondro amin'ny menio midina. Manaiky ny sandan'ny 'toggle', 'parent', na reference HTMLElement. Raha mila fanazavana fanampiny dia jereo ny Popper.js's referenceObject docs .
miseho tady 'dynamique' Amin'ny alàlan'ny default, mampiasa Popper.js izahay ho an'ny toerana mavitrika. Atsaharo ity amin'ny static.
popperConfig null | zavatra tohivakana foana Raha hanova ny config Popper.js default an'ny Bootstrap dia jereo ny configuration Popper.js

Mariho rehefa boundaryapetraka amin'ny sanda hafa ankoatra ny 'scrollParent', ny fomba position: staticdia ampiharina amin'ny .dropdownfitoeran-javatra.

fomba

FOMBA Description
$().dropdown('toggle') Manova ny menio fidinan'ny navbar nomena na navigateur misy tabilao.
$().dropdown('show') Mampiseho ny menio midina amin'ny navbar nomena na navigateur misy tabilao.
$().dropdown('hide') Manafina ny menio midina amin'ny navbar na navigateur misy tabilao.
$().dropdown('update') Manavao ny toeran'ny fidinan'ny singa iray.
$().dropdown('dispose') Manimba ny fidinan'ny singa iray.

zava-mitranga

Ny hetsika fidinana rehetra dia alefa amin'ny .dropdown-menusinga ray aman-dreny ary manana relatedTargetfananana, izay singa vatofantsika mifamadika ny sandany. hide.bs.dropdownary hidden.bs.dropdownny hetsika dia manana clickEventfananana (raha ny karazana hetsika tany am-boalohany dia click) izay misy zava-mitranga ho an'ny hetsika kitihina.

Event Description
show.bs.dropdown Mirehitra avy hatrany ity hetsika ity rehefa antsoina ny fomba fampisehoana ohatra.
shown.bs.dropdown Ity hetsika ity dia alefa rehefa hita ho hitan'ny mpampiasa ny fampidinana (hiandry ny fifindrana CSS, ho vita).
hide.bs.dropdown Ity hetsika ity dia alefa avy hatrany rehefa nantsoina ny fomba fanafenana.
hidden.bs.dropdown Voaroaka ity hetsika ity rehefa tapitra nafenina tamin'ny mpampiasa ny fampidinana (hiandry ny fifindrana CSS, ho vita). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})