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 -ah siam a ni a , hei hian dynamic positioning leh viewport detection a pe a ni. Bootstrap-a JavaScript hmain popper.min.js kha dah hmasa phawt la, Popper awmna bootstrap.bundle.min.js/ hmang bawk ang che. bootstrap.bundle.jsPopper 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 awm

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 :

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

Tin, <a>elements te nen pawh:

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

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

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

Split button a awm bawk

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.

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

Kawng zawh dan tur

Dropup a ni

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

<!-- 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 a ni

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

<!-- 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 tih a ni

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

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

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

Tin, non-interactive dropdown item pawh i siam thei bawk .dropdown-item-text. Custom CSS emaw text utilities emaw hmangin style belh zel turin zalen takin awm rawh.

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

Harhvang

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

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

Ramtuileilo

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

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

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

Chhanna pe thei tur alignment

Responsive alignment hman i duh chuan attribute dah belhin dynamic positioning kha disable la data-display="static", responsive variation class te hmang rawh.

Dropdown menu chu breakpoint pek emaw a aia lian emaw nena dinglama align tur chuan .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 veilam chu breakpoint pek emaw a aia lian emaw nena align tur chuan add .dropdown-menu-rightleh .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>

Navbar-a dropdown button-ah hian attribute dah a ngai lo tih hre reng ang che data-display="static", Popper hi navbar-ah hman a nih loh avangin.

Headers te pawh a awm

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

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

Insem darhtute

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

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

Thumal

Freeform text eng pawh chu dropdown menu chhungah text awmnaah dah la , spacing utilities hmang rawh . Menu zau zawng tihtlem nan sizing style dang i mamawh mai thei tih hre reng ang che.

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

Form hrang hrang

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.

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

Dropdown awmna hmun thlak tur chuan data-offsetor hmang ang che .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>

Hman dan tur

Data attribute emaw JavaScript hmangin dropdown plugin hian thup (dropdown menu) te .showchu parent-a class toggling hmangin a toggle .dropdown-menuthin 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 type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu">
    ...
  </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 offset. Offset hriat nan function hman a nih chuan a argument hmasa ber atan offset data awmna object hmangin koh a ni. Function hian structure inang object a rawn pe chhuak tur a ni. Triggering element DOM node chu argument pahnihna atan pass a ni. Hriat belh duh chuan Popper-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’s flip docs ah hian en theih a ni.
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-a preventOverflow docs en rawh.
kawhhmuh	string \| thil bul	'toggle' a ti a.	Dropdown menu a reference element chu a rawn lang ang. `'toggle'`, `'parent'`, emaw HTMLElement reference value te a pawm . Hriat belh duh chuan Popper-a referenceObject docs en rawh.
tarchhuak	hrui	'dynamic' tih a ni.	Default-ah chuan Popper hi dynamic positioning atan kan hmang thin. Hei hi disable `static`rawh .
popperConfig a ni	null \| thil	engmah lo	Bootstrap a default Popper config thlak tur chuan Popper configuration en la

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('show')`	Navbar emaw tabbed navigation pek tawh dropdown menu a entir.
`$().dropdown('hide')`	Navbar emaw tabbed navigation pek tawh dropdown menu chu a thup 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. hide.bs.dropdownleh hidden.bs.dropdownevents te hian clickEventproperty an nei a (original event type chu click) a nih chuan click event atan Event Object a awm 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...
})

Dropdown te pawh a awm

A tlangpuiin

A thlen theihna tur

Entirna te

Button pakhat chauh a awm

Split button a awm bawk

Sizing a ni

Kawng zawh dan tur

Dropup a ni

Dropright a ni

Dropleft tih a ni

Menu-a thil awmte

Harhvang

Ramtuileilo

Menu alignment a awm bawk

Chhanna pe thei tur alignment

Menu chhunga thu awmte

Headers te pawh a awm

Insem darhtute

Thumal

Form hrang hrang

Hman dan tur

Data attribute hmangin a ni

JavaScript hmangin

`data-toggle="dropdown"`a la mamawh reng a ni

Thil thlan theih a ni

Thiltih dan tur

Thil thlengte

Dropdown te pawh a awm

A tlangpuiin

A thlen theihna tur

Entirna te

Button pakhat chauh a awm

Split button a awm bawk

Sizing a ni

Kawng zawh dan tur

Dropup a ni

Dropright a ni

Dropleft tih a ni

Menu-a thil awmte

Harhvang

Ramtuileilo

Menu alignment a awm bawk

Chhanna pe thei tur alignment

Menu chhunga thu awmte

Headers te pawh a awm

Dropdown header chu a rawn lang ang

Insem darhtute

Thumal

Form hrang hrang

Dropdown theihna tur a awm bawk

Hman dan tur

Data attribute hmangin a ni

JavaScript hmangin

data-toggle="dropdown"a la mamawh reng a ni

Thil thlan theih a ni

Thiltih dan tur

Thil thlengte

`data-toggle="dropdown"`a la mamawh reng a ni