تامچە

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

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

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

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

ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js .

قولايلىق

WAI ARIA ئۆلچىمى ئەمەلىي role="menu"كىچىك قورالغا ئېنىقلىما بېرىدۇ ، ئەمما بۇ ھەرىكەت ياكى ئىقتىدار قوزغىتىدىغان قوللىنىشچان پروگراممىلارغا خاس. ARIA تىزىملىكلىرى پەقەت تىزىملىك تۈرلىرى ، تەكشۈرۈش رامكىسى تىزىملىكى ، رادىئو كۇنۇپكىسى تىزىملىك تۈرلىرى ، رادىئو كۇنۇپكا گۇرۇپپىسى ۋە تارماق تىزىملىكلەرنىلا ئۆز ئىچىگە ئالىدۇ.

Bootstrap نىڭ چۈشۈش نىسبىتى بولسا ئومۇمىي جەھەتتىن لايىھەلەنگەن بولۇپ ، ھەر خىل ئەھۋال ۋە بەلگە قۇرۇلمىلىرىغا ماس كېلىدۇ. مەسىلەن ، ئىزدەش بۆلىكى ياكى كىرىش جەدۋىلى قاتارلىق قوشۇمچە كىرگۈزۈش ۋە شەكىل كونتروللىرىنى ئۆز ئىچىگە ئالغان تامچە قۇرغىلى بولىدۇ. بۇ سەۋەبتىن ، Bootstrap ھەقىقىي ARIA تىزىملىكلىرىگە لازىملىق roleۋە خاسلىقلارنىڭ ھېچقايسىسىنى ئۈمىد قىلمايدۇ (ياكى ئاپتوماتىك قوشمايدۇ) . ئاپتورلار بۇ تېخىمۇ كونكرېت خاسلىقنى ئۆز ئىچىگە ئېلىشى كېرەك.aria-

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

مىساللار

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

يەككە كۇنۇپكا چۈشۈش

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

ئەڭ ياخشى يېرى سىز بۇنى ھەر قانداق كۇنۇپكا بىلەن ئۆزگەرتەلەيسىز:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Sizing

كونۇپكا تاختىسىنىڭ سۈكۈتتىكى ۋە بۆلۈش كۇنۇپكىسىنى ئۆز ئىچىگە ئالغان بارلىق چوڭلۇقتىكى كۇنۇپكىلار بىلەن ئىشلەيدۇ.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

تامچە ئۆزگىرىش

باش ئېلېمېنتنى قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئۈستىدىكى تىزىملىكلەرنى قوزغىتىڭ .dropup.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright variation

باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ ئوڭ تەرىپىدىكى تىزىملىك تىزىملىكى .dropright.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

تامچە ئۆزگىرىش

باش ئېلېمېنتقا قوشۇش ئارقىلىق ئېلېمېنتلارنىڭ سول تەرىپىدىكى تىزىملىك تىزىملىكى .dropleft.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

تارىختىن چۈشۈش تىزىملىكىدىكى مەزمۇنلار ئۇلىنىش بولۇشى كېرەك ئىدى ، ئەمما v4 بىلەن ئەمدى ئۇنداق بولمايدۇ. ھازىر تاللانمىلىرىڭىزدىكى ئېلېمېنتلارنى پەقەت s نىڭ <button>ئورنىغا ئىشلەتسىڭىز بولىدۇ.<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

سۈكۈت بويىچە ، چۈشۈش تىزىملىكى ئاپتوماتىك ھالدا ئاتا-ئانىسىنىڭ ئۈستى ۋە سول تەرىپىدىن% 100 ئورۇنلىنىدۇ. .dropdown-menu-rightئوڭغا ئوڭغا قوشۇش .dropdown-menuتىزىملىكى.

Heads up! تامچە چۈشۈش Popper.js نىڭ ياردىمىدە ئورۇنلاشتۇرۇلغان.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ئېسىلما .activeھالەتتىكى تۈرلەرگە ئۇلارنى ئاكتىپ ھالەتتە ئۇسلۇب قىلىڭ .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

تۆۋەنگە .disabledچۈشۈرۈلگەن تۈرلەرگە ئۇلارنى مېيىپ قىلىپ ئۇسلۇب قىلىڭ .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق ، تارتما قىستۇرما .showئانا تىزىملىك تۈرىدىكى دەرسنى ئالماشتۇرۇش ئارقىلىق يوشۇرۇن مەزمۇننى (چۈشۈرۈش تىزىملىكى) ئالماشتۇرىدۇ. بۇ data-toggle="dropdown"خاسلىق قوللىنىشچان پروگراممىلاردىكى تامچە تىزىملىكلەرنى تاقاشقا تايىنىدۇ ، شۇڭا ئۇنى دائىم ئىشلىتىش ياخشى ئۇسۇل.

سېزىمچان ئۈسكۈنىلەردە ، تامچە ئېچىش ئېلېمېنتنىڭ بىۋاسىتە بالىلىرىغا قۇرۇق ( $.noop) تۇتقۇچلارنى قوشىدۇ. ئېتىراپ قىلىشقا تېگىشلىكى شۇكى ، بۇ سەت خاككېرلار iOS پائالىيەت ۋەكىللەر ئۆمىكىدىكى قالايمىقانچىلىقنى چۆرىدىگەن ھالدا ئىشلەشكە موھتاج ، بۇنداق بولغاندا تامچە چۈشۈشنىڭ سىرتىدىكى ھەر قانداق بىر چېكىشنىڭ تۆۋەنلەش كودىنى قوزغىتىشىنىڭ ئالدىنى ئالىدۇ. تامچە تاقالغاندىن كېيىن ، بۇ قوشۇمچە قۇرۇق تۇتقۇچلار چىقىرىۋېتىلىدۇ.mouseover<body>mouseover

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

ئۇلىنىش ياكى كۇنۇپكىنى قوشسىڭىز data-toggle="dropdown"، چۈشۈشنى قوزغىتىڭ.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

JavaScript ئارقىلىق

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

$('.dropdown-toggle').dropdown()

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

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

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset="".

ئىسمى	تىپ	سۈكۈتتىكى	چۈشەندۈرۈش
offset	سان \| string \| function	0	نىشانغا سېلىشتۇرغاندا تۆۋەنلەشنىڭ تولۇقلىنىشى. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper.js نىڭ offset ھۆججىتىنى كۆرۈڭ .
flip	boolean	true	پايدىلىنىش ئېلېمېنتى قاپلانغان ئەھۋال ئاستىدا Dropdown نىڭ سىيرىلىشىغا يول قويۇڭ. تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن Popper.js نىڭ flip ھۆججىتىنى كۆرۈڭ .
چېگرا	string \| ئېلېمېنت	'scrollParent'	ئېسىلما تىزىملىكنىڭ ئېقىپ كېتىش چەكلىمىسى. `'viewport'`، ياكى HTMLElement پايدىلىنىش قىممىتى (پەقەت JavaScript) نىڭ `'window'`قىممىتىنى قوبۇل قىلىدۇ . `'scrollParent'`تېخىمۇ كۆپ ئۇچۇرغا ئېرىشمەكچى بولسىڭىز Popper.js نىڭ ئالدىنى ئېلىش ئېقىمى ھۆججىتىنى كۆرۈڭ .

boundaryقاچاندىن باشقا قىممەتكە تەڭشەلگەنلىكىگە دىققەت قىلىڭ 'scrollParent'، ئۇسلۇب قاچىغا position: staticقوللىنىلىدۇ .dropdown.

Methods

ئۇسۇل	چۈشەندۈرۈش
`$().dropdown('toggle')`	بېرىلگەن يولباشچى ياكى بەتكۈچ يولباشچىنىڭ تارتما تىزىملىكىنى بىر تەرەپ قىلىدۇ.
`$().dropdown('update')`	ئېلېمېنتنىڭ چۈشۈش ئورنىنى يېڭىلايدۇ.
`$().dropdown('dispose')`	ئېلېمېنتنىڭ تۆۋەنلىشىنى يوقىتىدۇ.

Events

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

تامچە

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

قولايلىق

مىساللار

يەككە كۇنۇپكا چۈشۈش

كۇنۇپكا تاختىسىنى پارچىلاش

Sizing

تامچە ئۆزگىرىش

Dropright variation

تامچە ئۆزگىرىش

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

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

تىزىملىك ماۋزۇلىرى

تىزىملىك بۆلگۈچ

تىزىملىك جەدۋىلى

ئاكتىپ تىزىملىك تۈرلىرى

تىزىملىك تۈرلىرى چەكلەنگەن

ئىشلىتىش

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

JavaScript ئارقىلىق

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

تاللانما

Methods

Events

تامچە

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

قولايلىق

مىساللار

يەككە كۇنۇپكا چۈشۈش

كۇنۇپكا تاختىسىنى پارچىلاش

Sizing

تامچە ئۆزگىرىش

Dropright variation

تامچە ئۆزگىرىش

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

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

تىزىملىك ​​ماۋزۇلىرى

Dropdown header

تىزىملىك ​​بۆلگۈچ

تىزىملىك ​​جەدۋىلى

ئاكتىپ تىزىملىك ​​تۈرلىرى

تىزىملىك ​​تۈرلىرى چەكلەنگەن

ئىشلىتىش

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

JavaScript ئارقىلىق

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

تاللانما

Methods

Events

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

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

تىزىملىك ماۋزۇلىرى

تىزىملىك بۆلگۈچ

تىزىملىك جەدۋىلى

ئاكتىپ تىزىملىك تۈرلىرى

تىزىملىك تۈرلىرى چەكلەنگەن

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