די דראָפּדאָוונס פון Bootstrap, אויף די אנדערע האַנט, זענען דיזיינד צו זיין דזשאַנעריק און אָנווענדלעך צו אַ פאַרשיידנקייַט פון סיטואַטיאָנס און מאַרקאַפּ סטראַקטשערז. פֿאַר בייַשפּיל, עס איז מעגלעך צו שאַפֿן דראָפּדאָוונס וואָס אַנטהאַלטן נאָך ינפּוץ און פאָרעם קאָנטראָלס, אַזאַ ווי זוכן פעלדער אָדער לאָגין פארמען. פֿאַר דעם סיבה, Bootstrap קען נישט דערוואַרטן (און ניט אויטאָמאַטיש לייגן) קיין פון די roleאון aria-אַטריביוץ פארלאנגט פֿאַר אמת ARIA מעניוז. מחברים וועלן האָבן צו אַרייַננעמען די מער ספּעציפיש אַטריביוץ זיך.
אָבער, Bootstrap לייגט אַ געבויט-אין שטיצן פֿאַר רובֿ נאָרמאַל קלאַוויאַטור מעניו ינטעראַקשאַנז, אַזאַ ווי די פיייקייט צו מאַך דורך יחיד .dropdown-itemעלעמענטן ניצן די לויפֿער קיז און פאַרמאַכן די מעניו מיט די ESCשליסל.
ביישפילן
ייַנוויקלען די טאַגאַל פון די דראָפּדאָוון (דיין קנעפּל אָדער לינק) און די דראָפּדאָוון מעניו אין .dropdown, אָדער אן אנדער עלעמענט וואָס דערקלערט position: relative;. דראָפּדאָוונס קענען זיין טריגערד פֿון <a>אָדער <button>עלעמענטן צו בעסער פּאַסיק דיין פּאָטענציעל באדערפענישן.
סימילאַרלי, שאַפֿן שפּאַלטן קנעפּל דראָפּדאָוונס מיט כמעט דער זעלביקער מאַרקאַפּ ווי איין קנעפּל דראָפּדאָוונס, אָבער מיט די אַדישאַן פון .dropdown-toggle-splitדי רעכט ספּייסינג אַרום די דראָפּדאָוון קאַרעט.
מיר נוצן דעם עקסטרע קלאַס צו רעדוצירן די האָריזאָנטאַל paddingאויף יעדער זייַט פון די קאַרעט מיט 25% און באַזייַטיקן די margin-leftוואָס איז צוגעגעבן פֿאַר רעגולער קנעפּל דראָפּדאָוונס. די עקסטרע ענדערונגען האַלטן די קאַרעט סענטערד אין די שפּאַלטן קנעפּל און צושטעלן אַ מער אַפּראָופּרייטלי סייזד שלאָגן געגנט ווייַטער צו די הויפּט קנעפּל.
היסטאָריש די אינהאַלט פון די דראָפּדאָוון מעניו האט צו זיין לינקס, אָבער דאָס איז ניט מער דער פאַל מיט v4. איצט איר קענען אָפּטיאָנאַללי נוצן <button>עלעמענטן אין דיין דראָפּדאָוונס אַנשטאָט פון בלויז <a>s.
איר קענען אויך שאַפֿן ניט-ינטעראַקטיוו דראָפּדאָוון זאכן מיט .dropdown-item-text. פילן פריי צו סטיל ווייַטער מיט מנהג CSS אָדער טעקסט יוטילאַטיז.
דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, די דראָפּדאָוון פּלוגין טאַגאַלז פאַרבאָרגן אינהאַלט (דראָפּדאָוון מעניוז) דורך טאַגאַלינג די .showקלאַס אויף די פאָטער רשימה נומער. די data-toggle="dropdown"אַטריביוט איז רילייד אויף פֿאַר קלאָוזינג דראָפּדאָוון מעניוז אויף אַ אַפּלאַקיישאַן מדרגה, אַזוי עס איז אַ גוטע געדאַנק צו שטענדיק נוצן עס.
On touch-enabled devices, opening a dropdown adds empty ($.noop) mouseover handlers to the immediate children of the <body> element. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation, which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty mouseover handlers are removed.
Via data attributes
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
Via JavaScript
Call the dropdowns via JavaScript:
data-toggle="dropdown" still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown’s trigger element.
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
Name
Type
Default
Description
offset
number | string | function
0
Offset of the dropdown relative to its target.
When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.
For more information refer to Popper.js's offset docs.
flip
boolean
true
Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.
boundary
string | element
'scrollParent'
Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
reference
string | element
'toggle'
Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs.
display
string
'dynamic'
By default, we use Popper.js for dynamic positioning. Disable this with static.
Note when boundary is set to any value other than 'scrollParent', the style position: static is applied to the .dropdown container.
Methods
Method
Description
$().dropdown('toggle')
Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('show')
Shows the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('hide')
Hides the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('update')
Updates the position of an element’s dropdown.
$().dropdown('dispose')
Destroys an element’s dropdown.
Events
All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element. hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original event type is click) that contains an Event Object for the click event.
Event
Description
show.bs.dropdown
This event fires immediately when the show instance method is called.
shown.bs.dropdown
דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז קענטיק צו דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
hide.bs.dropdown
דעם געשעעניש איז פייערד מיד ווען די באַהאַלטן בייַשפּיל אופֿן איז גערופן.
hidden.bs.dropdown
דער געשעעניש איז פייערד ווען די דראָפּדאָוון איז פאַרטיק צו זיין פאַרבאָרגן פון דער באַניצער (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).