Okwehliswayo
Guqula izimbondela zokuqukethwe ukuze ubonise izinhlu zezixhumanisi nokunye okwengeziwe nge-plugin eyehlayo ye-Bootstrap.
Uhlolojikelele
Okwehliswayo kuyaguquleka, imbondela yomongo yokubonisa izinhlu zezixhumanisi nokuningi. Enziwe asebenzisane ne-plugin ye-JavaScript eyehlayo ye-Bootstrap efakiwe. Aguqulwa ngokuchofoza, hhayi ngokuhambisa phezulu; lesi yisinqumo somklamo wamabomu .
Okwehliswayo kwakhelwe kulabhulali yenkampani yangaphandle, i- Popper , ehlinzeka ngokuma okunamandla nokutholwa kwembobo yokubuka. Qiniseka ukuthi ufaka i- popper.min.js ngaphambi kwe-JavaScript ye-Bootstrap noma sebenzisa bootstrap.bundle.min.js
/ bootstrap.bundle.js
equkethe i-Popper. I-Popper ayisetshenziselwa ukubeka okwehlayo kuma-navbar nakuba ukuma okuguquguqukayo kungadingeki.
Ukufinyeleleka
Izinga le- WAI ARIArole="menu"
lichaza iwijethi yangempela , kodwa lokhu kuqondiswe kumamenyu afana nohlelo lokusebenza aqalisa izenzo noma imisebenzi. Amamenyu e -ARIA angaqukatha kuphela izinto zemenyu, izinto zemenyu yebhokisi lokuhlola, izinto zemenyu yezinkinobho zomsakazo, amaqembu ezinkinobho zomsakazo, namamenyu amancane.
Okwehliswayo kwe-Bootstrap, ngakolunye uhlangothi, kuklanyelwe ukuba kube yijenerikhi futhi kusebenze ezimeni ezahlukahlukene kanye nezakhiwo zokumaka. Isibonelo, kungenzeka ukudala okwehliswayo okuqukethe okokufaka okwengeziwe nezilawuli zefomu, njengezinkambu zokusesha noma amafomu okungena ngemvume. Ngalesi sizathu, i-Bootstrap ayilindele (noma yengeze ngokuzenzakalelayo) noma yiziphi role
izibaluli aria-
ezidingekayo kumamenyu e -ARIA eqiniso. Ababhali kuyodingeka bafake lezi zibaluli eziqondile ngokwabo.
Kodwa-ke, i-Bootstrap iyengeza usekelo olwakhelwe ngaphakathi lokusebenzisana kwemenyu yekhibhodi ejwayelekile, njengokukwazi ukuhamba phakathi .dropdown-item
kwezakhi ngazinye usebenzisa okhiye bekhesa nokuvala imenyu ESCngokhiye.
Izibonelo
Goqa inguquko yokudonsela phansi (inkinobho noma isixhumanisi sakho) kanye nemenyu yokudonsela phansi ngaphakathi .dropdown
, noma enye into ememezela position: relative;
. Okwehliswayo kungase kuqaliswe kusuka <a>
noma ama <button>
-elementi ukuze kulingane kangcono nezidingo zakho ezingaba khona. Izibonelo eziboniswe lapha zisebenzisa <ul>
izakhi ze-semantic lapho kufanele khona, kodwa umaka wangokwezifiso uyasekelwa.
Inkinobho eyodwa
Noma iyiphi ingoma eyodwa .btn
ingashintshwa ibe okokudonsela phansi ngezinye izinguquko zemakhaphu. Nansi indlela ongazisebenzisa ngayo noma yiziphi <button>
izici:
<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>
Futhi ngama- <a>
elementi:
<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>
Ingxenye engcono kakhulu ukuthi ungakwenza lokhu nganoma yikuphi okuhlukile kwenkinobho, futhi:
<!-- 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>
Inkinobho yokuhlukanisa
Ngokufanayo, dala okwehliswayo kwenkinobho yokuhlukanisa okunophawu olufanayo nolwehlayo lwenkinobho eyodwa, kodwa ngokungezwa kwesikhala .dropdown-toggle-split
esifanele endaweni yokunakekela okwehlayo.
Sisebenzisa lesi sigaba esengeziwe ukuze sinciphise okuvundlile padding
nhlangothi zombili ze-caret ngo-25% futhi sisuse margin-left
lokho okwengezwe ekwehliseni phansi kwezinkinobho ezivamile. Lezo zinguquko ezengeziwe zigcina i-caret igxile enkinobheni yokuhlukanisa futhi inikeza indawo yokushaya enosayizi ofanele eduze kwenkinobho eyinhloko.
<!-- 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>
Ukulinganisa
Okwehliswayo kwezinkinobho kusebenza ngezinkinobho zabo bonke osayizi, okuhlanganisa nezinkinobho ezizenzakalelayo nezihlukanisayo ezidonsela phansi.
<!-- 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>
Okwehliswayo okumnyama
Ngena kokwehliswayo okumnyama ukuze ufane ne-navbar emnyama noma isitayela sangokwezifiso ngokungeza .dropdown-menu-dark
kokukhona .dropdown-menu
. Azikho izinguquko ezidingekayo ezintweni ezidonsela phansi.
<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>
Futhi ukuyisebenzisa ku-navbar:
<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>
Izikhombisi-ndlela
I-RTL
Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-RTL, okusho ukuthi .dropstart
kuzovela ngakwesokudla.
Ukwehliswa
Qalisa amamenyu okwehlayo ngenhla kwezici ngokwengeza .dropup
engxenyeni engumzali.
<!-- 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>
I-Droright
Qalisa amamenyu okwehlayo kwesokudla sezakhi ngokwengeza .dropend
kusici esingumzali.
<!-- 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>
I-Dropleft
Qalisa amamenyu okwehlayo kwesokunxele sezinto ngokwengeza .dropstart
kusici esingumzali.
<!-- 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>
Izinto zemenyu
Ungasebenzisa <a>
noma ama <button>
-elementi njengezinto ezidonsela phansi.
<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>
Ungakwazi futhi ukudala izinto ezidonsela phansi ezingasebenzisani nge- .dropdown-item-text
. Zizwe ukhululekile ukwenza isitayela ngokuqhubekayo nge-CSS yangokwezifiso noma izinsiza zombhalo.
<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>
Iyasebenza
Engeza .active
ezintweni kokwehliswayo ukuze wenze isitayela njengezisebenzayo . Ukuze udlulisele isimo esisebenzayo kubuchwepheshe obusizayo, sebenzisa aria-current
isibaluli — usebenzisa page
inani lekhasi lamanje, noma true
into yamanje kusethi.
<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>
Ikhutshaziwe
Engeza .disabled
ezintweni kokwehliswayo ukuze wenze isitayela njengezikhutshaziwe .
<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>
Ukuqondanisa imenyu
Ngokuzenzakalela, imenyu yokudonsela phansi imiswa ngokuzenzakalelayo ngo-100% ukusuka phezulu nangakwesokunxele somzali wayo. Ungakushintsha lokhu .drop*
ngamakilasi aqondisayo, kodwa futhi ungawalawula ngamakilasi engeziwe okulungisa.
Engeza .dropdown-menu-end
kokuthi a .dropdown-menu
ukuze uqondanise kwesokudla imenyu eyehlayo. Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-RTL, okusho ukuthi .dropdown-menu-end
kuzovela ohlangothini lwesobunxele.
<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>
Ukuqondanisa okusabelayo
Uma ufuna ukusebenzisa ukuqondanisa okusabelayo, khubaza ukuma okuguquguqukayo ngokungeza data-bs-display="static"
isibaluli futhi usebenzise izigaba ezisabelayo zokuhlukahluka.
Ukuze uqondanise kwesokudla imenyu eyehlayo nendawo ehlukanisiwe enikeziwe noma enkulu, engeza .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>
Ukuze uqondanise kwesokunxele imenyu eyehlayo nendawo ehlukanisiwe enikeziwe noma enkulu, engeza .dropdown-menu-end
futhi .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>
Qaphela ukuthi awudingi ukwengeza data-bs-display="static"
isibaluli kuzinkinobho ezidonsela phansi kuma-navbar, njengoba i-Popper ingasetshenziswa kuma-navbar.
Izinketho zokuqondanisa
Ngokuthatha okuningi kwezinketho eziboniswe ngenhla, nansi idemo yekhishi elincane likasinki wezinketho ezihlukahlukene zokuqondanisa okwehlayo endaweni eyodwa.
<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>
Okuqukethwe kwemenyu
Izihloko
Engeza unhlokweni kulebula izigaba zezenzo kunoma iyiphi imenyu eyehlayo.
<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>
Abahlukanisi
Hlukanisa amaqembu ezinto zemenyu ezihlobene ngesihlukanisi.
<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>
Umbhalo
Beka noma imuphi umbhalo we-freeform ngaphakathi kwemenyu eyehlayo onombhalo futhi usebenzise izinsiza zokuhlukanisa isikhala . Qaphela ukuthi cishe uzodinga izitayela zokulinganisa ezengeziwe ukuze ucindezele ububanzi bemenyu.
<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>
Amafomu
Faka ifomu kumenyu eyehlayo, noma ulenze libe yimenyu eyehlayo, futhi usebenzise imajini noma izinto zokunamathisela ukuze ulinikeze isikhala esingesihle osidingayo.
<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>
Izinketho zokwehlisa
Sebenzisa data-bs-offset
noma data-bs-reference
ushintshe indawo yokudonsela phansi.
<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>
Vala ngokuzenzakalela ukuziphatha
Ngokuzenzakalelayo, imenyu eyehlayo iyavalwa uma uchofoza ngaphakathi noma ngaphandle kwemenyu eyehlayo. Ungasebenzisa autoClose
inketho ukushintsha lokhu kuziphatha kokudonsela phansi.
<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
Okuguquguqukayo
Okuguquguqukayo kukho konke okwehliswayo:
$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;
Okuguquguqukayo kokwehla okumnyama :
$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;
Okuguquguqukayo kwama-carets asekelwe ku-CSS abonisa ukusebenzisana kokwehlayo:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Imiksi
Ama-mixin asetshenziselwa ukukhiqiza ama-caret asekelwe ku-CSS futhi angatholakala ku- 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;
}
}
}
Ukusetshenziswa
Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqulela .show
ikilasi kumzali .dropdown-menu
. Isibaluli data-bs-toggle="dropdown"
kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.
mouseover
izibambi ezingenalutho ezinganeni eziseduze ze-
<body>
elementi. Lokhu kugebenga okuvunyiwe ukuthi kubi kuyadingeka ukuze
kulungiswe okuthile ekuthunyelweni komcimbi we-iOS , okungavimbela ukuthepha noma yikuphi ngaphandle kokwehliswayo ukuthi kungacuphi ikhodi evala okwehliswayo. Uma okwehliswayo sekuvaliwe, lezi
mouseover
zibambi ezengeziwe ezingenalutho ziyasuswa.
Ngezibaluli zedatha
Engeza data-bs-toggle="dropdown"
kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.
<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>
Nge-JavaScript
Shayela okwehliswayo nge-JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
kusadingeka
Kungakhathaliseki ukuthi ushayela okwehliswayo ucingo nge-JavaScript noma esikhundleni salokho sebenzisa i-data-api, data-bs-toggle="dropdown"
kuyadingeka njalo ukuthi ube khona kusici sokuqala sokwehliswayo.
Izinketho
Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-
, njengaku data-bs-offset=""
. Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho ukusuka ku-camelCase ukuya ku-kebab-kesi lapho udlulisa izinketho ngezibaluli zedatha. Ngokwesibonelo, esikhundleni sokusebenzisa data-bs-autoClose="false"
, sebenzisa data-bs-auto-close="false"
.
Igama | Uhlobo | Okuzenzakalelayo | Incazelo |
---|---|---|---|
boundary |
umucu | isici | 'clippingParents' |
Umkhawulo owumkhawulo wokuchichima wemenyu eyehlayo (usebenza kuphela kusilungisi se-Popper's preventOverflow). Ngokuzenzakalelayo iyona 'clippingParents' futhi ingamukela ireferensi ye-HTMLElement (nge-JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's detectOverflow . |
reference |
umucu | into | into | 'toggle' |
Isici esiyisethenjwa semenyu eyehlayo. Yamukela amanani 'toggle' , 'parent' , inkomba Yesici se-HTML noma into ehlinzekayo getBoundingClientRect . Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti omakhi we-Popper kanye nemibhalo yezinto ezibonakalayo . |
display |
umucu | 'dynamic' |
Ngokuzenzakalelayo, sisebenzisa i-Popper ngokuma okuguquguqukayo. Khubaza lokhu nge- static . |
offset |
uhlu | umucu | umsebenzi | [0, 2] |
I-offset yokwehliswayo ihlobene nethagethi yakhona. Ungadlulisa uchungechunge kuzibaluli zedatha ezinamavelu ahlukaniswe ngokhefana afana nalawa: Uma umsebenzi usetshenziselwa ukunquma i-offset, ubizwa ngento equkethe ukubekwa kwe-popper, ireferensi, kanye ne-popper rects njengempikiswano yayo yokuqala. Into eqalisayo inodi ye-DOM idluliswa njengempikiswano yesibili. Umsebenzi kufanele ubuyisele amalungu afanayo anezinombolo ezimbili: . Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's offset . |
autoClose |
bhula | umucu | true |
Lungiselela ukuziphatha kokuvala ngokuzenzakalela kokwehlayo:
|
popperConfig |
null | into | umsebenzi | null |
Ukuze uguqule ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap, bona ukucushwa kwe-Popper . Uma umsebenzi usetshenziselwa ukudala ukucushwa kwe-Popper, kubizwa ngento equkethe ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap. Ikusiza ukuthi usebenzise futhi uhlanganise okumisiwe nokucushwa kwakho. Umsebenzi kufanele ubuyisele into yokumisa ye-Popper. |
Ukusebenzisa umsebenzi ngepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Izindlela
Indlela | Incazelo |
---|---|
toggle |
Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu. |
show |
Ibonisa imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu. |
hide |
Ifihla imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu. |
update |
Ibuyekeza indawo yokudonsela phansi kwe-elementi. |
dispose |
Icekela phansi i-elementi. (Isusa idatha egciniwe kusici se-DOM) |
getInstance |
Indlela emile ekuvumela ukuthi uthole isibonelo sokwehla esihlotshaniswa nento ye-DOM, ungayisebenzisa kanje:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Indlela emile ebuyisela isenzakalo sokwehla esihlobene nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje:bootstrap.Dropdown.getOrCreateInstance(element) |
Imicimbi
Yonke imicimbi yokudonsela phansi idutshulwa ku-elementi yokuguqula bese ikhishwa amabhamuza. Ngakho-ke ungakwazi ukwengeza abalaleli bomcimbi kusici .dropdown-menu
esingumzali. hide.bs.dropdown
futhi hidden.bs.dropdown
imicimbi clickEvent
inesici (kuphela uma uhlobo lomcimbi wangempela click
) equkethe Into Yomcimbi yomcimbi wokuchofoza.
Indlela | Incazelo |
---|---|
show.bs.dropdown |
Imililo ngokushesha lapho indlela yesibonelo sombukiso ibizwa. |
shown.bs.dropdown |
Kuxoshwe lapho okwehliswayo kwenziwe kwabonakala kumsebenzisi futhi ukuguqulwa kwe-CSS kuqediwe. |
hide.bs.dropdown |
Imililo ngokushesha lapho indlela yokufihla isibiziwe. |
hidden.bs.dropdown |
Kuxoshwe lapho okwehliswayo kuqedile ukufihlwa kumsebenzisi futhi ukuguqulwa kwe-CSS kuqediwe. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})