تامچە
Bootstrap چۈشۈرۈش قىستۇرمىسى بىلەن ئۇلىنىش تىزىملىكى ۋە تېخىمۇ كۆپ مەزمۇنلارنى كۆرسىتىش ئۈچۈن مەزمۇننى قاپلاڭ.
ئومۇمىي چۈشەنچە
تۆۋەنلەش كۆزنەكلىرى يۆتكىلىشچان ، ئۇلىنىش تىزىملىكىنى كۆرسىتىش ئۈچۈن مەزمۇننى قاپلايدۇ. ئۇلار ئۆز ئىچىگە ئالغان Bootstrap چۈشۈش JavaScript قىستۇرمىسى بىلەن ئۆز-ئارا تەسىر كۆرسىتىدۇ. ئۇلار چېكىش ئارقىلىق ئەمەس ، چېكىش ئارقىلىق يۆتكىلىدۇ. بۇ قەستەن لايىھىلەش قارارى .
Dropdowns ھەرىكەتچان ئورۇن بەلگىلەش ۋە كۆرۈنۈشنى بايقاش بىلەن تەمىنلەيدىغان Popper ئۈچىنچى تەرەپ كۈتۈپخانىسىغا قۇرۇلدى . Bootstrap نىڭ JavaScript ياكى Popper نى ئىشلىتىشتىن بۇرۇن popper.min.js نى جەزملەشتۈرۈڭ . Popper ھەرىكەتچان ئورۇن بەلگىلەش ھاجەتسىز بولسىمۇ ، ناۋادا تۆۋەنگە چۈشۈشنى ئورۇنلاشتۇرمايدۇ.bootstrap.bundle.min.js
bootstrap.bundle.js
قولايلىق
WAI ARIA ئۆلچىمى ئەمەلىي role="menu"
كىچىك قورالغا ئېنىقلىما بېرىدۇ ، ئەمما بۇ ھەرىكەت ياكى ئىقتىدار قوزغىتىدىغان قوللىنىشچان پروگراممىلارغا خاس. ARIA تىزىملىكلىرى پەقەت تىزىملىك تۈرلىرى ، تەكشۈرۈش رامكىسى تىزىملىكى ، رادىئو كۇنۇپكىسى تىزىملىك تۈرلىرى ، رادىئو كۇنۇپكا گۇرۇپپىسى ۋە تارماق تىزىملىكلەرنىلا ئۆز ئىچىگە ئالىدۇ.
Bootstrap نىڭ چۈشۈش نىسبىتى بولسا ئومۇمىي جەھەتتىن لايىھەلەنگەن بولۇپ ، ھەر خىل ئەھۋال ۋە بەلگە قۇرۇلمىلىرىغا ماس كېلىدۇ. مەسىلەن ، ئىزدەش بۆلىكى ياكى كىرىش جەدۋىلى قاتارلىق قوشۇمچە كىرگۈزۈش ۋە شەكىل كونتروللىرىنى ئۆز ئىچىگە ئالغان تامچە قۇرغىلى بولىدۇ. بۇ سەۋەبتىن ، Bootstrap ھەقىقىي ARIA تىزىملىكلىرىگە لازىملىق role
ۋە خاسلىقلارنىڭ ھېچقايسىسىنى ئۈمىد قىلمايدۇ (ياكى ئاپتوماتىك قوشمايدۇ) . ئاپتورلار بۇ تېخىمۇ كونكرېت خاسلىقنى ئۆز ئىچىگە ئېلىشى كېرەك.aria-
قانداقلا بولمىسۇن ، Bootstrap نۇر بەلگىسى كۇنۇپكىسى ئارقىلىق يەككە ئېلېمېنتلار ئارقىلىق يۆتك��لىش .dropdown-item
ۋە تىزىملىك بىلەن كۇنۇپكىنى تاقاش قاتارلىق نۇرغۇن ئۆلچەملىك كۇنۇپكا تاختىسىنىڭ ئۆز-ئارا تەسىرلىشىشىنى ئۆز ئىچىگە ESCئالىدۇ.
مىساللار
تارتما كۇنۇپكىنى (كۇنۇپكا ياكى ئۇلىنىش) ۋە تارتما تىزىملىكنى .dropdown
ياكى ئېلان قىلىدىغان باشقا ئېلېمېنتنى ئوراپ قويۇڭ position: relative;
. يوشۇرۇن ئېھتىياجلىرىڭىزغا تېخىمۇ ياخشى ماسلىشىش ئۈچۈن تامچە ياكى ئېلېمېنتلار قوزغىتىلىدۇ <a>
. <button>
بۇ يەردە كۆرسىتىلگەن مىساللار <ul>
مۇۋاپىق بولغاندا مەنىلىك ئېلېمېنتلارنى ئىشلىتىدۇ ، ئەمما ئىختىيارى بەلگە قوللايدۇ.
يەككە كۇنۇپكا
ھەر قانداق يەككە .btn
بەلگە ئۆزگەرتىش ئارقىلىق تۆۋەنلەش ھالىتىگە ئايلاندۇرغىلى بولىدۇ. ئۇلارنى قانداق قىلىپ ھەر ئىككى <button>
ئېلېمېنت بىلەن خىزمەت قىلالايسىز؟
<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>
:
<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>
ئەڭ ياخشى يېرى سىز بۇنى ھەر قانداق كۇنۇپكا بىلەن ئۆزگەرتەلەيسىز:
<!-- 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>
بۆلۈش كۇنۇپكىسى
ئوخشاشلا ، يەككە كۇنۇپكا چۈشۈش بىلەن ئوخشاش بەلگە بىلەن بۆلۈش كۇنۇپكىسى چۈشۈشنى ھاسىل قىلىڭ ، ئەمما تامچە .dropdown-toggle-split
پەرۋىش ئەتراپىغا مۇۋاپىق بوشلۇق قوشۇش.
بىز بۇ قوشۇمچە سىنىپنى ئىشلىتىپ padding
پەرۋىشنىڭ ئىككى تەرىپىدىكى گورىزونتالنى% 25 تۆۋەنلىتىمىز ھەمدە margin-left
دائىملىق كۇنۇپكا چۈشۈرۈش ئۈچۈن قوشۇلغاننى چىقىرىمىز. بۇ قوشۇمچە ئۆزگەرتىشلەر پەرۋىشنى بۆلۈش كۇنۇپكىسىغا مەركەزلەشتۈرۈپ ، ئاساسىي كۇنۇپكىنىڭ يېنىغا تېخىمۇ مۇۋاپىق چوڭلۇقتىكى زەربە بېرىش رايونى بىلەن تەمىنلەيدۇ.
<!-- 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>
Sizing
كونۇپكا تاختىسىنىڭ سۈكۈتتىكى ۋە بۆلۈش كۇنۇپكىسى قاتارلىق بارلىق چوڭلۇقتىكى كۇنۇپكىلار بىلەن ئىشلەيدۇ.
<!-- 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>
قاراڭغۇ چۈشۈش
.dropdown-menu-dark
بار بولغان ئورۇنغا قوشۇش ئارقىلىق قاراڭغۇ تامچە ياكى ئىختىيارى ئۇسلۇبقا ماس كېلىدىغان قاراڭغۇ چۈشۈشنى تاللاڭ .dropdown-menu
. تارتما تۈرلەرگە ئۆزگەرتىش تەلەپ قىلىنمايدۇ.
<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>
ھەمدە ئۇنى يولباشچىغا ئىشلىتىش:
<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>
يۆنىلىش
RTL
RTL دا Bootstrap نى ئىشلەتكەندە يۆنىلىش ئەينەك قىلىنغان ، يەنى .dropstart
ئوڭ تەرەپتە كۆرۈنىدۇ.
Dropup
باش ئېلېمېنتنى قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئۈستىدىكى تىزىملىكلەرنى قوزغىتىڭ .dropup
.
<!-- 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
باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئوڭ تەرىپىدىكى تىزىملىك تىزىملىكى .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
.
<!-- 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>
تىزىملىك تۈرلىرى
سىز ئېلېمېنتلارنى تامچە تۈر سۈپىتىدە <a>
ئىشلىتەلەيسىز .<button>
<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>
سىز يەنە ئۆز-ئارا تەسىر كۆرسەتمەيدىغان تامچە تۈرلەرنى قۇرالايسىز .dropdown-item-text
. ئىختىيارى CSS ياكى تېكىست قوراللىرى بىلەن تېخىمۇ ئۇسلۇبنى ئەركىن ھېس قىلىڭ.
<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
ھالەتتىكى تۈرلەرگە ئۇلارنى ئاكتىپ ھالەتتە ئۇسلۇب قىلىڭ . ئاكتىپ ھالەتنى ياردەمچى تېخنىكىلارغا يەتكۈزۈش ئۈچۈن ، 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>
چەكلەنگەن
تۆۋەنگە .disabled
چۈشۈرۈلگەن تۈرلەرگە ئۇلارنى مېيىپ قىلىپ ئۇسلۇب قىلىڭ .
<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>
تىزىملىك ماسلاشتۇرۇش
سۈكۈت بويىچە ، چۈشۈش تىزىملىكى ئاپتوماتىك ھالدا ئاتا-ئانىسىنىڭ ئۈستى ۋە سول تەرىپىدىن% 100 ئورۇنلىنىدۇ. سىز بۇنى يۆنىلىشلىك .drop*
دەرسلەر بىلەن ئۆزگەرتەلەيسىز ، ئەمما قوشۇمچە ئۆزگەرتىش سىنىپى ئارقىلىق ئۇلارنى كونترول قىلالايسىز.
.dropdown-menu-end
ئوڭغا ئوڭغا قوشۇش .dropdown-menu
تىزىملىكى. RTL دا Bootstrap نى ئىشلەتكەندە يۆنىلىش ئەينەك قىلىنغان ، يەنى .dropdown-menu-end
سول تەرەپتە كۆرۈنىدۇ.
<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>
جاۋاب قايتۇرۇش
ئەگەر ئىنكاس قايتۇرۇشنى ئىشلەتمەكچى بولسىڭىز ، data-bs-display="static"
خاسلىق قوشۇش ئارقىلىق ھەرىكەتچان ئورۇن بەلگىلەشنى چەكلەڭ ۋە ئىنكاسچان ئۆزگىرىش سىنىپىنى ئىشلىتىڭ.
تارتما تىزىملىكنى بېرىلگەن بۆسۈش ياكى چوڭراق بىلەن توغرىلاش ئۈچۈن قوشۇڭ .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>
تارتما تىزىملىكتىن بېرىلگەن بۆسۈش ياكى چوڭراقنى توغرىلاش ئۈچۈن قوشۇش.dropdown-menu-end
ۋە .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"
شۇنىڭغا دىققەت قىلىڭكى ، Popper ناۋايخانىدا ئىشلىتىلمىگەچكە ، دېڭىز ئارمىيىسىدىكى تامچە كۇنۇپكىلارغا خاسلىق قوشۇشىڭىزنىڭ ھاجىتى يوق .
توغرىلاش تاللانمىلىرى
يۇقىرىدا كۆرسىتىلگەن كۆپ قىسىم تاللاشلارنى ئېلىپ ئېيتساق ، بۇ يەردە كىچىك تىپتىكى ئاشخانا چۆكۈش ماھارەتلىرى بار.
<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>
تىزىملىك مەزمۇنى
ماۋزۇلار
ھەر بىر ئېسىلما تىزىملىكتىكى ھەرىكەت بۆلەكلىرىگە بەلگە قوشۇڭ.
<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>
Dividers
بۆلگۈچ بىلەن مۇناسىۋەتلىك تىزىملىك تۈرلىرىنى گۇرۇپپىلارغا ئايرىڭ.
<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 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>
جەدۋەل
تامچە تىزىملىكنىڭ ئىچىگە جەدۋەل قويۇڭ ياكى ئۇنى ئېسىلما تىزىملىككە ئايلاندۇرۇڭ ، ھەمدە گىرۋەك ياكى تاختا ئىشلىتىشتىن پايدىلىنىپ ، ئۇنىڭغا ئېھتىياجلىق سەلبىي بوشلۇق بېرىڭ.
<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>
تاشلاش تاللانمىلىرى
چۈشۈش ئورنىنى ئىشلىتىڭ data-bs-offset
ياكى ئۆزگەرتىڭ.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>
ئاپتوماتىك تاقاش ھەرىكىتى
سۈكۈتتىكى ھالەتتە ، ئېسىلما تىزىملىكنىڭ ئىچى ياكى سىرتىنى چەككەندە ئېسىلما تىزىملىك تاقىلىدۇ. autoClose
تاللانما ئارقىلىق تۆۋەنلەشنىڭ بۇ ھەرىكىتىنى ئۆزگەرتەلەيسىز .
<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
ئۆزگەرگۈچى مىقدار
بارلىق چۈشۈشنىڭ ئۆزگەرگۈچى مىقدارلىرى:
$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;
قاراڭغۇ چۈشۈشنىڭ ئۆزگىرىشچانلىقى :
$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;
تۆۋەنلەشنىڭ ئۆز-ئارا تەسىر كۆرسىتىشىنى كۆرسىتىدىغان CSS نى ئاساس قىلغان پەرۋىشنىڭ ئۆزگىرىشچانلىقى:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
ئارىلاشما ماددىلار CSS نى ئاساس قىلغان پەرۋىش ھاسىل قىلىشقا ئىشلىتىلىدۇ ، ئۇنى تاپقىلى بولىدۇ 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;
}
}
}
ئىشلىتىش
.show
سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق ، چۈشۈش قىستۇرمىسى ئاتا-ئانىلارنىڭ سىنىپىنى ئالماشتۇرۇش ئارقىلىق يوشۇرۇن مەزمۇننى (چۈشۈرۈش تىزىملىكى) ئالماشتۇرىدۇ .dropdown-menu
. بۇ data-bs-toggle="dropdown"
خاسلىق قوللىنىشچان پروگراممىلاردىكى تامچە تىزىملىكلەرنى تاقاشقا تايىنىدۇ ، شۇڭا ئۇنى دائىم ئىشلىتىش ياخشى ئۇسۇل.
mouseover
بىۋاسىتە بالىلىرىغا
قۇرۇق تۇتقۇچ قوشىدۇ. <body>
ئېتىراپ قىلىشقا تېگىشلىكى شۇكى ، بۇ سەت خاككېرلار
iOS پائالىيەت ۋەكىللەر ئۆمىكىدىكى قالايمىقانچىلىقنى چۆرىدىگەن ھالدا ئىشلەشكە موھتاج ، بۇنداق بولغاندا تامچە چۈشۈشنىڭ سىرتىدىكى ھەر قانداق بىر چېكىشنىڭ تۆۋەنلەش كودىنى قوزغىتىشىنىڭ ئالدىنى ئالىدۇ. تامچە تاقالغاندىن كېيىن ، بۇ قوشۇمچە قۇرۇق
mouseover
تۇتقۇچلار چىقىرىۋېتىلىدۇ.
سانلىق مەلۇمات خاسلىقى ئارقىلىق
ئۇلىنىش ياكى كۇنۇپكىنى قوشسىڭىز data-bs-toggle="dropdown"
، چۈشۈشنى قوزغىتىڭ.
<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 ئارقىلىق
چۈشۈشنى JavaScript ئارقىلىق تېلېفون قىلىڭ:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
يەنىلا تەلەپ قىلىنىدۇ
مەيلى سىز JavaScript ئارقىلىق چۈشۈش تېلېفونىڭىزغا تېلېفون قىلىڭ ياكى ئۇنىڭ ئورنىغا سانلىق مەلۇمات api نى ئىشلىتىڭ ، data-bs-toggle="dropdown"
ھەمىشە چۈشۈش قوزغاتقۇچ ئېلېمېنتىدا بولۇشى تەلەپ قىلىنىدۇ.
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-bs-
ئوخشاش data-bs-offset=""
. سانلىق مەلۇمات خاسلىقى ئارقىلىق تاللانمىلارنى يوللىغاندا ، تاللاش نامىنىڭ دېلو تۈرىنى camelCase دىن kebab-case غا ئۆزگەرتىڭ. مەسىلەن ، ئىشلىتىشنىڭ ئورنىغا data-bs-autoClose="false"
، ئىشلىتىش data-bs-auto-close="false"
.
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
boundary |
string | ئېلېمېنت | 'clippingParents' |
چۈشۈش تىزىملىكىنىڭ ئېقىپ كېتىش چەكلىمىسى (پەقەت Popper نىڭ ئالدىنى ئېلىش ئېقىمى ئۆزگەرتكۈچكە ماس كېلىدۇ). سۈكۈتتىكى ھالەتتە ئۇ 'clippingParents' HTMLElement پايدىلىنىشىنى قوبۇل قىلالايدۇ (پەقەت JavaScript ئارقىلىق). تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ detectOverflow ھۆججىتىنى كۆرۈڭ . |
reference |
string | element | ئوبيېكت | 'toggle' |
تارتما تىزىملىكنىڭ پايدىلىنىش ئېلېمېنتى. 'toggle' ، 'parent' HTMLElement پايدىلىنىش قىممىتى ياكى تەمىنلەيدىغان ئوبيېكتنىڭ قىممىتىنى قوبۇل قىلىدۇ getBoundingClientRect . تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper نىڭ قۇرغۇچى ھۆججىتى ۋە مەۋھۇم ئېلېمېنت ھۆججىتىنى كۆرۈڭ . |
display |
string | 'dynamic' |
سۈكۈتتىكى ھالەتتە ، Popper نى ھەرىكەتچان ئورۇن بەلگىلەشكە ئىشلىتىمىز. بۇنى چەكلەڭ static . |
offset |
array | string | function | [0, 2] |
نىشانغا سېلىشتۇرغاندا تۆۋەنلەشنىڭ تولۇقلىنىشى. سىز پەش ئارقىلىق ئايرىلغان قىممەت بىلەن سانلىق مەلۇمات خاسلىقىدا بىر قۇرنى يوللىيالايسىز: فۇنكسىيەنى ئېنىقلاش ئۈچۈن فۇنكسىيە قوللىنىلغاندا ، ئۇ پوپايكا ئورنىتىش ، پايدىلىنىش ماتېرىيالى ۋە پوپايكىلارنى ئۆز ئىچىگە ئالغان جىسىم بىلەن بىرىنچى تالاش-تارتىش دەپ ئاتىلىدۇ. قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى تالاش-تارتىش سۈپىتىدە ئۆتتى. بۇ ئىقتىدار چوقۇم ئىككى سان بىلەن سانلار گۇرپىسىنى قايتۇرۇشى كېرەك . تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ offset ھۆججىتىنى كۆرۈڭ . |
autoClose |
boolean | string | true |
چۈشۈشنىڭ ئاپتوماتىك تاقاش ھەرىكىتىنى سەپلەڭ:
|
popperConfig |
null | ئوبيېكت | function | null |
Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆزگەرتىش ئۈچۈن Popper نىڭ سەپلىمىسىنى كۆرۈڭ . Popper سەپلىمىسىنى ھاسىل قىلىشتا بىر ئىقتىدار ئىشلىتىلگەندە ، ئۇ Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆز ئىچىگە ئالغان جىسىم بىلەن ئاتىلىدۇ. ئۇ سىزنىڭ سەپلىمىسىڭىز بىلەن سۈكۈتتىكىنى ئىشلىتىشىڭىزگە ۋە بىرلەشتۈرۈشىڭىزگە ياردەم بېرىدۇ. بۇ ئىقتىدار چوقۇم Popper نىڭ سەپلىمە ئوبيېكتىنى قايتۇرۇشى كېرەك. |
بىلەن ئىقتىدار ئىشلىتىشpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methods
ئۇسۇل | چۈشەندۈرۈش |
---|---|
toggle |
بېرىلگەن يولباشچى ياكى بەتكۈچ يولباشچىنىڭ تارتما تىزىملىكىنى بىر تەرەپ قىلىدۇ. |
show |
بېرىلگەن يولباشچى ياكى بەتكۈچ يول باشلاشنىڭ تىزىملىك تىزىملىكىنى كۆرسىتىدۇ. |
hide |
بېرىلگەن يولباشچى ياكى بەتكۈچ يول باشلاشنىڭ تىزىملىك تىزىملىكىنى يوشۇرىدۇ. |
update |
ئېلېمېنتنىڭ چۈشۈش ئورنىنى يېڭىلايدۇ. |
dispose |
ئېلېمېنتنىڭ تۆۋەنلىشىنى يوقىتىدۇ. (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ) |
getInstance |
تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتىغا مۇناسىۋەتلىك تۆۋەنلەش مىسالىغا ئېرىشەلەيسىز ، ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
تۇراقلىق ئۇسۇل DOM ئېلېمېنتىغا باغلانغان چۈشۈش مىسالىنى قايتۇرىدۇ ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى بارلىققا كەلتۈرىدۇ. ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز:bootstrap.Dropdown.getOrCreateInstance(element) |
Events
بارلىق چۈشۈش ھادىسىلىرى قوزغىتىش ئېلېمېنتىغا ئېتىلىپ ، ئاندىن كۆپۈككە ئايلىنىدۇ. .dropdown-menu
شۇڭا سىز ئاتا- ئانىلار ئېلېمېنتىغا پائالىيەت ئاڭلىغۇچىلارنى قوشالايسىز . hide.bs.dropdown
ۋە hidden.bs.dropdown
ۋەقەلەرنىڭ چېكىلىش پائالىيىتى ئۈچۈن پائالىيەت ئوبيېكتى بولغان clickEvent
خاسلىقى بار (پەقەت ئەسلىدىكى پائالىيەت تىپى بولغاندىلا ).click
ئۇسۇل | چۈشەندۈرۈش |
---|---|
show.bs.dropdown |
كۆرسىتىش ئۈلگىسى ئۇسۇلى چاقىرىلغاندا دەرھال ئوت كېتىدۇ. |
shown.bs.dropdown |
تۆۋەنلەش ئىشلەتكۈچىگە كۆرۈنگەندە ۋە CSS ئۆتكۈنچى باسقۇچلىرى تاماملانغاندىن كېيىن ئوت كەتتى. |
hide.bs.dropdown |
يوشۇرۇن مىسال ئۇسۇلى چاقىرىلغاندا دەرھال ئوت كېتىدۇ. |
hidden.bs.dropdown |
تۆۋەنلەش ئىشلەتكۈچىگە يوشۇرۇنغان ۋە CSS ئۆتكۈنچى تاماملانغاندىن كېيىن ئوت كەتكەن. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})