Ibitonyanga
Kuzuza ibice byuzuye kugirango werekane urutonde rwihuza nibindi hamwe na Bootstrap yamanutse.
Incamake
Ibitonyanga birashobora guhindagurika, guhuza ibice kugirango werekane urutonde rwihuza nibindi byinshi. Byakozwe muburyo bwimikorere ya Bootstrap yamanutse plugin ya JavaScript. Barahindurwa mukanda, ntabwo ari ukuzunguruka; iki nicyemezo cyo gushushanya nkana .
Ibitonyanga byubatswe kububiko bwibitabo bwagatatu, Popper , itanga umwanya uhagaze hamwe no kureba. Wemeze gushyiramo popper.min.js mbere ya JavaScript ya Bootstrap cyangwa ukoreshe bootstrap.bundle.min.js
/ bootstrap.bundle.js
irimo Popper. Popper ntabwo ikoreshwa kugirango ihagarike ibitonyanga muri navbars nubwo nkibikorwa bya dinamike bidasabwa.
Kuboneka
Igipimo cya WAI ARIA gisobanura role="menu"
widget ifatika , ariko ibi birihariye kubisabwa-nkibikubiyemo bitera ibikorwa cyangwa imikorere. Ibikubiyemo bya ARIA birashobora gusa kuba bikubiyemo ibintu, kugenzura agasanduku k'ibikubiyemo, ibintu bya radiyo buto ya menu, amatsinda ya buto ya radio, na sub-menus.
Ibitonyanga bya Bootstrap, kurundi ruhande, byashizweho kugirango bibe rusange kandi bikurikizwa mubihe bitandukanye no kuranga imiterere. Kurugero, birashoboka gukora ibitonyanga birimo inyongeramusaruro ninyongera kugenzura, nkibice byo gushakisha cyangwa ifishi yinjira. Kubwiyi mpamvu, Bootstrap ntabwo yiteze (cyangwa guhita yongeraho) icyaricyo cyose role
nibiranga aria-
bisabwa kuri ARIA nyayo . Abanditsi bagomba gushyiramo ibi biranga byihariye ubwabo.
Ariko, Bootstrap yongeramo inkunga-yubufasha bwa menu ya clavier isanzwe ikora, nkubushobozi bwo kunyura .dropdown-item
mubintu bitandukanye ukoresheje urufunguzo rwa indanga no gufunga menu ESCnurufunguzo.
Ingero
Kuzuza ibimanuka (buto yawe cyangwa ihuza) na menu yamanutse imbere .dropdown
, cyangwa ikindi kintu gitangaza position: relative;
. Ibitonyanga birashobora gukururwa bivuye <a>
cyangwa <button>
ibintu kugirango bihuze neza nibyo ukeneye. Ingero zerekanwa hano zikoresha <ul>
ibintu bisobanutse aho bikenewe, ariko ikimenyetso cyihariye kirashyigikiwe.
Akabuto kamwe
Ikintu icyo aricyo cyose .btn
gishobora guhinduka kumanuka uhindagurika hamwe nibimenyetso byahindutse. Dore uburyo ushobora kubashyira mubikorwa hamwe <button>
nibintu:
<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>
Kandi hamwe <a>
nibintu:
<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>
Igice cyiza nuko ushobora kubikora ukoresheje buto iyo ariyo yose, nayo:
<!-- 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>
Gutandukanya buto
Mu buryo busa nabwo, kora ibice bitandukanya ibice byamanutse hamwe nikimenyetso kimwe kimwe na buto imwe yamanutse, ariko hamwe no kongeramo .dropdown-toggle-split
umwanya ukwiye hafi yigitonyanga.
Dukoresha iri somo ryinyongera kugirango tugabanye horizontal padding
kumpande zombi za caret kuri 25% hanyuma dukureho margin-left
ibyo byongeweho kubisanzwe bya buto. Izo mpinduka zinyongera zituma caret yibanze muri bouton igabanijwe kandi igatanga ahantu hanini cyane hit hitabwa kuruhande rwa buto nkuru.
<!-- 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>
Ingano
Utubuto tumanuka dukorana na buto yubunini bwose, harimo nibisanzwe no kugabanura ibitonyanga.
<!-- 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>
Ibitonyanga byijimye
Hitamo muburyo bwijimye kugirango uhuze na navbar yijimye cyangwa uburyo bwihariye wongeyeho .dropdown-menu-dark
kubihari .dropdown-menu
. Nta gihinduka gisabwa kubintu byamanutse.
<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>
Kandi kuyishyira mugukoresha 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>
Icyerekezo
RTL
Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri RTL, bivuze .dropstart
ko izagaragara kuruhande rwiburyo.
Ibitonyanga
Imbarutso yamanutse iboneka hejuru yibintu wongeyeho .dropup
kubabyeyi.
<!-- 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>
Ibitonyanga
Imbarutso yamanutse iboneka iburyo bwibintu wongeyeho .dropend
kubabyeyi.
<!-- 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>
Ibitonyanga
Imbarutso yamanutse iboneka ibumoso bwibintu wongeyeho .dropstart
kubabyeyi.
<!-- 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>
Ibikubiyemo
Urashobora gukoresha <a>
cyangwa <button>
ibintu nkibintu byamanutse.
<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>
Urashobora kandi gukora ibintu bitagabanije kumanura ibintu hamwe .dropdown-item-text
. Wumve neza ko wuburyo bwiza hamwe na CSS yihariye cyangwa ibikoresho byingirakamaro.
<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>
Bikora
Ongeraho .active
mubintu mumanuka kugirango ubitondere nkibikorwa . Kugirango utange leta ikora kugirango ifashe ikoranabuhanga, koresha aria-current
ikiranga - ukoresheje page
agaciro kurupapuro rwubu, cyangwa true
kubintu biri mumurongo.
<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>
Abamugaye
Ongeraho .disabled
mubintu biri kumanuka kugirango ubitondere nkuko byahagaritswe .
<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>
Guhuza Ibikubiyemo
Mburabuzi, menu yamanutse ihita ishyirwa 100% uhereye hejuru no kuruhande rwibumoso rwababyeyi. Urashobora guhindura ibi hamwe nibyiciro byerekezo .drop*
, ariko urashobora no kubigenzura hamwe namasomo yinyongera yo guhindura.
Ongeraho iburyo .dropdown-menu-end
kugirango .dropdown-menu
uhuze menu yamanutse. Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri RTL, bivuze .dropdown-menu-end
ko izagaragara kuruhande rwibumoso.
<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>
Guhuza ibisubizo
Niba ushaka gukoresha ihuza ryitondewe, hagarika dinamike ihagaze wongeyeho data-bs-display="static"
ikiranga kandi ukoreshe ibyiciro bitandukanye.
Guhuza iburyo ibimanuka hamwe nibisobanuro byatanzwe cyangwa binini, ongeraho .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>
Guhuza ibumoso bwamanutse hamwe nibisobanuro byatanzwe cyangwa binini, ongeraho .dropdown-menu-end
na .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>
Menya ko udakeneye kongeramo data-bs-display="static"
ikiranga kumanuka utubuto muri navbars, kubera ko Popper idakoreshwa muri navbars.
Guhitamo
Ufashe ibyinshi mumahitamo yerekanwe hejuru, dore igikoni gito cyo mu gikoni cyerekana uburyo butandukanye bwo guhuza ibiciro ahantu hamwe.
<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>
Ibikubiyemo
Imitwe
Ongeraho umutwe kumurango ibice byibikorwa muri menu yamanutse.
<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>
Abatandukanya
Tandukanya amatsinda yibintu bifitanye isano nibice.
<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>
Inyandiko
Shira inyandiko iyo ari yo yose yubuntu muri menu yamanutse hamwe ninyandiko hanyuma ukoreshe umwanya utandukanye . Menya ko ushobora gukenera inyongera zingana kugirango ubuze menu ubugari.
<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>
Ifishi
Shira ifishi muri menu yamanutse, cyangwa uyigire muri menu yamanutse, hanyuma ukoreshe margin cyangwa padding utanga kugirango uhe umwanya mubi ukeneye.
<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>
Amahitamo
Koresha data-bs-offset
cyangwa data-bs-reference
uhindure ahantu hamanuka.
<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>
Imodoka yegeranye
Mburabuzi, ibimanuka byafunzwe iyo ukanze imbere cyangwa hanze ya menu yamanutse. Urashobora gukoresha autoClose
uburyo bwo guhindura iyi myitwarire yo guta.
<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
Ibihinduka
Ibihinduka kubintu byose byamanutse:
$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;
Ibihinduka kumanuka wijimye :
$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;
Ibihinduka kuri CSS ishingiye kuri carets yerekana imikoranire yamanuka:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Imvange
Imvange zikoreshwa mukubyara CSS ishingiye kumurongo kandi urashobora kuboneka muri 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;
}
}
}
Ikoreshwa
Binyuze muri data ibiranga cyangwa JavaScript, plugin yamanutse ihindura ibintu byihishe (ibimanuka byamanutse) uhinduranya .show
ishuri kubabyeyi .dropdown-menu
. Ikiranga data-bs-toggle="dropdown"
gishingiye ku gufunga ibimanuka kurutonde rwa porogaramu, nibyiza rero guhora tuyikoresha.
mouseover
kubana bahita ba
<body>
element. Ibi byemewe ko ari hack birakenewe kugirango dukore hafi
yikinamico mu ntumwa za iOS , ibyo bikaba byabuza gukanda ahantu hose hanze y’igitonyanga gukurura code ifunga ibitonyanga. Iyo ibitonyanga bimaze gufungwa, ibyo byongeweho ubusa
mouseover
bikurwaho.
Binyuze mu biranga amakuru
Ongeraho data-bs-toggle="dropdown"
kumurongo cyangwa buto kugirango uhindure ibitonyanga.
<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>
Binyuze kuri JavaScript
Hamagara ibitonyanga ukoresheje JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
biracyasabwa
Utitaye ko wahamagaye ibitonyanga ukoresheje JavaScript cyangwa ugakoresha data-api, data-bs-toggle="dropdown"
burigihe birasabwa kuba uhari kubintu byamanutse.
Amahitamo
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-
, Nka Muri data-bs-offset=""
. Witondere guhindura ubwoko bwurubanza rwamazina kuva kuri camelCase kuri kebab-urubanza mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, aho gukoresha data-bs-autoClose="false"
, koresha data-bs-auto-close="false"
.
Izina | Andika | Mburabuzi | Ibisobanuro |
---|---|---|---|
boundary |
umugozi | element | 'clippingParents' |
Kurenga imipaka ntarengwa ya menu yamanutse (ikoreshwa gusa kuri popper yo gukumiraOverflow modifier). Mubusanzwe ni 'clippingParents' kandi irashobora kwemera HTMLElement (ukoresheje JavaScript gusa). Kubindi bisobanuro reba popper's detectOverflow docs . |
reference |
umugozi | ikintu | ikintu | 'toggle' |
Ibikoresho byerekana ibintu byamanutse. Emera indangagaciro za 'toggle' ,, 'parent' HTMLElement yerekanwe cyangwa ikintu gitanga getBoundingClientRect . Kubindi bisobanuro reba popper yubaka docs hamwe nibintu bisanzwe . |
display |
umugozi | 'dynamic' |
Mburabuzi, dukoresha Popper kumwanya uhagaze. Hagarika ibi hamwe static . |
offset |
array | umugozi | imikorere | [0, 2] |
Kureka kugabanuka ugereranije nintego yayo. Urashobora gutambutsa umurongo muri data ibiranga hamwe na koma yatandukanijwe indangagaciro nka: Iyo imikorere ikoreshwa mukumenya offset, yitwa hamwe nikintu kirimo icyerekezo cya popper, icyerekezo, hamwe na popper ikosora nkibitekerezo byayo byambere. Ikintu gikurura DOM node yatambutse nkimpaka ya kabiri. Igikorwa kigomba gusubiza umurongo hamwe nimibare ibiri : . Kubindi bisobanuro reba kuri popper ya offset . |
autoClose |
boolean | umugozi | true |
Hindura ibinyabiziga bifunga imyitwarire yamanuka:
|
popperConfig |
null | ikintu | imikorere | null |
Guhindura Bootstrap isanzwe ya Popper config, reba iboneza rya Popper . Iyo imikorere ikoreshwa mugukora iboneza rya Popper, byitwa hamwe nikintu kirimo Bootstrap idasanzwe ya Popper. Iragufasha gukoresha no guhuza ibisanzwe hamwe nuburyo bwawe bwite. Imikorere igomba gusubiza ibintu byabugenewe kuri Popper. |
Gukoresha imikorere hamwepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Uburyo
Uburyo | Ibisobanuro |
---|---|
toggle |
Kuzuza menu yamanutse ya navbar yatanzwe cyangwa kugendagenda. |
show |
Erekana ibimanuka byamanuka ya navbar yatanzwe cyangwa tabbed navigation. |
hide |
Hisha menu yamanutse ya navbar yatanzwe cyangwa kugendagenda. |
update |
Kuvugurura umwanya wibintu byamanutse. |
dispose |
Gusenya ikintu cyamanutse. (Kuraho amakuru yabitswe kubintu bya DOM) |
getInstance |
Uburyo buhamye butuma ubona urugero rwamanutse rujyanye nibintu bya DOM, urashobora kubikoresha gutya:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Uburyo buhagaze busubiza ibintu byamanutse bifitanye isano na DOM cyangwa gukora bundi bushya mugihe bitatangijwe. Urashobora kuyikoresha gutya:bootstrap.Dropdown.getOrCreateInstance(element) |
Ibyabaye
Ibintu byose byamanutse birasa kubintu bihindagurika hanyuma bikabyimba. Urashobora rero kongeramo ibyabaye abumva kubintu .dropdown-menu
byababyeyi. nibyabaye bifite hide.bs.dropdown
umutungo (gusa iyo ubwoko bwambere bwubwoko bwabaye ) burimo Ikintu cyabaye cyo gukanda ibyabaye.hidden.bs.dropdown
clickEvent
click
Uburyo | Ibisobanuro |
---|---|
show.bs.dropdown |
Umuriro uhita iyo kwerekana urugero uburyo bwitwa. |
shown.bs.dropdown |
Umuriro iyo ibitonyanga byakozwe kugaragara kubakoresha kandi inzibacyuho ya CSS yarangiye. |
hide.bs.dropdown |
Umuriro uhita iyo uburyo bwo guhisha bwahamagawe. |
hidden.bs.dropdown |
Umuriro mugihe ibitonyanga byarangije guhishwa kumukoresha na CSS inzibacyuho zirangiye. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})