تامچە

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-

.dropdown-itemقانداقلا بولمىسۇن ، Bootstrap نۇر بەلگە كۇنۇپكىسى ئارقىلىق يەككە ئېلېمېنتلار ئارقىلىق يۆتكىلىش ۋە تىزىملىك بىلەن كۇنۇپكىنى تاقاش قاتارلىق كۆپ ئۆلچەملىك كۇنۇپكا تاختىسىنىڭ ئۆز-ئارا تەسىرلىشىشىنى ئۆز ئىچىگە ESCئالىدۇ.

مىساللار

تارتما كۇنۇپكىنى (كۇنۇپكا ياكى ئۇلىنىش) ۋە تارتما تىزىملىكنى .dropdownياكى ئېلان قىلىدىغان باشقا ئېلېمېنتنى ئوراپ قويۇڭ position: relative;. يوشۇرۇن ئېھتىياجلىرىڭىزغا تېخىمۇ ياخشى ماسلىشىش ئۈچۈن تامچە ياكى ئېلېمېنتلار قوزغىتىلىدۇ <a>. <button>بۇ يەردە كۆرسىتىلگەن مىساللار <ul>مۇۋاپىق بولغاندا مەنىلىك ئېلېمېنتلارنى ئىشلىتىدۇ ، ئەمما ئىختىيارى بەلگە قوللايدۇ.

يەككە كۇنۇپكا

ھەر قانداق يەككە .btnبەلگە ئۆزگەرتىش ئارقىلىق تۆۋەنلەش ھالىتىگە ئايلاندۇرغىلى بولىدۇ. ئۇلارنى قانداق قىلىپ ھەر ئىككى <button>ئېلېمېنت بىلەن خىزمەت قىلالايسىز؟

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

ئېلېمېنتلار بىلەن <a>:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <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>
  </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. تارتما تۈرلەرگە ئۆزگەرتىش تەلەپ قىلىنمايدۇ.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

ھەمدە ئۇنى يولباشچىغا ئىشلىتىش:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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ئوڭ تەرەپتە كۆرۈنىدۇ.

مەركەزلىك

تۆۋەنلەش تىزىملىكىنى .dropdown-centerئانا ئېلېمېنت بىلەن ئالماشتۇرۇشنىڭ ئاستىغا توغرىلاڭ.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

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>

Dropup مەركەز قىلىنغان

تاشلاش تىزىملىكىنى .dropup-centerئانا ئېلېمېنت بىلەن ئالماشتۇرۇشنىڭ ئۈستىگە مەركەزلەشتۈرۈڭ.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئوڭ تەرىپىدىكى تىزىملىك تىزىملىكى .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">
    Dropend
  </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 Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ سول تەرىپىدىكى تىزىملىك تىزىملىكى .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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

سىز ئېلېمېنتلارنى تامچە تۈر سۈپىتىدە <a>ئىشلىتەلەيسىز .<button>

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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 ياكى تېكىست قوراللىرى بىلەن تېخىمۇ ئۇسلۇبنى ئەركىن ھېس قىلىڭ.

html

<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بىر يۈرۈش نۆۋەتتىكى تۈرنى ئىشلىتىڭ.

html

<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چۈشۈرۈلگەن تۈرلەرگە ئۇلارنى مېيىپ قىلىپ ئۇسلۇب قىلىڭ .

html

<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 نىڭ ياردىمىدە ئورۇن بەلگىلەيدۇ.

html

<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.

html

<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.

html

<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 ناۋايخانىدا ئىشلىتىلمىگەچكە ، بالداقتىكى تامچە كۇنۇپكىلارغا خاسلىق قوشۇشىڭىزنىڭ ھاجىتى يوق .

توغرىلاش تاللانمىلىرى

يۇقىرىدا كۆرسىتىلگەن كۆپ قىسىم تاللاشلارنى ئېلىپ ئېيتساق ، بۇ يەردە بىر يەردە كىچىك تىپتىكى ئاشخانا چۆكۈش كۆرسەتكۈچى بار.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

ماۋزۇلار

ھەر بىر ئېسىلما تىزىملىكتىكى ھەرىكەت بۆلەكلىرىگە بەلگە قوشۇڭ.

html

<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

بۆلگۈچ بىلەن مۇناسىۋەتلىك تىزىملىك تۈرلىرىنى گۇرۇپپىلارغا ئايرىڭ.

html

<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>

تېكىست

ھەر قانداق ھەقسىز تېكىستنى ئېسىلما تىزىملىك ئىچىگە تېكىست بىلەن قويۇپ ، بوشلۇق ئەسلىھەلىرىنى ئىشلىتىڭ . تىزىملىك كەڭلىكىنى چەكلەش ئۈچۈن قوشۇمچە چوڭلۇقتىكى ئۇسلۇبلارغا ئېھتىياجلىق بولۇشىڭىزغا دىققەت قىلىڭ.

html

<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>

جەدۋەل

تامچە تىزىملىكنىڭ ئىچىگە جەدۋەل قويۇڭ ياكى ئۇنى ئېسىلما تىزىملىككە ئايلاندۇرۇڭ ، ھەمدە گىرۋەك ياكى تاختا ئىشلىتىشتىن پايدىلىنىپ ، ئۇنىڭغا ئېھتىياجلىق سەلبىي بوشلۇق بېرىڭ.

html

<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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

چۈشۈش ئورنىنى ئىشلىتىڭ data-bs-offsetياكى ئۆزگەرتىڭ.data-bs-reference

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

ئاپتوماتىك تاقاش ھەرىكىتى

سۈكۈتتىكى ھالەتتە ، ئېسىلما تىزىملىكنىڭ ئىچى ياكى سىرتىنى چەككەندە ئېسىلما تىزىملىك تاقىلىدۇ. autoCloseتاللانما ئارقىلىق تۆۋەنلەشنىڭ بۇ ھەرىكىتىنى ئۆزگەرتەلەيسىز .

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

CSS

ئۆزگەرگۈچى مىقدار

V5.2.0 گە قوشۇلدى

Bootstrap نىڭ تەرەققىي قىلىۋاتقان CSS ئۆزگەرگۈچى مىقدارنىڭ بىر قىسمى بولۇش سۈپىتى بىلەن ، چۈشۈشلەر ھازىر يەرلىك CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىپ .dropdown-menu، ھەقىقىي ۋاقىتتا خاسلاشتۇرۇشنى كۈچەيتىدۇ. CSS ئۆزگەرگۈچى مىقدارنىڭ قىممىتى Sass ئارقىلىق بەلگىلىنىدۇ ، شۇڭا Sass خاسلاشتۇرۇش يەنىلا قوللىنىدۇ.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

.dropdown-menu-darkCSS ئۆزگەرگۈچى مىقدار ئارقىلىق خاسلاشتۇرۇشنى تەكرارلانغان CSS تاللىغۇچنى قوشماي تۇرۇپ ئالاھىدە قىممەتنى بېسىپ ئۆتىدىغان سىنىپتا كۆرگىلى بولىدۇ .

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

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:             var(--#{$prefix}border-color-translucent);
$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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

قاراڭغۇ چۈشۈشنىڭ ئۆزگىرىشچانلىقى :

$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 type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

JavaScript ئارقىلىق

چۈشۈشنى JavaScript ئارقىلىق تېلېفون قىلىڭ:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`يەنىلا تەلەپ قىلىنىدۇ

مەيلى سىز JavaScript ئارقىلىق چۈشۈش تېلېفونىڭىزغا تېلېفون قىلىڭ ياكى ئۇنىڭ ئورنىغا سانلىق مەلۇمات api نى ئىشلىتىڭ ، data-bs-toggle="dropdown"ھەمىشە تۆۋەنلەشنىڭ قوزغىتىش ئېلېمېنتىدا بولۇشى تەلەپ قىلىنىدۇ.

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدىغان بولغاچقا ، تاللاش نامىغا data-bs-ئوخشاش قوشۇمچە ئىسىم قوشالايسىز data-bs-animation="{value}". تاللانما نامىنىڭ دېلو تۈرىنى سانلىق مەلۇمات خاسلىقى ئارقىلىق يوللىغاندا «تۆگە قېپى » دىن « kebab -case » غا ئۆزگەرتىشنى جەزملەشتۈرۈڭ. مەسىلەن ، data-bs-custom-class="beautifier"ئۇنىڭ ئورنىغا ئىشلىتىڭ data-bs-customClass="beautifier".

Bootstrap 5.2.0 گە قەدەر ، بارلىق زاپچاسلار JSON تىزمىسى سۈپىتىدە ئاددىي زاپچاس سەپلىمىسىنى ساقلىيالايدىغان تەجرىبە ساقلانغان سانلىق مەلۇمات خاسلىقىنى قوللايدۇ. data-bs-configئېلېمېنتنىڭ خاسلىقى data-bs-config='{"delay":0, "title":123}'ۋە data-bs-title="456"خاسلىقى بولغاندا ، ئاخىرقى titleقىممىتى بولىدۇ 456ۋە ئايرىم سانلىق مەلۇمات خاسلىقى بېرىلگەن قىممەتنى بېسىپ data-bs-configچۈشىدۇ. بۇنىڭدىن باشقا ، مەۋجۇت سانلىق مەلۇمات خاسلىقى JSON قىممىتىنى ساقلىيالايدۇ data-bs-delay='{"show":0,"hide":150}'.

ئىسمى	تىپ	سۈكۈتتىكى	چۈشەندۈرۈش
`autoClose`	boolean, string	`true`	چۈشۈشنىڭ ئاپتوماتىك تاقاش ھەرىكىتىنى سەپلەڭ: `true`- تارتما تىزىملىكنىڭ سىرتىنى ياكى ئىچىنى چېكىش ئارقىلىق تاقىلىدۇ. `false`- قوزغىتىش كۇنۇپكىسىنى بېسىش ۋە قولدا چاقىرىش `hide`ياكى `toggle`ئۇسۇل ئارقىلىق تامچە ئېتىلىدۇ. (يەنە كۇنۇپكىنى بېسىش ئارقىلىق تاقىلىپ قالمايدۇ `esc`) `'inside'`- تارتما تىزىملىكنىڭ ئىچىنى چېكىش ئارقىلىق (پەقەت) ئېتىلىدۇ. `'outside'`- تارتما تىزىملىكنىڭ سىرتىنى چېكىش ئارقىلىق (پەقەت) ئېتىلىدۇ. ئەسكەرتىش: چۈشۈشنى ھەمىشە `ESC`ئاچقۇچ بىلەن تاقىغىلى بولىدۇ.
`boundary`	string, element	`'clippingParents'`	چۈشۈش تىزىملىكىنىڭ ئېقىپ كېتىش چەكلىمىسى (پەقەت Popper نىڭ ئالدىنى ئېلىش ئېقىمى ئۆزگەرتكۈچكە ماس كېلىدۇ). سۈكۈتتىكى ھالەتتە ئۇ `clippingParents`HTMLElement پايدىلىنىشىنى قوبۇل قىلالايدۇ (پەقەت JavaScript ئارقىلىق). تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ detectOverflow ھۆججىتىنى كۆرۈڭ .
`display`	string	`'dynamic'`	سۈكۈت بويىچە ، Popper نى ھەرىكەتچان ئورۇن بەلگىلەشكە ئىشلىتىمىز. بۇنى چەكلەڭ `static`.
`offset`	سانلار گۇرپىسى ، تىزما ، ئىقتىدار	`[0, 2]`	نىشانغا سېلىشتۇرغاندا تۆۋەنلەشنىڭ تولۇقلىنىشى. سىز تۆۋەندىكىدەك پەش بىلەن ئايرىلغان قىممەتلەر بىلەن سانلىق مەلۇمات خاسلىقىدا بىر قۇرنى يەتكۈزەلەيسىز `data-bs-offset="10,20"`. فۇنكسىيەنى ئېنىقلاش ئۈچۈن فۇنكسىيە قوللىنىلغاندا ، ئۇ پوپايكا ئورنىتىش ، پايدىلىنىش ماتېرىيالى ۋە پوپايكىلارنى ئۆز ئىچىگە ئالغان جىسىم بىلەن بىرىنچى تالاش-تارتىش دەپ ئاتىلىدۇ. قوزغىتىش ئېلېمېنتى DOM تۈگۈنى ئىككىنچى تالاش-تارتىش سۈپىتىدە ئۆتتى. بۇ ئىقتىدار چوقۇم ئىككى سان بىلەن سانلار گۇرپىسىنى قايتۇرۇشى كېرەك: تېيىلىش ، ئارىلىق . تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper نىڭ offset ھۆججىتىنى كۆرۈڭ .
`popperConfig`	null, object, function	`null`	Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆزگەرتىش ئۈچۈن Popper نىڭ سەپلىمىسىنى كۆرۈڭ . Popper سەپلىمىسىنى ھاسىل قىلىشتا بىر ئىقتىدار ئىشلىتىلگەندە ، ئۇ Bootstrap نىڭ سۈكۈتتىكى Popper سەپلىمىسىنى ئۆز ئىچىگە ئالغان جىسىم بىلەن ئاتىلىدۇ. ئۇ سىزنىڭ سەپلىمىسىڭىز بىلەن سۈكۈتتىكىنى ئىشلىتىشىڭىزگە ۋە بىرلەشتۈرۈشىڭىزگە ياردەم بېرىدۇ. بۇ ئىقتىدار چوقۇم Popper نىڭ سەپلىمە ئوبيېكتىنى قايتۇرۇشى كېرەك.
`reference`	string, element, object	`'toggle'`	تارتما تىزىملىكنىڭ پايدىلىنىش ئېلېمېنتى. `'toggle'`، `'parent'`HTMLElement پايدىلىنىش قىممىتى ياكى تەمىنلەيدىغان ئوبيېكتنىڭ قىممىتىنى قوبۇل قىلىدۇ `getBoundingClientRect`. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper نىڭ قۇرغۇچى ھۆججىتى ۋە مەۋھۇم ئېلېمېنت ھۆججىتىنى كۆرۈڭ .

بىلەن ئىقتىدار ئىشلىتىش`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Methods

ئۇسۇل	چۈشەندۈرۈش
`dispose`	ئېلېمېنتنىڭ تۆۋەنلىشىنى يوقىتىدۇ. (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ)
`getInstance`	تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتىغا مۇناسىۋەتلىك تۆۋەنلەش مىسالىغا ئېرىشەلەيسىز ، ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز : `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	تۇراقلىق ئۇسۇل DOM ئېلېمېنتىغا باغلانغان تۆۋەنلەش مىسالىنى قايتۇرىدۇ ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى بارلىققا كەلتۈرىدۇ. ئۇنى مۇنداق ئىشلىتەلەيسىز : `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	بېرىلگەن يولباشچى ياكى بەتكۈچ يول باشلاشنىڭ تىزىملىك تىزىملىكىنى يوشۇرىدۇ.
`show`	بېرىلگەن يولباشچى ياكى بەتكۈچ يول باشلاشنىڭ تىزىملىك تىزىملىكىنى كۆرسىتىدۇ.
`toggle`	بېرىلگەن يولباشچى ياكى بەتكۈچ يولباشچىنىڭ تارتما تىزىملىكىنى بىر تەرەپ قىلىدۇ.
`update`	ئېلېمېنتنىڭ چۈشۈش ئورنىنى يېڭىلايدۇ.

Events

بارلىق چۈشۈش ھادىسىلىرى قوزغىتىش ئېلېمېنتىغا ئېتىلىپ ، ئاندىن كۆپۈككە ئايلىنىدۇ. .dropdown-menuشۇڭا سىز ئاتا- ئانىلار ئېلېمېنتىغا پائالىيەت ئاڭلىغۇچىلارنى قوشالايسىز . hide.bs.dropdownۋە hidden.bs.dropdownۋەقەلەرنىڭ چېكىلىش پائالىيىتى ئۈچۈن پائالىيەت ئوبيېكتى بولغان clickEventخاسلىقى بار (پەقەت ئەسلىدىكى پائالىيەت تىپى بولغاندىلا ).click

پائالىيەت تىپى	چۈشەندۈرۈش
`hide.bs.dropdown`	`hide`مىسال ئۇسۇلى چاقىرىلغاندا دەرھال ئوت كېتىدۇ .
`hidden.bs.dropdown`	تۆۋەنلەش ئىشلەتكۈچىگە يوشۇرۇنغان ۋە CSS ئۆتكۈنچى باسقۇچلىرى تاماملانغاندىن كېيىن ئوت كەتكەن.
`show.bs.dropdown`	`show`مىسال ئۇسۇلى چاقىرىلغاندا دەرھال ئوت كېتىدۇ .
`shown.bs.dropdown`	تۆۋەنلەش ئىشلەتكۈچىگە كۆرۈنگەندە ۋە CSS ئۆتكۈنچى باسقۇچلىرى تاماملانغاندىن كېيىن ئوت كەتتى.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

تامچە

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

قولايلىق

مىساللار

يەككە كۇنۇپكا

بۆلۈش كۇنۇپكىسى

Sizing

قاراڭغۇ چۈشۈش

يۆنىلىش

RTL

مەركەزلىك

Dropup

Dropup مەركەز قىلىنغان

Dropend

Dropstart

تىزىملىك تۈرلىرى

ئاكتىپ

چەكلەنگەن

تىزىملىك ماسلاشتۇرۇش

جاۋاب قايتۇرۇش

توغرىلاش تاللانمىلىرى

تىزىملىك مەزمۇنى

ماۋزۇلار

Dividers

تېكىست

جەدۋەل

ئاپتوماتىك تاقاش ھەرىكىتى

CSS

ئۆزگەرگۈچى مىقدار

Sass ئۆزگەرگۈچى مىقدار

Mixins

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript ئارقىلىق

`data-bs-toggle="dropdown"`يەنىلا تەلەپ قىلىنىدۇ

تاللانما

بىلەن ئىقتىدار ئىشلىتىش`popperConfig`

Methods

Events

تامچە

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

قولايلىق

مىساللار

يەككە كۇنۇپكا

بۆلۈش كۇنۇپكىسى

Sizing

قاراڭغۇ چۈشۈش

يۆنىلىش

RTL

مەركەزلىك

Dropup

Dropup مەركەز قىلىنغان

Dropend

Dropstart

تىزىملىك ​​تۈرلىرى

ئاكتىپ

چەكلەنگەن

تىزىملىك ​​ماسلاشتۇرۇش

جاۋاب قايتۇرۇش

توغرىلاش تاللانمىلىرى

تىزىملىك ​​مەزمۇنى

ماۋزۇلار

Dropdown header

Dividers

تېكىست

جەدۋەل

تاشلاش تاللانمىلىرى

ئاپتوماتىك تاقاش ھەرىكىتى

CSS

ئۆزگەرگۈچى مىقدار

Sass ئۆزگەرگۈچى مىقدار

Mixins

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript ئارقىلىق

data-bs-toggle="dropdown"يەنىلا تەلەپ قىلىنىدۇ

تاللانما

بىلەن ئىقتىدار ئىشلىتىشpopperConfig

Methods

Events

تىزىملىك تۈرلىرى

تىزىملىك ماسلاشتۇرۇش

تىزىملىك مەزمۇنى

`data-bs-toggle="dropdown"`يەنىلا تەلەپ قىلىنىدۇ

بىلەن ئىقتىدار ئىشلىتىش`popperConfig`