ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

تامچە

Bootstrap چۈشۈرۈش قىستۇرمىسى بىلەن ئۇلىنىش تىزىملىكى ۋە تېخىمۇ كۆپ مەزمۇنلارنى كۆرسىتىش ئۈچۈن مەزمۇننى قاپلاڭ.

ئومۇمىي چۈشەنچە

تۆۋەنلەش كۆزنەكلىرى يۆتكىلىشچان ، ئۇلىنىش تىزىملىكىنى كۆرسىتىش ئۈچۈن مەزمۇننى قاپلايدۇ. ئۇلار ئۆز ئىچىگە ئالغان Bootstrap چۈشۈش JavaScript قىستۇرمىسى بىلەن ئۆز-ئارا تەسىر كۆرسىتىدۇ. ئۇلار چېكىش ئارقىلىق ئەمەس ، چېكىش ئارقىلىق يۆتكىلىدۇ. بۇ قەستەن لايىھىلەش قارارى .

Dropdowns ھەرىكەتچان ئورۇن بەلگىلەش ۋە كۆرۈنۈشنى بايقاش بىلەن تەمىنلەيدىغان Popper ئۈچىنچى تەرەپ كۈتۈپخانىسىغا قۇرۇلدى . Bootstrap نىڭ JavaScript ياكى Popper نى ئىشلىتىشتىن بۇرۇن popper.min.js نى جەزملەشتۈرۈڭ . Popper ھەرىكەتچان ئورۇن بەلگىلەش ھاجەتسىز بولسىمۇ ، ناۋادا تۆۋەنگە چۈشۈشنى ئورۇنلاشتۇرمايدۇ.bootstrap.bundle.min.jsbootstrap.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سول تەرەپتە كۆرۈنىدۇ.

Heads up! تامچە چۈشۈش Popper نىڭ ياردىمىدە ئورۇن بەلگىلەيدۇ.
<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]

نىشانغا سېلىشتۇرغاندا تۆۋەنلەشنىڭ تولۇقلىنىشى. سىز پەش ئارقىلىق ئايرىلغان قىممەت بىلەن سانلىق مەلۇمات خاسلىقىدا بىر قۇرنى يوللىيالايسىز:data-bs-offset="10,20"

فۇنكسىيەنى ئېنىقلاش ئۈچۈن فۇنكسىيە قوللىنىلغاندا ، ئۇ پوپايكا ئورنىتىش ، پايدىلىنىش ماتېرىيالى ۋە پوپايكىلارنى ئۆز ئىچىگە ئالغان جىسىم بىلەن بىرىنچى تالاش-تارتىش دەپ ئاتىلىدۇ. قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى تالاش-تارتىش سۈپىتىدە ئۆتتى. بۇ ئىقتىدار چوقۇم ئىككى سان بىلەن سانلار گۇرپىسىنى قايتۇرۇشى كېرەك .[skidding, distance]

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ offset ھۆججىتىنى كۆرۈڭ .

autoClose boolean | string true

چۈشۈشنىڭ ئاپتوماتىك تاقاش ھەرىكىتىنى سەپلەڭ:

  • true- تارتما تىزىملىكنىڭ سىرتىنى ياكى ئىچىنى چېكىش ئارقىلىق تاقىلىدۇ.
  • false- قوزغىتىش كۇنۇپكىسىنى بېسىش ۋە قولدا چاقىرىش hideياكى toggleئۇسۇل ئارقىلىق تامچە ئېتىلىدۇ. (يەنە كۇنۇپكىنى بېسىش ئارقىلىق تاقىلىپ قالمايدۇ esc)
  • 'inside'- تارتما تىزىملىكنىڭ ئىچىنى چېكىش ئارقىلىق (پەقەت) ئېتىلىدۇ.
  • 'outside'- تارتما تىزىملىكنىڭ سىرتىنى چېكىش ئارقىلىق (پەقەت) ئېتىلىدۇ.
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...
})