تامچە

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

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

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

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

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

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

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

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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-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-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-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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

يۆنىلىش

Dropup

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

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

Dropright

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

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

Dropleft

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

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

سىز يەنە ئۆز-ئارا تەسىر كۆرسەتمەيدىغان تامچە تۈرلەرنى قۇرالايسىز .dropdown-item-text. ئىختىيارى CSS ياكى تېكىست قوراللىرى بىلەن تېخىمۇ ئۇسلۇبنى ئەركىن ھېس قىلىڭ.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

ئاكتىپ

ئېسىلما .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">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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

Heads up! تامچە چۈشۈش Popper نىڭ ياردىمىدە ئورۇنلاشتۇرۇلغان (ئەگەر ئۇلار يولباشچىدا بولغانلىرىنى ھېسابقا ئالمىغاندا).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>

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

ئەگەر ئىنكاس قايتۇرۇشنى ئىشلەتمەكچى بولسىڭىز ، data-display="static"خاسلىقنى قوشۇش ئارقىلىق ھەرىكەتچان ئورۇن بەلگىلەشنى چەكلەڭ ھەمدە ئىنكاسچان ئۆزگىرىش سىنىپىنى ئىشلىتىڭ.

تارتما تىزىملىكنى بېرىلگەن بۆلەك ياكى چوڭراق بىلەن توغرىلاش ئۈچۈن قوشۇڭ .dropdown-menu{-sm|-md|-lg|-xl}-right.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

تارتما تىزىملىكتىن بېرىلگەن بۆسۈش ئېغىزى ياكى چوڭراقنى توغرىلاش ئۈچۈن قوشۇش.dropdown-menu-right ۋە .dropdown-menu{-sm|-md|-lg|-xl}-left.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

data-display="static"شۇنىڭغا دىققەت قىلىڭكى ، Popper ناۋايخانىدا ئىشلىتىلمىگەچكە ، بالداقتىكى تامچە كۇنۇپكىلارغا خاسلىق قوشۇشىڭىزنىڭ ھاجىتى يوق .

ماۋزۇلار

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

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

Dividers

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

<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 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="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-group">
      <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="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-group">
    <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-offsetياكى ئۆزگەرتىڭ.data-reference

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

ئىشلىتىش

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

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

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

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

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

JavaScript ئارقىلىق

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

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

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

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

تاللانما

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

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

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

Methods

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

Events

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

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

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

تامچە

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

قولايلىق

مىساللار

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

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

Sizing

يۆنىلىش

Dropup

Dropright

Dropleft

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

ئاكتىپ

چەكلەنگەن

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

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

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

ماۋزۇلار

Dividers

تېكىست

جەدۋەل

ئىشلىتىش

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

JavaScript ئارقىلىق

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

تاللانما

Methods

Events

تامچە

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

قولايلىق

مىساللار

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

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

Sizing

يۆنىلىش

Dropup

Dropright

Dropleft

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

ئاكتىپ

چەكلەنگەن

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

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

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

ماۋزۇلار

Dropdown header

Dividers

تېكىست

جەدۋەل

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

ئىشلىتىش

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

JavaScript ئارقىلىق

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

تاللانما

Methods

Events

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

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

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

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