Dropdowns

Toggle kontextuell Iwwerlagerungen fir Lëschte vu Linken ze weisen a méi mam Bootstrap Dropdown Plugin.

Iwwersiicht

Dropdowns sinn togglebar, kontextuell Iwwerlagerungen fir Lëschte vu Linken ze weisen a méi. Si ginn interaktiv gemaach mam abegraff Bootstrap Dropdown JavaScript Plugin. Si ginn duerch Klick gekippt, net duerch Schweef; dëst ass eng virsiichteg Designdecisioun.

Dropdowns sinn op eng drëtt Partei Bibliothéik gebaut, Popper.js , déi dynamesch Positionéierung an viewport Detektioun gëtt. Gitt sécher datt Dir Popper.min.js virum Bootstrap's JavaScript enthält oder benotzt bootstrap.bundle.min.js/ bootstrap.bundle.jsdéi Popper.js enthält. Popper.js gëtt net benotzt fir Dropdowns an Navbars ze positionéieren, awer well dynamesch Positionéierung net erfuerderlech ass.

Wann Dir eis JavaScript aus der Quell baut, brauchutil.js et .

Accessibilitéit

De WAI ARIA Standard definéiert en aktuellen role="menu"Widget , awer dëst ass spezifesch fir Applikatiounsähnlech Menüen déi Aktiounen oder Funktiounen ausléisen. ARIA Menue kënnen nëmmen Menü Elementer enthalen, Checkbox Menü Elementer, Radio Button Menü Elementer, Radio Button Gruppen, an Ënnermenüen.

Dem Bootstrap seng Dropdowns, op der anerer Säit, sinn entwéckelt fir generesch ze sinn an applicabel op eng Vielfalt vu Situatiounen a Markupstrukturen. Zum Beispill ass et méiglech Dropdowns ze kreéieren déi zousätzlech Inputen a Formkontrolle enthalen, sou wéi Sichfelder oder Loginformen. Aus dësem Grond erwaart Bootstrap keng vun den rolean aria-Attributer déi fir richteg ARIA Menüen erfuerderlech sinn (och net automatesch derbäi). Autoren mussen dës méi spezifesch Attributer selwer enthalen.

Wéi och ëmmer, Bootstrap füügt gebaut-an Ënnerstëtzung fir déi meescht Standard Tastaturmenü Interaktiounen, sou wéi d'Fäegkeet fir duerch eenzel .dropdown-itemElementer mat de Cursorschlësselen ze bewegen an de Menü mat dem ESCSchlëssel zouzemaachen.

Beispiller

Wickelt den Dropdown-Taggle (Äre Knäppchen oder Link) an den Dropdown-Menü bannent .dropdown, oder en anert Element dat deklaréiert position: relative;. Dropdowns kënnen aus <a>oder <button>Elementer ausgeléist ginn fir Är potenziell Bedierfnesser besser ze passen.

Single Knäppchen

All Single .btnkann an e Dropdown Toggle ëmgewandelt ginn mat e puer Markup Ännerungen. Hei ass wéi Dir se mat entweder <button>Elementer setzen kënnt:

<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 mat <a>Elementer:

<div class="dropdown">
  <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>

Dee beschten Deel ass datt Dir dëst och mat all Knäppchenvariant maache kënnt:

<!-- 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 Knäppchen

Ähnlech erstellt Splitknäppchen Dropdowns mat quasi déiselwecht Markup wéi Single Button Dropdowns, awer mat der Zousatz vu .dropdown-toggle-splitfir richteg Abstand ronderëm den Dropdown Caret.

Mir benotzen dës extra Klass fir d'horizontal paddingop béide Säiten vun der caret ze reduzéieren mat 25% an ewechzehuelen déi margin-leftfir regelméisseg Knäppchen dropdowns dobäi ass. Déi extra Ännerunge behalen de Caret am Spaltknäppchen zentréiert a liwweren e méi passend Gréissten Hitgebitt nieft dem Haaptknäppchen.

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

Gréisst

Button Dropdowns funktionnéieren mat Knäppercher vun alle Gréissten, dorënner Standard a Split Dropdown Knäppercher.

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

Richtungen

Dropup

Ausléiser Dropdown-Menüen iwwer Elementer andeems Dir .dropupdem Elterendeel bäidréit.

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

Ausléiser Dropdown-Menüen op der rietser Säit vun den Elementer andeems Dir .droprightop den Elterendeel bäidréit.

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

Ausléiser Dropdown-Menüen op der lénker Säit vun den Elementer andeems Dir .dropleftdem Elterendeel bäidréit.

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

Historesch huet d'Dropdown-Menü Inhalter misse Linken sinn, awer dat ass net méi de Fall mat v4. Elo kënnt Dir optional <button>Elementer an Ären Dropdowns benotzen anstatt just <a>s.

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

Dir kënnt och net-interaktiven Dropdown-Elementer mat .dropdown-item-text. Fillt Iech gratis weider ze styléieren mat personaliséierten CSS oder Text Utilities.

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

Aktiv

Füügt .activeArtikelen am Dropdown -Menü fir se als aktiv ze stiléieren .

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

Behënnert

Füügt .disabledun Artikelen am Dropdown fir se als behënnert ze stiléieren .

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

Par défaut gëtt en Dropdown-Menü automatesch 100% vun uewen a laanscht déi lénks Säit vu sengem Elterendeel positionéiert. Füügt .dropdown-menu-rightop eng .dropdown-menuriets ausgeriicht den Dropdown-Menü.

Kapp erop! Dropdowns sinn positionéiert dank Popper.js (ausser wann se an enger navbar enthale sinn).

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

Header

Füügt en Header fir Sektiounen vun Aktiounen an all Dropdown-Menü ze markéieren.

<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

Trennt Gruppe vu verwandte Menüartikele mat engem Trenndeel.

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

Text

Plaz all freeform Text an engem Dropdown-Menü mat Text a benotzt Abstands-Utilities . Bedenkt datt Dir wahrscheinlech zousätzlech Gréisststiler braucht fir d'Menübreet ze beschränken.

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

Formen

Setzt e Formulaire an engem Dropdown-Menü, oder maacht et an en Dropdown-Menü, a benotzt Margin- oder Padding-Utilities fir et den negativen Raum ze ginn deen Dir braucht.

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

Benotzt data-offsetoder data-referencefir d'Plaz vum Dropdown ze änneren.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>

Benotzung

Iwwer Dateattributer oder JavaScript wiesselt den Dropdown-Plugin verstoppt Inhalt (Dropdown-Menüen) andeems Dir d' .showKlass op den Elterelëscht Element wiesselt. D' data-toggle="dropdown"Attributer gëtt ugewisen fir Dropdown-Menüen op engem Applikatiounsniveau zouzemaachen, also ass et eng gutt Iddi et ëmmer ze benotzen.

Op Touch-aktivéierten Apparater, d'Ouverture vun engem Dropdown füügt eidel ( $.noop) mouseoverHandler un déi direkt Kanner vum <body>Element. Dësen zouginn ellent Hack ass néideg fir ëm e Quirk an der iOS Event Delegatioun ze schaffen , wat soss verhënnert datt e Krunn iergendwou ausserhalb vum Dropdown de Code ausléist deen den Dropdown zoumaacht. Wann den Dropdown zougemaach ass, ginn dës zousätzlech eidel mouseoverHandler geläscht.

Via daten Attributer

Füügt data-toggle="dropdown"e Link oder Knäppchen fir en Dropdown ze wiesselen.

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

Iwwer JavaScript

Rufft d'Dropdowns iwwer JavaScript un:

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

`data-toggle="dropdown"`nach néideg

Egal ob Dir Ären Dropdown iwwer JavaScript nennt oder amplaz den Data-APi benotzt, data-toggle="dropdown"ass ëmmer erfuerderlech um Ausléiserelement vum Dropdown präsent ze sinn.

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-offset="".

Numm	Typ	Default	Beschreiwung
offset	Zuel \| streng \| Funktioun	0	Offset vum Dropdown relativ zu sengem Zil. Fir méi Informatiounen, kuckt op Popper.js's Offset Docs .
flipp	boolesch	wouer	Erlaabt den Dropdown ze flippen am Fall vun enger Iwwerlappung um Referenzelement. Fir méi Informatioun kuckt op de Popper.js Flip Docs .
Grenz	streng \| element	'scrollParent'	Iwwerschwemmungsgrenze vum Dropdown-Menü. Akzeptéiert d'Wäerter vun `'viewport'`, `'window'`, `'scrollParent'`oder eng HTMLElement Referenz (nëmmen JavaScript). Fir méi Informatioun kuckt op Popper.js's preventOverflow Docs .
Referenz	streng \| element	'schalten'	Referenzelement vum Dropdown-Menü. Akzeptéiert d'Wäerter vun `'toggle'`, `'parent'`, oder eng HTMLElement Referenz. Fir méi Informatioun kuckt op Popper.js's referenceObject docs .
affichéieren	String	'dynamesch'	Par défaut benotze mir Popper.js fir dynamesch Positionéierung. Desaktivéiere dëst mat `static`.

Notéiert wann boundaryop all Wäert anescht wéi gesat 'scrollParent'gëtt, gëtt de Stil position: staticop de .dropdownContainer applizéiert.

Methoden

Method	Beschreiwung
`$().dropdown('toggle')`	Wiesselt den Dropdown-Menü vun enger bestëmmter Navbar oder Tabbed Navigatioun.
`$().dropdown('update')`	Aktualiséiert d'Positioun vun engem Element dropdown.
`$().dropdown('dispose')`	Zerstéiert den Dropdown vun engem Element.

Evenementer

All Dropdown-Evenementer ginn op d' .dropdown-menuElteren-Element gebrannt an hunn e relatedTargetBesëtz, deem säi Wäert den Toggling-Ankerelement ass. hide.bs.dropdownan hidden.bs.dropdownEvenementer hunn eng clickEventPropriétéit (nëmmen wann d'Original Event Typ ass click) déi enthält en Event Objet fir de Klick Event.

Event	Beschreiwung
`show.bs.dropdown`	Dëst Event brennt direkt wann d'Show Instanz Method genannt gëtt.
`shown.bs.dropdown`	Dëst Evenement gëtt ofgeléist wann den Dropdown fir de Benotzer siichtbar gemaach gouf (waart op CSS Iwwergäng, fir ze kompletéieren).
`hide.bs.dropdown`	Dëst Evenement gëtt direkt ausgeléist wann d'Hide Instanz Method genannt gouf.
`hidden.bs.dropdown`	Dëst Evenement gëtt ofgeléist wann den Dropdown fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng, fir ze kompletéieren).

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

Dropdowns

Iwwersiicht

Accessibilitéit

Beispiller

Single Knäppchen

Split Knäppchen

Gréisst

Richtungen

Dropup

Dropright

Dropleft

Menu Elementer

Aktiv

Behënnert

Menu Ausrichtung

Menu Inhalt

Header

Dividers

Text

Formen

Benotzung

Via daten Attributer

Iwwer JavaScript

`data-toggle="dropdown"`nach néideg

Optiounen

Methoden

Evenementer

Dropdowns

Iwwersiicht

Accessibilitéit

Beispiller

Single Knäppchen

Split Knäppchen

Gréisst

Richtungen

Dropup

Dropright

Dropleft

Menu Elementer

Aktiv

Behënnert

Menu Ausrichtung

Menu Inhalt

Header

Dropdown Header

Dividers

Text

Formen

Dropdown Optiounen

Benotzung

Via daten Attributer

Iwwer JavaScript

data-toggle="dropdown"nach néideg

Optiounen

Methoden

Evenementer

`data-toggle="dropdown"`nach néideg