Source

Nusiwo wotsɔna ƒua gbe

Trɔ nya siwo ƒo xlãe ƒe nutsyɔtsyɔwo hena kadodowo ƒe xexlẽdzesiwo kple bubuwo ɖeɖefia kple Bootstrap ƒe ƒuƒoƒoa.

Kpɔɖeŋunyagbɔgblɔ

Dropdowns nye toggleable, contextual overlays hena kadodowo ƒe xexlẽdzesiwo ɖeɖefia kple bubuwo. Wowɔ wo be woawɔ nu kple Bootstrap ƒe JavaScript ƒe kpeɖeŋutɔ si le eme. Wotrɔa asi le wo ŋu to asiƒoƒo ɖe wo dzi me, ke menye to asiƒoƒo ɖe wo dzi me o; esia nye nyametsotso si woɖo koŋ wɔ le aɖaŋuwɔwɔ ŋu .

Wotu nusiwo wotsɔna ƒua gbe ɖe ame etɔ̃lia ƒe agbalẽdzraɖoƒe aɖe dzi, Popper.js , si naa teƒe si woate ŋu atrɔ asi le kple nukpɔkpɔ ƒe ʋɔtruwo didi. Kpɔ egbɔ be yede popper.min.js do ŋgɔ na Bootstrap ƒe JavaScript alo zã bootstrap.bundle.min.js/ bootstrap.bundle.jssi me Popper.js le. Popper.js mezãna tsɔ ɖoa ​​dropdowns ɖe navbars me togbɔ be abe dynamic positioning mehiã o ene.

Ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js .

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

WAI ARIA ƒe dzidzenu ɖe role="menu"​​widget ŋutɔŋutɔ gɔme , gake esia nye menu siwo le abe dɔwɔwɔ ene siwo ʋãa nuwɔna alo dɔwɔwɔwo koŋ. ARIA ƒe nuɖuɖuwo ate ŋu anye nusiwo le menu me, aɖaka me nu siwo le aɖaka me, radio ƒe abɔta ƒe nuɖuɖu ƒe akpawo, radio ƒe abɔta ƒe ƒuƒoƒo, kple menu suewo ko.

Gake wowɔ Bootstrap ƒe dropdowns ya be woanye esiwo wozãna le mɔ vovovowo nu eye woate ŋu azã wo ɖe nɔnɔme vovovowo kple dzesideɖoɖowo me. Le kpɔɖeŋu me, anya wɔ be woawɔ nusiwo woatsɔ ade eme siwo me nyatakaka bubuwo kple agbalẽviwo dzi kpɔkpɔ le, abe didiƒewo alo agbalẽvi siwo dzi woato age ɖe eme ene. Le susu sia ta la, Bootstrap mekpɔ mɔ (alo tsɔe kpe ɖe eŋu le eɖokui si) rolekple aria-nɔnɔme siwo hiã na ARIA ƒe nuɖuɖu vavãwo dometɔ aɖeke o. Ele be agbalẽŋlɔlawo ŋutɔ nade nɔnɔme siawo siwo le tẽ wu la eme.

Ke hã, Bootstrap tsɔa kpekpeɖeŋu si wotu ɖe eme kpena ɖe keyboard menu ƒe kadodo siwo wozãna ɖaa ƒe akpa gãtɔ ŋu, abe ŋutete si le ame si be wòaʋu to .dropdown-itemnu ɖekaɖekawo me to cursor keys zazã me eye nàtu menu la kple ESCkey la ene.

Kpɔɖeŋuwo

Kpe fli si le fli dzi ƒe toggle (wò abɔta alo kadodo) kple nu si le fli dzi la ɖe .dropdown, alo nu bubu si ɖe gbeƒã position: relative;. Woate ŋu aʋã dropdowns tso <a>alo <button>elements be wòasɔ ɖe wò nuhiahiã siwo ate ŋu adzɔ nu nyuie wu.

Abɔta ɖeka

Woateŋu atrɔ ɖekaɖeka ɖesiaɖe .btnwòazu dropdown toggle kple dzesidede tɔtrɔ aɖewo. Alesi nàte ŋu atsɔ wo ade dɔwɔwɔ me kple nu eveawo dometɔ ɖesiaɖee nye esi <button>:

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>

Eye kple <a>nu veviwo:

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>

Akpa nyuitɔ kekeakee nye be àte ŋu awɔ esia kple button variant ɖesiaɖe, hã:

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>

Mamã ƒe dzesi

Nenema ke wɔ split button dropdowns kple dzeside ɖeka kloe abe button ɖeka dropdowns ene, gake nàtsɔe akpe ɖe eŋu .dropdown-toggle-splithena dometsotso nyuitɔ ƒo xlã dropdown caret la.

Míezãa klass bubu sia tsɔ ɖea horizontal paddingsi le caret la ƒe akpa eveawo dzi kpɔtɔna 25% eye míeɖea margin-leftthat’s added for regular button dropdowns ɖa. Tɔtrɔ mawo kpee la nana caret la nɔa titina le abɔta si woma la me eye wònaa teƒe si woate ŋu aƒoe si ƒe lolome sɔ wu le abɔta gã la xa.

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>

Sizing ƒe lolome

Abɔta siwo le tsia dzi la wɔa dɔ kple abɔta siwo ƒe lolome le vovovo, siwo dometɔ aɖewoe nye abɔta siwo woɖo ɖi kple esiwo woma ɖe akpa vovovowo me.

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

Mɔfiamewo

Dropup ƒe ʋuʋu

Dze nu siwo le fli dzi la gɔme le elementwo tame to etsɔtsɔ kpe .dropupɖe dzila ƒe akpaa ŋu me.

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 ƒe gomenɔamesi

Dze nusiwo le fli dzi le elementawo ƒe ɖusime to tsɔtsɔ kpe .droprightɖe dzila element la ŋu me.

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 ƒe ƒuƒoƒo

Dze nusiwo le fli dzi le elementawo ƒe miame to tsɔtsɔ kpe .dropleftɖe dzila element la ŋu me.

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>

Le ŋutinya me la , ele be nusiwo le fli dzi la nanye kadodowo, gake meganye nenema le v4 gome o. Fifia àteŋu azã <button>elements le wò dropdowns me le wò tiatia me ɖe <a>s ɖeɖeko teƒe.

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

Àte ŋu awɔ nusiwo mewɔa dɔ kple wo nɔewo o hã kple .dropdown-item-text. Miate ŋu awɔ atsyã geɖe wu faa kple CSS alo nuŋɔŋlɔ ƒe dɔwɔnu siwo wowɔ ɖe ɖoɖo nu.

Nu si le fli dzi ƒe nuŋɔŋlɔ Nuwɔwɔ Nuwɔna bubu Nu bubu aɖe hã le afisia 
<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>

Le dɔwɔm

Tsɔe kpe .activeɖe nusiwo le fli si le fli dzi la ŋu be nàwɔ woƒe atsyã be wole dɔ wɔm .

Kadodo si wozãna edziedzi Kadodo si le dɔ wɔm Kadodo bubu 
<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>

Si me woɖe dzo le

Tsɔe kpe .disabledɖe nusiwo le fli si le fli dzi la ŋu be nàwɔ woƒe atsyã abe nuwɔametɔwo ene .

Kadodo si wozãna edziedzi Nuwɔametɔ ƒe kadodoa Kadodo bubu 
<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>

Le gɔmedzedzea me la, woɖoa nusiwo le tsia dzi la ɖe teƒe si le eɖokui si 100% tso etame kple edzila ƒe miame. Tsɔ kpe .dropdown-menu-rightɖe a .dropdown-menuŋu yi ɖusime ɖo fli si le fli dzi la ɖe ɖoɖo nu.

Tawo yi dzi! Woɖoa nusiwo wotsɔna ƒua gbe ɖe teƒe ɖeka akpe na Popper.js (negbe ne wole navbar me ko).

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

Ðoɖowɔwɔ ɖe ɖoɖo nu

Ne èdi be yeazã ɖoɖowɔwɔ ɖe ɖoɖo nu la, wɔ ɖoɖo si trɔna la nuwɔametɔe to nɔnɔmea tsɔtsɔ kpee me data-display="static"eye nàzã ŋuɖoɖo ƒe tɔtrɔ ƒe hatsotsowo.

Ne èdi be yeaɖo fli si le fli dzi la ɖe ɖusime kple breakpoint si wona alo esi lolo wu la, tsɔ kpe ɖe eŋu .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>

Ne èdi be yeaɖo miame ƒe fli si le fli dzi la ɖe ɖoɖo nu kple breakpoint si wona alo esi lolo wu la, tsɔ .dropdown-menu-rightkple .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>

De dzesii be mehiã be nàtsɔ data-display="static"nɔnɔme aɖe akpe ɖe ʋuƒo siwo le navbarwo me ŋu o, elabena womezãa Popper.js le navbarwo me o.

Menu me nyawo

Tanyawo

Tsɔ tanya kpee be nàde dzesi nuwɔna ƒe akpawo le nudzraɖoƒe ɖesiaɖe si le fli dzi.

Tanya si le tsia dzi
Nuwɔwɔ Nuwɔna bubu 
<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>

Amewo mamãnuwo

Tsɔ numamãnu ɖe ​​nuɖuɖu siwo do ƒome kple wo nɔewo ƒe ƒuƒoƒowo me.

Nuwɔwɔ Nuwɔna bubu Nu bubu aɖe hã le afisia
Kadodo si woɖe ɖe vovo 
<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>

Nuŋɔɖi

Da nuŋɔŋlɔ ɖesiaɖe si le ablɔɖe me ɖe menu si dzi woŋlɔ nu ɖo la me eye nàzã dometsotso ƒe dɔwɔnuwo . De dzesii be anɔ eme be àhiã lolome ƒe atsyã bubuwo be nàxe mɔ ɖe nuɖuɖua ƒe kekeme nu.

Kpɔɖeŋu nuŋɔŋlɔ aɖewo siwo le sisim faa le nusiwo le fli dzi la me.

Eye esia nye kpɔɖeŋu nuŋɔŋlɔ si sɔ gbɔ wu.

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

Kpekpeɖeŋugbalẽviwo

De agbalẽvi aɖe nu siwo le fli dzi la me, alo nàwɔe wòazu nu siwo le fli dzi, eye nàzã margin alo padding utilities atsɔ ana teƒe manyomanyo si nèhiã lae.

Nu yeye siwo ƒo xlã afisia? De asi agbalẽ te Èŋlɔ nyagbe ɣaɣla bea? 
<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>

Zã data-offsetalo data-referencenàtsɔ atrɔ teƒe si nàɖe nu le.

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>

Zãzã

To data attributes alo JavaScript dzi la, dropdown plugin la trɔa nya ɣaɣlawo (dropdown menus) to asitɔtrɔ le .showklass la ŋu le dzila ƒe xexlẽdzesi ƒe nu la dzi. Woɖoa data-toggle="dropdown"ŋu ɖe nɔnɔmea ŋu hena nutsotso siwo le fli dzi le dɔwɔwɔ ƒe ɖoɖo aɖe dzi, eyata anyo be nàzãe ɣesiaɣi.

Le mɔ̃ siwo ŋu woate ŋu aka asi nu ŋu le dzi la, ne èʋu nusi le tsia dzi la, etsɔa asiléƒe ƒuƒlu ( $.noop) kpena ɖe element mouseoverla ƒe viwo ŋu enumake . <body>This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , si ne menye nenema o la, axe mɔ na tap le afisiafi le dropdown la godo be wòagaʋã code si xea dropdown la o. Ne wonya tu nusi wotsɔna ƒua gbe la ko la, woɖea asiléƒe ƒuƒlu siawo siwo wotsɔ kpe ɖe eŋu mouseoverla ɖa.

To nyatakaka ƒe nɔnɔmewo dzi

Tsɔe kpe data-toggle="dropdown"ɖe kadodo alo abɔta ŋu be nàtrɔ asi le nya aɖe ŋu.

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

To JavaScript dzi

Yɔ nusiwo le fli dzi la to JavaScript dzi:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"wogahiã kokoko

Eɖanye be èyɔ wò dropdown la to JavaScript dzi alo nèzã data-api boŋ o, data-toggle="dropdown"ehiã ɣesiaɣi be nànɔ dropdown la ƒe trigger element la dzi.

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-offset="".

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
offset ƒe ƒuƒoƒo xexlẽdzesi | kaƒoƒo | wᴐ dᴐ 0.

Offset of the dropdown ne wotsɔe sɔ kple eƒe taɖodzinu.

Ne wozã dɔwɔwɔ aɖe tsɔ nya offset la, woyɔnɛ kple nusi me offset data le abe eƒe nyaʋiʋli gbãtɔ ene. Ele be dɔwɔwɔa natrɔ nusi ƒe wɔwɔme le ɖeka. Wotsɔa nusi ʋãa nu DOM node la toa eme abe nyaʋiʋli evelia ene.

Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe offset docs .
ti kpo boolean ƒe ƒuƒoƒo nyateƒe Ðe mɔ na Dropdown be wòatrɔ nenye be eƒo xlã nufiame ƒe akpaa. Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe flip docs .
liƒo dzi kaƒoƒo | na 'agbalẽ xatsaxatsa dzila'. Overflow mɔxexeɖedɔléle liƒo na dropdown menu. Xɔ 'viewport', 'window', 'scrollParent', alo HTMLElement ƒe nufiame ƒe asixɔxɔwo (JavaScript ɖeɖeko). Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe preventOverflow docs .
ɖeɖe fiã kaƒoƒo | na 'trɔ asi le eŋu'. Nufiame ƒe akpa si le nusiwo le fli dzi la me. Lɔ̃ ɖe 'toggle', 'parent', alo HTMLElement ƒe nufiame ƒe asixɔxɔwo dzi. Ne èdi nyatakaka bubuwo la, kpɔ Popper.js ƒe referenceObject docs .
ɖeɖe fia ka 'ŋusẽtɔ'. Le gɔmedzedzea me la, míezãa Popper.js hena teƒeɖoɖo si trɔna. Tsɔ esia wɔ dɔe kple static.
popper ƒe Ðoɖowɔɖi null | nu ƒuƒlu Ne èdi be yeatrɔ Bootstrap ƒe Popper.js ƒe ɖoɖowɔɖi gbãtɔ la, kpɔ Popper.js ƒe ɖoɖowɔɖi

De dzesii ne boundarywoɖoe ɖe asixɔxɔ ɖesiaɖe si menye 'scrollParent', o la, wozãa atsyã position: staticla ɖe .dropdownnugoe la ŋu.

Mɔnuwo

Nuwɔmɔnu Nuɖᴐɖᴐ
$().dropdown('toggle') Trɔa navbar alo tabbed navigation aɖe si wona la ƒe dropdown menu.
$().dropdown('show') Fia navbar alo tabbed navigation si wona ƒe menu si le tsia dzi.
$().dropdown('hide') Ɣla navbar alo tabbed navigation si wona ƒe menu si le tsia dzi.
$().dropdown('update') Trɔ asi le element aɖe ƒe dropdown ƒe nɔƒe ŋu.
$().dropdown('dispose') Egblẽa nu le element aɖe ƒe dropdown ŋu.

Nudzɔdzɔwo

Wodoa nudzɔdzɔ siwo katã le tsia dzi la ɖe .dropdown-menu's dzila ƒe akpaa dzi eye nɔnɔme aɖe le wo si relatedTarget, si ƒe asixɔxɔ nye toggling anchor element. hide.bs.dropdowneye hidden.bs.dropdownnudzɔdzɔwo ƒe nɔnɔme aɖe le wo si clickEvent(ne nudzɔdzɔ gbãtɔ ƒe ƒomevi nye click) si me Nudzɔdzɔ ƒe Nu le na nudzɔdzɔ si wozi.

Nudzᴐdzᴐ Nuɖᴐɖᴐ
show.bs.dropdown Nudzɔdzɔ sia doa dzo enumake ne woyɔ show instance mɔnu la.
shown.bs.dropdown Woɖea nudzɔdzɔ sia ne wowɔ dropdown la be wòadze na zãla (alala CSS ƒe tɔtrɔwo, be woawu enu).
hide.bs.dropdown Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hide instance mɔnu la.
hidden.bs.dropdown Woɖea nudzɔdzɔ sia ne wowu dropdown la ɣla ɖe zãla la nu (alala CSS ƒe tɔtrɔwo, be woawu enu). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})