Dropdowns
Shandura kuvharika kwemamiriro ekutaridza rondedzero yezvinongedzo uye nezvimwe neBootstrap yekudonhedza plugin.
Overview
Madonhwe anogona kuchinjika, akafukidzirana pamusoro pekuratidzira rondedzero yezvinongedzo nezvimwe. Ivo vanoitwa kupindirana neiyo inosanganisirwa Bootstrap inodonha JavaScript plugin. Vanosandurwa nekudzvanya, kwete nekutenderera; ichi chisarudzo chekugadzira nemaune .
Kudonhedza kwakavakirwa pane yechitatu bato raibhurari, Popper , iyo inopa ine simba chinzvimbo uye kuona kwekuona. Iva nechokwadi chekuisa popper.min.js pamberi peBootstrap's JavaScript kana kushandisa bootstrap.bundle.min.js
/ bootstrap.bundle.js
ine Popper. Popper haishandiswe kuisa kudonhedza mumabhara emvura asi sechinzvimbo chine simba chisingadiwi.
Accessibility
Iyo WAI ARIA chiyero inotsanangura iyo chaiyo role="menu"
widget , asi iyi yakanangana nemamenu ekushandisa anokonzeresa zviito kana mabasa. ARIA mamenu anogona chete kuve nemenu zvinhu, checkbox menyu zvinhu, redhiyo bhatani menyu zvinhu, redhiyo mabhatani mapoka, uye sub-mamenu.
Kudonhedza kweBootstrap, kune rumwe rutivi, kwakagadzirwa kuti kuve kwakajairwa uye kunoshanda kune akasiyana siyana mamiriro uye markup zvimiro. Semuyenzaniso, zvinokwanisika kugadzira madonhwe ane zvimwe zvekupinza uye zvidzoreso zvemafomu, senge minda yekutsvaga kana mafomu ekupinda. Nechikonzero ichi, Bootstrap haatarisiri (kana kuwedzera otomatiki) chero role
uye aria-
hunhu hunodiwa kune echokwadi ARIA menyu. Vanyori vanozofanira kusanganisira izvi zvakanyanya hunhu ivo pachavo.
Nekudaro, Bootstrap inowedzera yakavakirwa-mukati tsigiro yeakawanda akajairwa kiyibhodhi menyu kupindirana, sekugona kufamba nepakati .dropdown-item
pezvinhu zvega uchishandisa makiyi ecursor uye kuvhara menyu ESCnekiyi.
Mienzaniso
Putira iyo yekudonhedza toggle (bhatani rako kana chinongedzo) uye yekudonha menyu mukati .dropdown
, kana chimwe chinhu chinozivisa position: relative;
. Dropdowns inogona kukonzereswa kubva <a>
kana <button>
zvinhu kuti zvikwane zvaungade zvaunoda. Mienzaniso inoratidzwa pano inoshandisa semantic <ul>
element pazvinenge zvakakodzera, asi tsika markup inotsigirwa.
Bhatani rimwechete
Chero imwe chete .btn
inogona kushandurwa kuita yekudonhedza dhizaini ine dzimwe markup shanduko. Heano maitiro aungaita kuti ashande nechero <button>
zvinhu:
<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>
Uye <a>
nezvinhu:
<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>
Chikamu chakanakisa ndechekuti iwe unogona kuita izvi nechero bhatani musiyano, zvakare:
<!-- 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>
Split bhatani
Saizvozvo, gadzira kupatsanurwa bhatani kudonhedza pamwe neakafanana markup senge bhatani bhatani kudonhedza, asi nekuwedzera kwenzvimbo .dropdown-toggle-split
yakakodzera yakatenderedza yekudonha caret.
Isu tinoshandisa iyi yekuwedzera kirasi kudzikisa yakachinjika padding
kune chero mativi ecaret ne25% uye kubvisa margin-left
iyo inowedzerwa kune yakajairwa mabhatani kudonhedza. Idzo shanduko dzekuwedzera dzinoita kuti caret igare pakati pebhatani rekutsemura uye inopa yakawedzera saizi yakarova nzvimbo padyo nebhatani guru.
<!-- 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>
Kukura
Mabhatani anodonhedza anoshanda nemabhatani eese saizi, kusanganisira default uye kupatsanura kudonhedza mabhatani.
<!-- 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>
Rima dropdowns
Sarudza mune zvakasvibira zvinodonhedza kuti uenderane nerima navbar kana tsika tsika nekuwedzera .dropdown-menu-dark
pane iripo .dropdown-menu
. Hapana shanduko inodiwa pazvinhu zvekudonha.
<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>
Uye kuishandisa kushandisa mubhari:
<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>
Nhungamiro
RTL
Nhungamiro inoratidzirwa kana uchishandisa Bootstrap muRTL, zvinoreva kuti .dropstart
zvichaonekwa kudivi rekurudyi.
Dropup
Tamba mamenu ekudonha pamusoro pezvinhu nekuwedzera .dropup
kune chinhu chemubereki.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropright
Tamba mamenu ekudonha kurudyi rwezvinhu nekuwedzera .dropend
kune chinhu chemubereki.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
Tamba mamenu ekudonha kuruboshwe rwezvinhu nekuwedzera .dropstart
kune chinhu chemubereki.
<!-- 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>
Menu zvinhu
Iwe unogona kushandisa <a>
kana <button>
zvinhu sechinhu chinodonha.
<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>
Iwe unogona zvakare kugadzira zvisingaite zvekudonhedza zvinhu ne .dropdown-item-text
. Inzwa wakasununguka kuwedzera chimiro netsika CSS kana zvinyorwa zvekushandisa.
<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>
Active
Wedzera .active
kuzvinhu zviri mukudonhedza kuti zvitayera sezviri kushanda . Kuendesa iyo inoshanda kune tekinoroji yekubatsira, shandisa aria-current
hunhu - uchishandisa page
kukosha kweiyo peji, kana true
kune yazvino chinhu mune seti.
<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>
Yakaremara
Wedzera .disabled
kuzvinhu zviri mukudonhedza kuti zvitaera sezvakaremara .
<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>
Menu alignment
Nekumisikidza, menyu yekudonha inoiswa otomatiki 100% kubva kumusoro uye nekuruboshwe rwemubereki wayo. Iwe unogona kushandura izvi .drop*
nemakirasi anotungamira, asi iwe unogona zvakare kuadzora nemamwe makirasi ekugadzirisa.
Wedzera .dropdown-menu-end
kune a .dropdown-menu
kune kurudyi gadzirisa menyu yekudonha. Mafambiro anotaridzwa kana uchishandisa Bootstrap muRTL, zvinoreva kuti .dropdown-menu-end
zvichaonekwa kuruboshwe.
<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>
Kugadzirisa kurongeka
Kana iwe uchida kushandisa inopindirana inopindura, dzima chinzvimbo chine simba nekuwedzera data-bs-display="static"
hunhu uye shandisa inopindura mutsauko makirasi.
Kuti uenzanise menyu yekudonha neyakapuwa yakapihwa kana yakakura, wedzera .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>
Kuti uenzanise kuruboshwe menyu yekudonha neyakapihwa yekutyora kana yakakura, wedzera .dropdown-menu-end
uye .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>
Ziva kuti haufanire kuwedzera data-bs-display="static"
hunhu kumabhatani ekudonhedza mumabhawa, sezvo Popper isingashandiswe mumabhawa.
Alignment options
Kutora akawanda esarudzo anoratidzwa pamusoro, heino diki kicheni sink demo yeakasiyana ekudonhedza kurongeka sarudzo munzvimbo imwechete.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Menu content
Headers
Wedzera musoro kuti unyore zvikamu zvezviito mune chero kudonha menyu.
<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>
Vapesanisi
Mapoka akaparadzana ezvine hukama zvemenu ane divider.
<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>
Text
Isa chero mavara emahara mukati memenu yekudonha ine mavara uye shandisa spacing utilities . Ziva kuti iwe ungangoda mamwe masaizi masitaera kumanikidza menyu upamhi.
<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>
Mafomu
Isa fomu mukati memenu yekudonhedza, kana gadzira iyo yekudonha menyu, uye shandisa margin kana padding zvishandiso kuti uzvipe iyo isina kunaka nzvimbo yaunoda.
<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>
Dropdown options
Shandisa data-bs-offset
kana data-bs-reference
kushandura nzvimbo yekudonha.
<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 maitiro
Nekumisikidza, iyo yekudonha menyu inovharwa kana uchidzvanya mukati kana kunze kwekudonhedza menyu. Unogona kushandisa autoClose
sarudzo kushandura iyi maitiro ekudonha.
<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
Variables
Variables kune ese anodonha:
$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;
Variables yekudonha kwakasviba :
$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;
Misiyano yeCSS-based carets inoratidza kudonha kwekudyidzana:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Mixins inoshandiswa kugadzira iyo CSS-based carets uye inogona kuwanikwa mu 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;
}
}
}
Usage
Kuburikidza nedhata hunhu kana JavaScript, iyo yekudonhedza plugin inoshandura zvakavanzika zvemukati (kudonhedza menyu) nekushandura .show
kirasi pamubereki .dropdown-menu
. Iwo data-bs-toggle="dropdown"
hunhu hunovimbwa nawo pakuvhara mamenu ekudonha padanho rekushandisa, saka ipfungwa yakanaka kugara uchiishandisa.
mouseover
kune vekare vana
<body>
vechinhu. Uku kubhejera kunobvumwa kwakashata kunodiwa kuti ushande zvakatenderedza
muiOS' chiitiko delegation , iyo yaizodzivirira tepi chero kupi zvako kunze kwekudonha kubva kukonzeresa kodhi inovhara kudonha. Kamwe kudonhedza kwavharwa, aya ekuwedzera asina chinhu
mouseover
anobatika anobviswa.
Via data hunhu
Wedzera data-bs-toggle="dropdown"
kune chinongedzo kana bhatani kuti uchinje kudonhedza.
<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>
Via JavaScript
Fonera zvinodonha kuburikidza neJavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
zvichiri kudiwa
Zvisinei nekuti iwe unodaidza kudonha kwako kuburikidza neJavaScript kana panzvimbo iyoyo shandisa iyo data-api, data-bs-toggle="dropdown"
inogara ichidikanwa kuti unge uripo pane inodonhedza inokonzeresa chinhu.
Options
Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-
, semu data-bs-offset=""
. Ita shuwa yekushandura iyo kesi mhando yezita resarudzo kubva kameraCase kuenda ku kebab-kesi kana uchipfuura sarudzo kuburikidza ne data hunhu. Semuenzaniso, pane kushandisa data-bs-autoClose="false"
, shandisa data-bs-auto-close="false"
.
Zita | Type | Default | Tsanangudzo |
---|---|---|---|
boundary |
tambo | element | 'clippingParents' |
Kufashukira kunomanikidza muganho weiyo inodonha menyu (inoshanda chete kune Popper's kudziviriraOverflow modifier). Nekusagadzikana 'clippingParents' ndeye uye inogona kugamuchira HTMLElement referensi (kuburikidza neJavaScript chete). Kuti uwane rumwe ruzivo tarisa kuPopper's detectOverflow docs . |
reference |
tambo | chinhu | object | 'toggle' |
Reference element yemenu yekudonha. Inobvuma kukosha kwe 'toggle' , 'parent' , HTMLElement referensi kana chinhu chinopa getBoundingClientRect . Kuti uwane rumwe ruzivo tarisa kuPopper's constructor docs uye virtual element docs . |
display |
tambo | 'dynamic' |
Nekumisikidza, isu tinoshandisa Popper kune inoshanduka chinzvimbo. Dzima izvi ne static . |
offset |
array | tambo | basa | [0, 2] |
Offset yekudonha inoenderana nechinangwa chayo. Iwe unogona kupfuudza tambo mune data hunhu ine comma yakapatsanurwa kukosha senge: Kana basa rikashandiswa kuona kumisa, rinodanwa nechinhu chine popper placement, referensi, uye popper rects senharo yayo yekutanga. Iyo inokonzeresa element DOM node inopfuudzwa seyechipiri nharo. Basa racho rinofanira kudzosa rondedzero ine nhamba mbiri: . Kuti uwane rumwe ruzivo tarisa kuPopper's offset docs . |
autoClose |
boolean | tambo | true |
Gadzirisa maitiro ekuvhara otomatiki ekudonha:
|
popperConfig |
null | chinhu | basa | null |
Kuti uchinje Bootstrap's default Popper config, ona Popper's configuration . Kana basa richishandiswa kugadzira iyo Popper kumisikidzwa, inodanwa nechinhu chine Bootstrap's default Popper kumisikidzwa. Inokubatsira kushandisa uye kubatanidza iyo yakasarudzika neyako gadziriso. Basa racho rinofanira kudzorera chinhu chekugadzirisa chePopper. |
Kushandisa basa nepopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Nzira
Nzira | Tsanangudzo |
---|---|
toggle |
Shandura menyu yekudonhedza yakapihwa navbar kana tabbed navigation. |
show |
Inoratidza iyo yekudonha menyu yeakapihwa navbar kana tabbed navigation. |
hide |
Inoviga menyu yekudonhedza yeakapihwa navbar kana tabbed navigation. |
update |
Inovandudza nzvimbo yekudonha kwechimwe chinhu. |
dispose |
Inoparadza kudonha kwechimwe chinhu. (Inobvisa data rakachengetwa pachinhu cheDOM) |
getInstance |
Static nzira iyo inokutendera iwe kuti uwane iyo yekudonha muenzaniso yakabatana neiyo DOM chinhu, unogona kuishandisa seizvi:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Static nzira inodzosa muenzaniso wekudonha wakabatana nechinhu cheDOM kana kugadzira imwe nyowani kana isina kutangwa. Unogona kuishandisa seizvi:bootstrap.Dropdown.getOrCreateInstance(element) |
Zviitiko
Zviitiko zvese zvekudonhedza zvinopfurwa pachinhu chekugadzirisa uye zvobva zvaputirwa. Saka iwe unogona zvakare kuwedzera vateereri vechiitiko pane .dropdown-menu
's mubereki chinhu. hide.bs.dropdown
uye hidden.bs.dropdown
zviitiko zvine chivakwa clickEvent
(chete kana yekutanga Chiitiko mhando click
) ine Chiitiko Chinhu chechiitiko chekudzvanya.
Nzira | Tsanangudzo |
---|---|
show.bs.dropdown |
Inopisa pakarepo kana iyo nzira yemuenzaniso inodanwa. |
shown.bs.dropdown |
Kudzingwa kana kudonha kwaitwa kuti kuonekwe kumushandisi uye shanduko yeCSS yapera. |
hide.bs.dropdown |
Moto pakarepo kana nzira yekuhwanda yadaidzwa. |
hidden.bs.dropdown |
Kudzingwa kana kudonhedza kwapera kuvanzwa kubva kumushandisi uye shanduko yeCSS yapera. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})