Ukwehla
Guqula umxholo wokwaleka ukuze ubonise uluhlu lwamakhonkco kunye nokunye kunye ne-Bootstrap yokuhla iplagi.
Isishwankathelo
Ukwehla kuyatshintsheka, ukwaleka ngokomxholo wokubonisa uluhlu lwamakhonkco kunye nokunye. Zenziwe ukuba zisebenze kunye ne-Bootstrap yokuhla iplagi yeJavaScript. Ziguqulwa ngokucofa, hayi ngokushukuma; esi sisigqibo soyilo ngabom .
Ukwehla kwakhelwe kwithala leencwadi lesithathu, iPopper , ebonelela ngokuma okuguquguqukayo kunye nobhaqo lwendawo yokujonga. Qinisekisa ukuquka i -popper.min.js phambi kweJavaScript yeBootstrap okanye usebenzise bootstrap.bundle.min.js
/ bootstrap.bundle.js
equlethe iPopper. I-Popper ayisetyenziswanga ukubeka ukwehla kwi-navbar nangona kungafuneki indawo eguqukayo.
Ukufikeleleka
Umgangatho we WAI ARIA uchaza role="menu"
iwijethi yokwenyani , kodwa oku kukodwa kwisicelo-njengemenu ezixhokonxa iintshukumo okanye imisebenzi. Iimenyu zeARIA zinokuqulatha kuphela izinto zemenyu, izinto zemenyu yebhokisi yokukhangela, izinto zemenyu yeqhosha lerediyo, amaqela amaqhosha erediyo, kunye neemenyu ezisezantsi.
I-Bootstrap's dropdowns, kwelinye icala, yenzelwe ukuba ibe yegeneric kwaye isebenze kwiimeko ezahlukeneyo kunye nezakhiwo zokuphawula. Umzekelo, kuyenzeka ukuba wenze izinto eziwa phantsi eziqulathe amagalelo awongezelelweyo kunye nolawulo lwefom, njengemimandla yokukhangela okanye iifom zokungena. Ngesi sizathu, iBootstrap ayilindelanga (okanye yongeze ngokuzenzekelayo) nayiphi na role
kunye aria-
neempawu ezifunekayo kwiimenyu zokwenyani zeARIA . Ababhali kuya kufuneka babandakanye ezi mpawu zithe ngqo ngokwabo.
Nangona kunjalo, i-Bootstrap iyongeza inkxaso eyakhelwe-ngaphakathi kunxibelelwano lwemenyu yebhodi yezitshixo eqhelekileyo, njengokukwazi ukuhamba .dropdown-item
kwizinto ezizimeleyo usebenzisa izitshixo zekhesa kwaye uvale imenyu ESCngesitshixo.
Imizekelo
Gqibezela itoggle yokwehla (iqhosha lakho okanye ikhonkco) kunye nemenyu eyehlayo ngaphakathi .dropdown
, okanye enye into ebhengeza position: relative;
. Ukwehla kunokuvuswa ukusuka <a>
okanye <button>
izinto ukuze zilungele iimfuno zakho ezinokubakho. Imizekelo eboniswe apha isebenzisa <ul>
iimpawu zesemantic apho kufanelekileyo, kodwa uphawu lwesiko luyaxhaswa.
Iqhosha elinye
Nayiphi na enye .btn
ingajikwa ibe yidropdown toggle nolunye utshintsho lophawulo. Nantsi indlela onokuthi uzisebenzise ngayo naziphi na <button>
izinto:
<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>
Kwaye kunye <a>
nezinto:
<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>
Elona candelo lilungileyo ungakwenza oku ngalo naluphi na uhlobo lweqhosha, nalo:
<!-- 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>
Yahlula iqhosha
Ngokukwanjalo, yenza iqhosha elicandiweyo elehlayo elinophawu olufanayo njengokwehla kweqhosha elinye, kodwa ngokongezwa .dropdown-toggle-split
kwesithuba esifanelekileyo esijikeleze ukhathalelo lokuhla.
Sisebenzisa olu didi longeziweyo ukunciphisa okuthe tyaba padding
macala omabini ekhathalelo ngama-25% kwaye sisuse margin-left
oko kongezwe kumaqhosha asezantsi. Olo tshintsho olongezelelweyo lugcina i-caret igxile kwiqhosha lokwahlula kwaye unikeze indawo yokubetha ngokufanelekileyo ngokufanelekileyo ecaleni kweqhosha eliphambili.
<!-- 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>
Ubungakanani
Amaqhosha okwehlayo asebenza ngamaqhosha abo bonke ubukhulu, kubandakanywa ukungagqibekanga kunye namaqhosha okulahla.
<!-- 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>
Ukuhla okumnyama
Ngena kwi-dropdowns ezimnyama ukuze utshatise i-navbar emnyama okanye isimbo esiqhelekileyo ngokongeza .dropdown-menu-dark
kwekhoyo .dropdown-menu
. Akukho zinguqu zifunekayo kwizinto ezihlayo.
<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>
Kwaye uyisebenzise kwi-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>
Izalathiso
RTL
Umkhomba-ndlela uboniswa xa usebenzisa i-Bootstrap kwi-RTL, intsingiselo .dropstart
iya kuvela kwicala lasekunene.
Ukulahla
Qalisa imenyu eyehlayo ngentla kweziqalelo ngokongeza .dropup
kwinto 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-Dropright
Qalisa imenyu eyehlayo ekunene kwezinto ngokongeza .dropend
kwinto engumzali.
<!-- 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 imenyu eyehlayo ekhohlo kwizinto ngokongeza .dropstart
kwinto engumzali.
<!-- 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>
okanye <button>
izinto njengezinto ezihlayo.
<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>
Unako kwakhona ukwenza izinto zokuhla ezingasebenziyo nge .dropdown-item-text
. Zive ukhululekile ukwenza isitayile ngakumbi ngeCSS yesiko okanye izinto ezisetyenzisiweyo zokubhaliweyo.
<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
Yongeza .active
kwizinto ezikuluhlu olusezantsi ukuze zizitayile njengezisebenzayo . Ukuhambisa imo esebenzayo kubuchwephesha bokuncedisa, sebenzisa aria-current
uphawu — usebenzisa page
ixabiso lephepha langoku, okanye true
into yangoku kwiseti.
<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>
Kukhubazekile
Yongeza .disabled
kwizinto ezikuluhlu olusezantsi ukuze uzibhale njengezicinyiweyo .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Ulungelelwaniso lwemenyu
Ngokungagqibekanga, imenyu eyehlayo ibekwa ngokuzenzekelayo nge-100% ukusuka phezulu kunye necala lasekhohlo lomzali wayo. Ungayitshintsha le nto .drop*
ngeeklasi zesalathiso, kodwa ungaphinda uzilawule ngeeklasi ezongezelelweyo zesilungisi.
Yongeza .dropdown-menu-end
ku-a .dropdown-menu
ukuya ekunene lungelelanisa imenyu eyehlayo. Umkhomba-ndlela uboniswa xa usebenzisa i-Bootstrap kwi-RTL, intsingiselo .dropdown-menu-end
iya kuvela kwicala lasekhohlo.
<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>
Ulungelelwaniso oluphendulayo
Ukuba ufuna ukusebenzisa ulungelelwaniso oluphendulayo, khubaza indawo eguqukayo ngokudibanisa data-bs-display="static"
uphawu kwaye usebenzise iiklasi zokwahluka eziphendulayo.
Ukulungelelanisa ekunene imenyu eyehlayo kunye nendawo yokuphumla enikiweyo okanye enkulu, yongeza .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>
Ukulungelelanisa ekhohlo imenyu eyehlayo kunye nendawo yoqhawulo enikiweyo okanye enkulu, yongeza .dropdown-menu-end
kunye .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 ukuba awudingi kongeza data-bs-display="static"
uphawu loyelelwano kumaqhosha okwehla kwii-navbar, kuba iPopper ingasetyenziswa kwiinavbar.
Iinketho zolungelelwaniso
Ukuthatha uninzi lweenketho eziboniswe ngasentla, nantsi idemo yekhitshi encinci yetinki yeenketho ezahlukeneyo zolungelelwaniso lokuhla kwindawo enye.
<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>
Umxholo wemenyu
Iiheader
Yongeza iheader ukulebhelisha amacandelo eentshukumo kuyo nayiphi na 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>
Abahluli
Yahlula amaqela ezinto zemenyu ezinxulumeneyo kunye nesahluli.
<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>
Isicatshulwa
Beka nasiphi na isicatshulwa esikhululekileyo kwimenyu eyehlayo ngokubhaliweyo kwaye usebenzise izixhobo zesithuba . Qaphela ukuba uya kufuna izimbo zokulinganisa ezongezelelweyo ukunyanzela 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>
Iifom
Faka ifom ngaphakathi kwemenyu eyehlayo, okanye uyenze ibe yimenyu eyehlayo, kwaye usebenzise i -margin okanye i-padding eziluncedo ukuyinika indawo engalunganga oyifunayo.
<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>
Iinketho zokwehla
Sebenzisa data-bs-offset
okanye data-bs-reference
utshintshe indawo yokwehla.
<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 ukuziphatha
Ngokungagqibekanga, imenyu eyehlayo iyavalwa xa ucofa ngaphakathi okanye ngaphandle kwemenyu eyehlayo. Ungasebenzisa autoClose
ukhetho ukutshintsha le mikhwa yokwehla.
<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
Izinto eziguquguqukayo
Izinto eziguquguqukayo kuzo zonke izinto eziwa phantsi:
$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($gray-900, 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;
Izinto eziguquguqukayo zokwehla 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;
Izinto eziguquguqukayo zeenkathalelo ezisekwe kwi-CSS ezibonisa ukusebenzisana kokwehla:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Imixube
I-Mixins isetyenziselwa ukuvelisa i-CSS-based carets kwaye inokufumaneka kwi 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;
}
}
}
Ukusetyenziswa
Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo itshintsha umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .show
iklasi kumzali .dropdown-menu
. Uphawu data-bs-toggle="dropdown"
loyelelwano kuthenjelwe kulo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.
mouseover
kubantwana
<body>
abasondeleyo bento. Oku kuvunyiweyo ukuba kubi kwe-Hack kuyafuneka ukusebenza malunga ne-
quirk kwi-iOS' abathunywa besiganeko , ebenokuthi ngenye indlela ithintele itephu naphi na ngaphandle kokwehla ekuqaliseni ikhowudi evala ukuhla. Nje ukuba idropdown ivaliwe, ezi zibambi zongezelelweyo ezingenanto
mouseover
ziyasuswa.
Ngeempawu zedatha
Yongeza data-bs-toggle="dropdown"
kwikhonkco okanye iqhosha ukuguqula ukwehla.
<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>
NgeJavaScript
Fowunela ukwehla ngeJavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
isafuneka
Nokuba ufowunela ukwehla kwakho ngeJavaScript okanye endaweni yoko usebenzise i-data-api, data-bs-toggle="dropdown"
isoloko ifuneka ukuba ubekhona kwindawo yokuqalisa ukwehla.
Iinketho
Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-bs-
, njengakwi data-bs-offset=""
. Qinisekisa ukuba utshintsha uhlobo lwetyala legama lokukhetha ukusuka kwikamela ukuya kwi-kebab-case xa udlula iinketho ngeempawu zedatha. Umzekelo, endaweni yokusebenzisa data-bs-autoClose="false"
, sebenzisa data-bs-auto-close="false"
.
Igama | Uhlobo | Ukuhlala kukho | Inkcazo |
---|---|---|---|
boundary |
umtya | isiqalelo | 'clippingParents' |
Umda wothintelo lokuphuphumayo kwimenyu eyehlayo (isebenza kuphela kwisilungisi sePopper sokuthintela ukuphuphuma). Ngokungagqibekanga yiyo 'clippingParents' kwaye inokwamkela i-HTMLElement ireferensi (ngeJavaScript kuphela). Ngolwazi oluthe vetshe jonga kuPopper's detectOverflow amaxwebhu . |
reference |
umtya | into | into | 'toggle' |
Isalathiso sesiqalelo semenyu eyehlayo. Yamkela amaxabiso e 'toggle' , 'parent' , i HTMLElement ireferensi okanye into enikezelayo getBoundingClientRect . Ngolwazi oluthe kratya jonga kumaxwebhu omakhi wePopper kunye needokhi zento ebonakalayo . |
display |
umtya | 'dynamic' |
Ngokungagqibekanga, sisebenzisa iPopper kwindawo eguqukayo. Khubaza oku nge static . |
offset |
uluhlu | umtya | umsebenzi | [0, 2] |
I-offset yokuhla xa ithelekiswa nethagethi yayo. Ungadlula umtya kwiimpawu zedatha ezinamaxabiso ahlulwe ngokwekoma afana: Xa umsebenzi usetyenziselwa ukumisela i-offset, ubizwa ngento equlathe ukubeka i-popper, ireferensi, kunye ne-popper i-rects njengengxabano yayo yokuqala. Isiqalo se-DOM node sigqithiselwe njengengxoxo yesibini. Umsebenzi kufuneka ubuyisele uluhlu olunamanani amabini: . Ngolwazi oluthe vetshe jonga kumaxwebhu e-Popper's offset . |
autoClose |
bhuqa | umtya | true |
Qwalasela indlela yokuvala ngokuzenzekelayo kokwehla:
|
popperConfig |
null | into | umsebenzi | null |
Ukutshintsha uqwalaselo lwePopper lweBootstrap olungagqibekanga, bona uqwalaselo lwePopper . Xa umsebenzi usetyenziswa ukwenza uqwalaselo lwePopper, ibizwa ngento equlathe uqwalaselo lwePopper yeBootstrap engagqibekanga. Ikunceda ukuba usebenzise kwaye udibanise ukungagqibeki kunye noqwalaselo lwakho. Umsebenzi kufuneka ubuyisele into yoqwalaselo yePopper. |
Ukusebenzisa umsebenzi ngepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Iindlela
Indlela | Inkcazo |
---|---|
toggle |
Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed. |
show |
Ibonisa imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed. |
hide |
Ifihla imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed. |
update |
Ihlaziya indawo yokwehla kwento. |
dispose |
Itshabalalisa into eyehlayo. (Isusa idatha egciniweyo kwisiqalelo seDOM) |
getInstance |
Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wokuhla ohambelana nento yeDOM, ungayisebenzisa ngolu hlobo:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Indlela engatshintshiyo ebuyisela ukwehla okuyanyaniswa kwinto yeDOM okanye yenze entsha ukuba ayikhange iqalwe. Ungayisebenzisa ngolu hlobo:bootstrap.Dropdown.getOrCreateInstance(element) |
Iziganeko
Yonke iminyhadala eyehlayo igxothwa kwindawo yokuguqula kwaye emva koko iqhume phezulu. Ngoko unokongeza abaphulaphuli besiganeko kwinto .dropdown-menu
yomzali. hide.bs.dropdown
kunye hidden.bs.dropdown
neziganeko clickEvent
zinepropati (kuphela xa uhlobo loMnyadala loqobo luyi click
) equlathe iNjongo yeSigaba somnyadala wonqakrazo.
Indlela | Inkcazo |
---|---|
show.bs.dropdown |
Imililo ngoko nangoko xa indlela yomboniso ibizwa ngokuba. |
shown.bs.dropdown |
Itshiswe xa ukwehla kwenziwe kwabonakala kumsebenzisi kwaye iinguqulelo zeCSS zigqityiwe. |
hide.bs.dropdown |
Imililo ngoko nangoko xa indlela yokufihla umzekelo ibizwe. |
hidden.bs.dropdown |
Itshiswe xa ukwehla kugqityiwe ukufihlwa kumsebenzisi kwaye iinguqulelo zeCSS zigqityiwe. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})