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, si nye Popper , si naa teƒe si wowɔa dɔ 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 le. Popper mezãna tsɔ ɖoa dropdowns ɖe navbars me togbɔ be abe dynamic positioning mehiã o ene.
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. Kpɔɖeŋu siwo woɖe fia le afisia zãa gɔmesese ƒe <ul>akpawo le afisi wòsɔ le, gake wodoa alɔ dzesidede tɔxɛ.
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>:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>Eye kple <a>nu veviwo:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>Akpa nyuitɔ kekeakee nye be àte ŋu awɔ esia kple button variant ɖesiaɖe, hã:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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.
<!-- 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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Viviti ƒe ʋuʋudediwo
Tiae ɖe fli siwo do viviti wu me be wòasɔ kple navbar si do viviti alo atsyã tɔxɛ aɖe to etsɔtsɔ kpe .dropdown-menu-darkɖe esi li xoxo .dropdown-menuŋu me. Mehiã be woawɔ tɔtrɔ aɖeke le nusiwo le fli dzi ŋu o.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>Eye etsɔtsɔ de navbar me be woazãe:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Mɔfiamewo
RTL
Mɔfiamewo dzena le ahuhɔ̃e me ne wole Bootstrap zãm le RTL me, gɔmesese .dropstartadze le ɖusime.
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.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropright ƒe gomenɔamesi
Dze nusiwo le fli dzi le elementawo ƒe ɖusime to tsɔtsɔ kpe .dropendɖe dzila element la ŋu me.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft ƒe ƒuƒoƒo
Dze nusiwo le fli dzi le elementawo ƒe miame to tsɔtsɔ kpe .dropstartɖe dzila element la ŋu me.
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Nu siwo le menu la me
Àte ŋu azã <a>alo <button>elements abe nusiwo le fli dzi ene.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</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.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>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 . Be nàtsɔ nɔnɔme si le dɔ wɔm la ayi kpekpeɖeŋu mɔ̃ɖaŋunuwo gbɔ la, zã aria-currentnɔnɔmea — zã pageasixɔxɔa na axa si li fifia, alo truena nu si li fifia le ƒuƒoƒo aɖe me.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>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 .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>Menu ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu
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. Àteŋu atrɔ esia kple mɔfiame .drop*ƒe klasswo, gake àteŋu akpɔ wo dzi kple tɔtrɔ ƒe klass bubuwo hã.
Tsɔ kpe .dropdown-menu-endɖe a .dropdown-menuŋu yi ɖusime ɖo fli si le fli dzi la ɖe ɖoɖo nu. Mɔfiamewo dzena le ahuhɔ̃e me ne wole Bootstrap zãm le RTL me, gɔmesese .dropdown-menu-endadze le miame.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</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-bs-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|-xxl}-end.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</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-endkple .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>De dzesii be mehiã be nàtsɔ data-bs-display="static"nɔnɔme aɖe akpe ɖe ʋuƒo siwo le navbarwo me ŋu o, elabena womezãa Popper le navbarwo me o.
Tiatia siwo woawɔ ɖe ɖoɖo nu
Ne míexɔ tiatia siwo woɖe fia le etame la ƒe akpa gãtɔ la, nuɖaƒe ƒe tsinyegoe ƒe wɔwɔfia sue aɖee nye esi si me woɖea tiatia vovovo siwo wotsɔna ɖoa fli dzi le teƒe ɖeka.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>Menu me nyawo
Tanyawo
Tsɔ tanya kpee be nàde dzesi nuwɔna ƒe akpawo le nu ɖesiaɖe si le fli dzi me.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>Amewo mamãnuwo
Tsɔ numamãnu ɖe nuɖuɖu siwo do ƒome kple wo nɔewo ƒe ƒuƒoƒowo me.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>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.
<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.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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>Tiatia siwo woate ŋu azã le fli dzi
Zã data-bs-offsetalo data-bs-referencenàtsɔ atrɔ teƒe si nàɖe nu le.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>Auto close nuwɔna
Le gɔmedzedzea me la, wotua nusiwo le fli dzi la ne èzi nu siwo le tsia dzi la me alo egodo dzi. Àte ŋu azã autoClosetiatia la atsɔ atrɔ nuwɔna sia si le fli dzi.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>Sass ƒe nyawo
Nusiwo trɔna
Trɔtrɔwo na nusiwo katã le tsia dzi:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
Trɔtrɔwo na viviti ƒe ʋuʋudedi :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
Trɔtrɔwo na CSS-dzi carets siwo fiaa dropdown ƒe nuwɔwɔ aduadu:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Nusiwo wotsɔ tsakae
Wozãa mixins tsɔ wɔa carets siwo wotu ɖe CSS dzi eye woate ŋu akpɔe le scss/mixins/_caret.scss.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
Zãzã
To data attributes alo JavaScript dzi la, plugin la trɔa nya ɣaɣlawo (nu siwo le fli dzi) to asitɔtrɔ le .showklass la ŋu le dzila la dzi .dropdown-menu. Woɖoa data-bs-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.
mouseoverla ƒe vi siwo te ɖe wo ŋu la
ŋu. <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-bs-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-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
To JavaScript dzi
Yɔ nusiwo le fli dzi la to JavaScript dzi:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"wogahiã kokoko
Eɖanye be èyɔ wò dropdown la to JavaScript dzi alo nèzã data-api boŋ o, data-bs-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-bs-, abe alesi wòle le data-bs-offset="". Kpɔ egbɔ be yetrɔ tiatia ŋkɔ ƒe case ƒomevi tso camelCase yi kebab-case ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, le esi teƒe be data-bs-autoClose="false"nàzã data-bs-auto-close="false".
| Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
|---|---|---|---|
boundary |
kaƒoƒo | na | 'clippingParents' |
Overflow mɔxexeɖenu liƒo na dropdown menu (eku ɖe Popper ƒe preventOverflow modifier ko ŋu). Le gɔmedzedzea me la, enye 'clippingParents'eye ateŋu axɔ HTMLElement ƒe nufiame (to JavaScript ɖeɖeko dzi). Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe detectOverflow docs . |
reference |
kaƒoƒo | element | nu | 'toggle' |
Nufiame ƒe akpa si le nusiwo le fli dzi la me. Xɔ asixɔxɔ siwo le 'toggle', 'parent', HTMLElement ƒe nufiame alo nusi naa getBoundingClientRect. Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe constructor docs kple virtual element docs . |
display |
ka | 'dynamic' |
Le gɔmedzedzea me la, míezãa Popper hena teƒeɖoɖo si trɔna. Tsɔ esia wɔ dɔe kple static. |
offset |
ƒuƒoƒo | kaƒoƒo | wᴐ dᴐ | [0, 2] |
Offset of the dropdown ne wotsɔe sɔ kple eƒe taɖodzinu. Àteŋu atsɔ ka aɖe ayi nyatakaka nɔnɔmewo me kple asixɔxɔ siwo woɖe ɖe vovo comma me abe: Ne wozã dɔwɔwɔ aɖe tsɔ nya offset la, woyɔnɛ kple nusi me popper ƒe ɖoɖo, nufiame, kple popper rects le abe eƒe nyaʋiʋli gbãtɔ ene. Wotsɔa nusi ʋãa nu DOM node la toa eme abe nyaʋiʋli evelia ene. Ele be dɔwɔwɔa natrɔ ƒuƒoƒo si me xexlẽdzesi eve le: . Ne èdi nyatakaka bubuwo la, kpɔ Popper ƒe offset docs . |
autoClose |
boolean ƒe ƒuƒoƒo | ka | true |
Trɔ asi le auto close nuwɔna si le dropdown la ŋu:
|
popperConfig |
null | nu | wᴐ dᴐ | null |
Ne èdi be yeatrɔ Bootstrap ƒe Popper ƒe ɖoɖowɔɖi gbãtɔ la, kpɔ Popper ƒe ɖoɖowɔɖi . Ne wozã dɔwɔwɔ aɖe tsɔ wɔ Popper ƒe ɖoɖowɔɖi la, woyɔnɛ kple nusi me Bootstrap ƒe Popper ƒe ɖoɖowɔɖi gbãtɔ le. Ekpena ɖe ŋuwò nèzãa default la eye nàtsɔe aƒo ƒu kple wò ŋutɔ wò ɖoɖowɔɖi. Ele be dɔwɔwɔa natrɔ ɖoɖowɔɖi ƒe nu aɖe na Popper. |
Zã dɔwɔwɔ kplepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Mɔnuwo
| Nuwɔmɔnu | Nuɖᴐɖᴐ |
|---|---|
toggle |
Trɔa navbar alo tabbed navigation aɖe si wona la ƒe dropdown menu. |
show |
Fia navbar alo tabbed navigation si wona ƒe menu si le tsia dzi. |
hide |
Ɣla navbar alo tabbed navigation si wona ƒe menu si le tsia dzi. |
update |
Trɔ asi le element aɖe ƒe dropdown ƒe nɔƒe ŋu. |
dispose |
Egblẽa nu le element aɖe ƒe dropdown ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa) |
getInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ dropdown instance si do ƒome kple DOM element aɖe, àteŋu azãe ale:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Static mɔnu si trɔa dropdown instance si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale:bootstrap.Dropdown.getOrCreateInstance(element) |
Nudzɔdzɔwo
Wodaa nudzɔdzɔ siwo katã le tsia dzi la ɖe toggling element la dzi eye emegbe wowɔa bubbled up. Eyata àteŋu atsɔ nudzɔdzɔ ƒe toɖolawo hã akpe ɖe .dropdown-menu's dzila ƒe akpaa ŋu. hide.bs.dropdowneye hidden.bs.dropdownnudzɔdzɔwo ƒe nɔnɔme aɖe le wo si clickEvent(ne Nudzɔdzɔ ƒomevi gbãtɔ nye click) si me Nudzɔdzɔ ƒe Nu le na nudzɔdzɔ si wozi.
| Nuwɔmɔnu | Nuɖᴐɖᴐ |
|---|---|
show.bs.dropdown |
Dzoa enumake ne woyɔ show instance mɔnu la. |
shown.bs.dropdown |
Woɖea dzo ne wowɔ dropdown la be wòadze na zãla eye CSS ƒe tɔtrɔwo wu enu. |
hide.bs.dropdown |
Dzoa enumake ne woyɔ hide instance mɔnu la. |
hidden.bs.dropdown |
Wodoa dzo ne wowu dropdown la ɣla ɖe zãla la nu eye CSS ƒe tɔtrɔwo wu enu. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})