Source

Dropdown te pawh a awm

Bootstrap dropdown plugin hmangin link list leh a dangte tarlanna tur contextual overlays te chu toggle rawh.

A tlangpuiin

Dropdown hi toggleable a ni a, link list leh thil dang tam tak tarlanna atan contextual overlay a awm bawk. Anni chu Bootstrap dropdown JavaScript plugin dah tel hmangin interactive taka siam an ni. Anni chu click hmanga toggle an ni a, hovering hmanga toggle an ni lo; hei hi tumruh taka design chungchanga thutlukna siam a ni.

Dropdown hi third party library, Popper.js -ah siam a ni a, hei hian dynamic positioning leh viewport detection a pe thei a ni. Bootstrap-a JavaScript hmain popper.min.js kha dah hmasa phawt la, Popper.js awmna bootstrap.bundle.min.js/ hmang bootstrap.bundle.jsbawk ang che. Popper.js hi navbar-a dropdown position nan hman a ni lo nain dynamic positioning a ngai lo.

Kan JavaScript hi source atanga i siam a nih chuanutil.js .

A thlen theihna tur

WAI ARIA standard hian actual widget a define a , role="menu"mahse hei hi application ang chi menus te tan bik a ni a, chu chuan action emaw function emaw a tichhuak thin. ARIA menu-ah hian menu item, checkbox menu item, radio button menu item, radio button group, leh sub-menu te chauh a awm thei.

Bootstrap-a dropdown te erawh chu generic leh situation hrang hrang leh markup structure hrang hranga hman theih tura siam a ni thung. Entirnan, input leh form control dang awmna dropdown siam theih a ni a, chu chu search field emaw login form emaw a ni. Hemi avang hian Bootstrap hian ARIA menu dik tak atana mamawh roleleh aria-attribute pakhat mah a beisei lo (a nih loh leh automatic a add lo bawk). Lehkhabu ziaktute chuan heng attribute chiang zawkte hi anmahni ngeiin an dah tel a ngai dawn a ni.

Mahse, Bootstrap hian standard keyboard menu interaction tam zawkah chuan built-in support a dah belh a, chu .dropdown-itemchu cursor key hmanga element hrang hrang kal tlanga kal theihna leh key hmanga menu khar theihna te ESChi a ni.

Entirna te

Dropdown-a toggle (i button emaw link emaw) leh dropdown menu chu .dropdown, emaw , declare element dang emaw chhungah wrap rawh position: relative;. Dropdowns chu i mamawh theihna tur ang zawka siam turin <a>emaw elements atang emaw atanga trigger theih a ni.<button>

Button pakhat chauh a dropdown a

Single eng pawh .btnhi dropdown toggle-ah a chantir thei a, markup thlak danglamna engemaw zat a awm bawk. <button>Hetah hian element pahnih emaw hmanga hnathawh tir theih dan tur chu hetiang hi a ni :

Action Another action Something else here 
<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>

Tin, <a>elements te nen pawh:

Action Another action Something else here 
<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>

A tha ber chu button variant eng pawh hmangin hetiang hian i ti thei bawk:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Split button a rawn lang ang

Chutiang bawkin, split button dropdown siam la, button pakhat dropdown ang chiah markup nen siam la, mahse .dropdown-toggle-splitdropdown caret chhehvela space dik tak neih theih nan tih belh rawh.

He extra class hmang hian paddingcaret sir lehlama horizontal chu 25% in kan tihhniam a, margin-leftregular button dropdown-a that’s added chu kan paih chhuak bawk. Chutiang extra changes chuan caret chu split button-ah centered-in a dah a, main button bulah hit area size tling zawk a pe bawk.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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 a ni

Button dropdown hian button size hrang hrang hmangin hna a thawk a, default leh split dropdown button te pawh a awm bawk.

<!-- 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 danglamna a awm

.dropupElement chunga dropdown menu te chu parent element ah dahin trigger rawh.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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 danglamna a awm

.droprightElement dinglama dropdown menu te chu parent element ah dahin trigger rawh.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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 danglamna a awm

.dropleftElement veilam a dropdown menu te chu parent element ah dahin trigger rawh.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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>

Historically dropdown menu contents chu link a nih a ngai a, mahse v4 ah chuan chutiang chu a ni tawh lo. Tunah chuan i dropdown-ah s chauh ai chuan optional <button>-in element i hmang thei tawh ang.<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>

Default-ah chuan dropdown menu chu a chung atanga 100% in a parent veilam sir lamah a awm nghal vek a ni. Dropdown menu chu .dropdown-menu-righta atanga dinglam hawiin add rawh ..dropdown-menu

Lu a ti sang a! Dropdown te hi Popper.js vangin an position a (navbar-a an awm lai tih loh chu).

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

Dropdown menu eng pawha action section hrang hrangte label turin header dah la.

Dropdown header chu a rawn lang ang
Thiltih Thiltih dang 
<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>

Menu item inzawm group hrang hrangte chu divider hmangin then hran rawh.

Thiltih Thiltih dang Hetah hian thil dang a awm
Link hran a ni 
<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>

Dropdown menu chhungah form dah la, a nih loh leh dropdown menu-ah siam la, margin emaw padding utilities emaw hmangin i mamawh negative space pe rawh.

Hetah hian thil thar thar? Sign up rawh Password i theihnghilh em? 
<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>

Menu items active tak tak te

.activeDropdown a thil awmte chu active anga style turin add rawh .

Regular link a awm bawk Active link a awm Link dang a awm bawk 
<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>

Menu item te chu tihtawp a ni

.disabledDropdown a thil awmte chu disabled anga style turin add rawh .

Regular link a awm bawk Link tihtawp a ni Link dang a awm bawk 
<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>

Hman dan tur

.showData attribute emaw JavaScript hmangin dropdown plugin hian parent list item-a class toggle-in thup (dropdown menu) a toggle a ni. Attribute hi data-toggle="dropdown"application level-a dropdown menu khar nan rintlak a nih avangin hman reng a tha.

Touch-enabled device-ah chuan dropdown hawn hian element fate hnaih berte hnenah handler empty ( $.noop) a belhchhah a ni. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , chutiang a nih loh chuan dropdown pawn lam hmun dangah tap chuan dropdown khartu code a tichhuak thei lo ang. Dropdown khar a nih veleh heng handler empty additional te hi an paih chhuak thin.mouseover<body>mouseover

Data attribute hmangin a ni

data-toggle="dropdown"Link emaw button emaw ah dah la , dropdown toggle rawh.

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

JavaScript hmangin dropdown te chu call la:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"a la mamawh reng a ni

JavaScript hmanga i dropdown i call emaw, a aiah data-api hmang emaw pawh nise, data-toggle="dropdown"dropdown-a trigger element-ah hian awm reng a ngai a ni.

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-offset="".

Hming Lampang Hlawhchhamna Hrilhfiahna
offset a ni number | string | thiltih 0 a ni A target nena khaikhin chuan dropdown chu offset a ni. Hriat belh duh chuan Popper.js-a offset docs en rawh.
vai boolean a ni dik Reference element-a overlapping a awm chuan Dropdown chu flip turin phalsak rawh. Hriat belh duh chuan Popper.js-a flip docs en rawh.
ramri a ni string | thil bul 'scrollParent' tih a ni. Dropdown menu ah hian overflow constraint boundary a awm a. 'viewport', 'window', 'scrollParent', emaw HTMLElement reference (JavaScript chauh) value te a pawm . Hriat belh duh chuan Popper.js-a preventOverflow docs en rawh.

Note tih boundaryloh value dang eng pawha set a nih chuan 'scrollParent', style chu container-ah position: statichman a ni tih hre reng ang che..dropdown

Thiltih dan tur

Tihdan Hrilhfiahna
$().dropdown('toggle') Navbar emaw tabbed navigation pek tawh dropdown menu chu a toggle thin.
$().dropdown('update') Element pakhat dropdown awmna hmun a update thin.
$().dropdown('dispose') Element pakhat dropdown a tichhia.

Thil thlengte

Dropdown event zawng zawng hi .dropdown-menu's parent element ah fire vek a ni a, relatedTargetproperty a nei a, a value chu toggling anchor element a ni.

Hunbik Hrilhfiahna
show.bs.dropdown He event hi show instance method a koh chuan a fire nghal vek a ni.
shown.bs.dropdown He event hi dropdown chu user hmuh theiha siam a nih chuan a fire thin (CSS transition a nghak ang, a zawh theih nan).
hide.bs.dropdown He event hi hide instance method koh a nih chuan a fire nghal a ni.
hidden.bs.dropdown He event hi dropdown chu user hnen atanga thup a nih zawh chuan a fire thin (CSS transitions a nghak ang, a zawh theih nan). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})