Açylýan ýerler
“Bootstrap” açylýan plugin bilen baglanyşyklaryň sanawyny we başga zatlary görkezmek üçin kontekstdäki örtükleri üýtgediň.
Gysgaça syn
Açylýan ýerler, baglanyşyklaryň sanawlaryny we başgalary görkezmek üçin üýtgedilip bilner, kontekstdäki örtükler. Olara goşulan Bootstrap açylýan JavaScript plugin bilen interaktiw ýasaldy. Olary basmak bilen däl-de, basmak bilen üýtgedýärler; bu bilgeşleýin dizaýn karary .
Açylýan ýerler dinamiki ýerleşiş we görnüşi kesgitlemegi üpjün edýän Popper üçünji tarap kitaphanasynda gurulýar . Bootstrap-yň JavaScript-den öň popper.min.js-i goşuň ýa-da Popper -i ulanýan bootstrap.bundle.min.js
/ ulanyň. bootstrap.bundle.js
Popper, dinamiki ýerleşiş talap edilmeýänligi sebäpli, deňiz panellerinde düşýän ýerleri ýerleşdirmek üçin ulanylmaýar.
Elýeterlilik
WAI ARIA standarty hakyky role="menu"
widjeti kesgitleýär , ýöne bu hereketlere ýa-da funksiýalara itergi berýän programma menýusyna mahsus. ARIA menýularynda diňe menýu elementleri, bellik gutusy menýu elementleri, radio düwme menýu elementleri, radio düwme toparlary we kiçi menýular bolup biler.
Beýleki tarapdan, “Bootstrap” -yň aşak düşmegi umumy we dürli ýagdaýlara we bellik gurluşlaryna degişlidir. Mysal üçin, gözleg meýdanlary ýa-da giriş formalary ýaly goşmaça girişleri we forma dolandyryşlaryny öz içine alýan açylan ýerleri döredip bolýar. Şol sebäpli, Bootstrap hakyky ARIA menýulary üçin zerur bolan atributlara garaşmaýar (ýa-da awtomatiki goşmaýar) role
. Uthorsazyjylar bu has anyk häsiýetleri özleri goşmaly bolarlar.aria-
.dropdown-item
Şeýle-de bolsa, “Bootstrap ” kursor düwmelerini ulanyp aýratyn elementleriň üstünden geçmek we menýu açary bilen ýapmak ýaly adaty klawiatura menýusynyň özara täsirleri üçin içerki goldaw goşýar ESC.
Mysallar
Açylýan açary üýtgetmek (düwmäňiz ýa-da baglanyşyk) we açylýan menýu .dropdown
ýa-da yglan edýän başga bir element bilen örtüň position: relative;
. Mümkin bolan zerurlyklaryňyza has laýyk gelmek üçin aşak gaçmalar ýa- <a>
da elementler ýüze çykyp biler . <button>
Bu ýerde görkezilen mysallar, zerur ýerlerde semantik <ul>
elementleri ulanýar, ýöne adaty bellik goldaýar.
Leeke düwme
Islendik .btn
belligi käbir üýtgeşmeler bilen açylan açyklyga öwrüp bolýar. <button>
Olary iki element bilen işlemek üçin nädip goýup bilersiňiz :
<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>
<a>
Elementler bilen :
<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>
Iň gowy tarapy, muny islendik düwme görnüşi bilen hem edip bilersiňiz:
<!-- 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>
Bölmek düwmesi
Edil şonuň ýaly-da, bir düwmäniň aşak gaçmagy bilen birmeňzeş bellik bilen bölünen düwme açylmalaryny dörediň, ýöne .dropdown-toggle-split
açylýan karetiň töwereginde dogry aralyk goşmak bilen.
padding
Karetiň iki gapdalyndaky keseligine 25% azaltmak we margin-left
yzygiderli düwmeleriň açylmagy üçin goşulanlary aýyrmak üçin bu goşmaça synpy ulanýarys . Şol goşmaça üýtgeşmeler, kartany bölmek düwmesinde jemleýär we esasy düwmäniň gapdalyndaky has laýyk ölçeg meýdanyny üpjün edýär.
<!-- 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>
Ölçeg
Düwmeleriň açylmagy, ähli ululykdaky düwmeler bilen işleýär, şol sanda deslapky we bölünen açylýan düwmeler.
<!-- 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>
Garaňky damjalar
.dropdown-menu-dark
Bar bolanlara goşup, garaňky deňiz paneli ýa-da adaty stil bilen gabat gelmek üçin has garaňky damjalary saýlaň .dropdown-menu
. Açylýan elementlere hiç hili üýtgeşme talap edilmeýär.
<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>
Deňiz panelinde ulanmak üçin:
<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>
Görkezmeler
RTL
RTL-de Bootstrap ulanylanda görkezmeler aýna bolýar, ýagny .dropstart
sag tarapda peýda bolar.
Taşlamak
Esasy elemente goşup .dropup
, aşaky menýulary elementleriň üstünde işlediň.
<!-- 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
Esasy elemente goşup, elementleriň sag tarapynda açylan menýulary işlediň .dropend
.
<!-- 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
.dropstart
Ene elementine goşmak bilen elementleriň çep tarapynda açylan menýulary işlediň .
<!-- 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>
Menýu elementleri
<a>
Açylýan <button>
zatlar hökmünde elementleri ulanyp bilersiňiz .
<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>
Şeýle hem, interaktiw däl açylýan zatlary döredip bilersiňiz .dropdown-item-text
. Customörite CSS ýa-da tekst enjamlary bilen hasam stilleşip bilersiňiz.
<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>
Işjeň
Aktiw.active
görnüşde düzmek üçin açylan elementlere goşuň . Işjeň ýagdaýy kömekçi tehnologiýalara ýetirmek üçin atributdan peýdalanyň - häzirki sahypa ýa -da toplumdaky häzirki element üçin bahany ulanyň.aria-current
page
true
<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>
Maýyp
.disabled
Açyk görnüşdäki zatlary goşuň , olary ýapyk görnüşde düzüň .
<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>
Menýu deňleşdirmek
Düzgüne görä, açylýan menýu awtomatiki usulda ýokardan we ene-atasynyň çep tarapynda 100% ýerleşdirilýär. Muny ugrukdyryjy .drop*
synplar bilen üýtgedip bilersiňiz, ýöne goşmaça üýtgediji synplar bilen dolandyryp bilersiňiz.
Açylýan menýuny saga deňleşdirmek üçin saga .dropdown-menu-end
goşuň . .dropdown-menu
RTL-de Bootstrap ulanylanda görkezmeler aýna bolýar, ýagny .dropdown-menu-end
çep tarapda peýda bolar.
<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>
Jogaply deňleşdirme
Duýgur deňlemäni ulanmak isleseňiz, data-bs-display="static"
atributy goşup dinamiki pozisiýany öçüriň we täsirli üýtgeşiklik synplaryny ulanyň.
Açylýan menýuny berlen bölek ýa-da has ulusy bilen deňleşdirmek üçin goşuň .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Açylýan menýuny berlen bölek ýa-da has ulusy bilen deňleşdirmek üçin goşuň .dropdown-menu-end
we .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>
data-bs-display="static"
Deňiz panellerinde açylýan düwmelere atribut goşmak hökman däl , sebäbi Popper deňiz panellerinde ulanylmaýar.
Düzediş opsiýalary
Aboveokarda görkezilen wariantlaryň köpüsini göz öňünde tutup, ine, bir ýerde dürli aşak düşmek deňleşdiriş wariantlarynyň kiçijik aşhana çüýşesi demo.
<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>
Menýu mazmuny
Sözbaşylar
Islendik açylýan menýuda hereketleriň bölümlerini bellemek üçin sözbaşy goşuň.
<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>
Bölünýänler
Baglanyşykly menýu elementleriniň toparlaryny bölüň.
<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>
Tekst
Islendik erkin form tekstini açylýan menýuda ýerleşdiriň we aralyk hyzmatlaryny ulanyň . Menýu giňligini çäklendirmek üçin size goşmaça ululyk stilleriniň gerekdigini unutmaň.
<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>
Formalar
Açylýan menýuda bir forma goýuň ýa-da açylýan menýuda düzüň we zerur negatiw ýer bermek üçin margin ýa-da padding enjamlaryny ulanyň.
<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>
Açylyş opsiýalary
Açylýan ýeri ulanyň data-bs-offset
ýa-da üýtgediň.data-bs-reference
<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>
Awto-ýakyn hereket
Düzgüne görä, açylýan menýu içerde ýa-da daşynda basylanda açylýan menýu ýapylýar. autoClose
Açylýan bu hereketi üýtgetmek üçin opsiýany ulanyp bilersiňiz .
<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
Üýtgeýjiler
Downhli açylanlar üçin üýtgeýjiler:
$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;
Garaňky düşmek üçin üýtgeýjiler :
$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;
Açylýan interaktiwligi görkezýän CSS esasly kartlar üçin üýtgeýjiler:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Miksinler CSS esasly kartetleri öndürmek üçin ulanylýar we tapyp bilersiňiz 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;
}
}
}
Ulanylyşy
Maglumat atributlary ýa-da JavaScript arkaly, açylýan plugin .show
ene-atanyň synpyny üýtgetmek arkaly gizlin mazmuny (açylýan menýulary) üýtgedýär .dropdown-menu
. Bu data-bs-toggle="dropdown"
aýratynlyk, programma derejesinde açylýan menýulary ýapmak üçin bil baglanýar, şonuň üçin ony hemişe ulanmak gowy zat.
mouseover
ýakyn çagalaryna
boş işleýjiler goşýar
. <body>
Bu ýigrenji hack,
iOS-nyň çäräniň wekiliýetinde bir çekeleşigiň üstünde işlemek üçin zerurdyr , bu bolsa aşak gaçýan kody açmagynyň öňüni alyp biler. Açylma ýapylansoň, bu goşmaça boş
mouseover
işleýänler aýrylýar.
Maglumat atributlary arkaly
data-bs-toggle="dropdown"
Açylan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
JavaScript arkaly
JavaScript arkaly açylanlara jaň ediň:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
henizem talap edilýär
Açylýan ýere JavaScript arkaly jaň edýändigiňize ýa-da ýerine maglumat-api ulanýandygyňyza garamazdan, data-bs-toggle="dropdown"
açylan trigger elementinde elmydama bolmaly.
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-
bolşy ýaly goşuň data-bs-offset=""
. Opsiýalary maglumat atributlary arkaly geçireniňizde, opsiýanyň adynyň görnüşini kamelCase-den kebab-kase üýtgediň. Mysal üçin, ulanmagyň ýerine data-bs-autoClose="false"
ulanyň data-bs-auto-close="false"
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
boundary |
setir | elementi | 'clippingParents' |
Açylýan menýunyň aşýan çäk çäkleri (diňe Popper-iň öňüni alýanOverflow modifikatoryna degişlidir). Düzgüne görä, ol 'clippingParents' HTMLElement salgylanmasyny kabul edip biler (diňe JavaScript arkaly). Has giňişleýin maglumat üçin Popper-iň detectOverflow resminamalaryna serediň . |
reference |
setir | element | obýekt | 'toggle' |
Açylýan menýunyň salgylanma elementi. 'toggle' , 'parent' HTMLElement salgylanmasynyň ýa-da üpjün edýän obýektiň bahalaryny kabul edýär getBoundingClientRect . Has giňişleýin maglumat üçin Popper-iň konstruktor resminamalaryna we wirtual element resminamalaryna serediň . |
display |
setir | 'dynamic' |
Düzgüne görä, dinamiki ýerleşiş üçin Popper ulanýarys. Muny öçüriň static . |
offset |
massiw | setir | funksiýasy | [0, 2] |
Maksadyna görä aşak düşýän ofset. Maglumat atributlarynda yzygiderli bölünen bahalar bilen bir setir geçirip bilersiňiz: Ofset kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde popper ýerleşdirilişi, salgylanma we popper düzedişleri bolan obýekt bilen atlandyrylýar. Tüweleme elementi DOM düwmesi ikinji argument hökmünde geçýär. Funksiýa iki san bilen bir massiw gaýtarmaly : . Has giňişleýin maglumat üçin Popper-iň ofset resminamalaryna serediň . |
autoClose |
boolean | setir | true |
Açylýan awtoulagyň ýakyn hereketini sazlaň:
|
popperConfig |
null | obýekt | funksiýasy | null |
Bootstrap-yň deslapky Popper konfigurasiýasyny üýtgetmek üçin Popper-iň konfigurasiýasyna serediň . Popper konfigurasiýasyny döretmek üçin bir funksiýa ulanylanda, Bootstrap-yň deslapky Popper konfigurasiýasyny öz içine alýan obýekt bilen atlandyrylýar. Dymmaklygy öz konfigurasiýaňyz bilen ulanmaga we birleşdirmäge kömek edýär. Funksiýa Popper üçin konfigurasiýa obýektini yzyna gaýtarmaly. |
Bilen işlemekpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Usullar
Usul | Düşündiriş |
---|---|
toggle |
Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny üýtgedýär. |
show |
Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny görkezýär. |
hide |
Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny gizleýär. |
update |
Bir elementiň aşak düşýän ýerini täzeleýär. |
dispose |
Bir elementiň gaçmagyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar) |
getInstance |
DOM elementi bilen baglanyşykly açylan mysallary almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
DOM elementi bilen baglanyşykly açylan mysaly yzyna gaýtarýan ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz:bootstrap.Dropdown.getOrCreateInstance(element) |
Wakalar
Downhli açylýan hadysalar üýtgeýän elemente atylýar we soň köpürjiklenýär. .dropdown-menu
Şeýlelikde, waka diňleýjilerini ene-atanyň elementine goşup bilersiňiz . hide.bs.dropdown
we hidden.bs.dropdown
hadysalaryň basmak hadysasy üçin Waka obýektini öz içine alýan häsiýeti bar clickEvent
(diňe asyl Waka görnüşi bolanda ).click
Usul | Düşündiriş |
---|---|
show.bs.dropdown |
Görkeziş usuly çagyrylanda derrew ýanýar. |
shown.bs.dropdown |
Ulanyjy üçin açyk görkezilende we CSS geçişleri gutaranda işden çykdy. |
hide.bs.dropdown |
Gizlin mysal usuly çagyrylanda derrew ýanýar. |
hidden.bs.dropdown |
Açylan ulanyjydan gizlenip, CSS geçişleri gutarandan soň ýanýar. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})