דראָפּדאָוונס

טאַגאַל קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון פֿאַרבינדונגען און מער מיט די באָאָטסטראַפּ דראָפּדאָוון פּלוגין.

אויף דעם בלאַט

איבערבליק

דראָפּדאָוונס זענען טאַגאַלאַבאַל, קאָנטעקסטואַל אָוווערלייז פֿאַר ווייַז רשימות פון לינקס און מער. זיי זענען ינטעראַקטיוו מיט די אַרייַנגערעכנט Bootstrap דראָפּדאָוון דזשאַוואַסקריפּט פּלוגין. זיי זענען טאַגאַלד דורך קליקינג, נישט דורך כאַווערינג; דאָס איז אַ ינטענשאַנאַל פּלאַן באַשלוס .

דראָפּדאָוונס זענען געבויט אויף אַ דריט טיילווייַז ביבליאָטעק, פּאָפּער , וואָס גיט דינאַמיש פּאַזישאַנינג און וויופּאָרט דיטעקשאַן. זייט זיכער צו אַרייַננעמען popper.min.js איידער Bootstrap ס דזשאַוואַסקריפּט אָדער נוצן bootstrap.bundle.min.js/ bootstrap.bundle.jsוואָס כּולל פּאָפּער. פּאָפּער איז נישט געניצט צו שטעלן דראָפּדאָוונס אין נאַוובאַרס, כאָטש דינאַמיש פּאַזישאַנינג איז נישט פארלאנגט.

אַקסעסאַביליטי

די WAI ARIA נאָרמאַל דיפיינז אַ פאַקטיש role="menu"ווידזשיט , אָבער דאָס איז ספּעציפיש פֿאַר אַפּלאַקיישאַן-ווי מעניוז וואָס צינגל אַקשאַנז אָדער פאַנגקשאַנז. ARIA מעניוז קענען בלויז אַנטהאַלטן מעניו זאכן, טשעקקבאָקס מעניו זאכן, ראַדיאָ קנעפּל מעניו זאכן, ראַדיאָ קנעפּל גרופּעס און סאַב-מעניוז.

די דראָפּדאָוונס פון Bootstrap, אויף די אנדערע האַנט, זענען דיזיינד צו זיין דזשאַנעריק און אָנווענדלעך צו אַ פאַרשיידנקייַט פון סיטואַטיאָנס און מאַרקאַפּ סטראַקטשערז. פֿאַר בייַשפּיל, עס איז מעגלעך צו שאַפֿן דראָפּדאָוונס וואָס אַנטהאַלטן נאָך ינפּוץ און פאָרעם קאָנטראָלס, אַזאַ ווי זוכן פעלדער אָדער לאָגין פארמען. פֿאַר דעם סיבה, Bootstrap קען נישט דערוואַרטן (און ניט אויטאָמאַטיש לייגן) קיין פון די roleאון aria-אַטריביוץ פארלאנגט פֿאַר אמת ARIA מעניוז. מחברים וועלן האָבן צו אַרייַננעמען די מער ספּעציפיש אַטריביוץ זיך.

אָבער, Bootstrap לייגט אַ געבויט-אין שטיצן פֿאַר רובֿ נאָרמאַל קלאַוויאַטור מעניו ינטעראַקשאַנז, אַזאַ ווי די פיייקייט צו מאַך דורך יחיד .dropdown-itemעלעמענטן ניצן די לויפֿער שליסלען און פאַרמאַכן די מעניו מיט די ESCשליסל.

ביישפילן

ייַנוויקלען די טאַגאַל פון די דראָפּדאָוון (דיין קנעפּל אָדער לינק) און די דראָפּדאָוון מעניו אין .dropdown, אָדער אן אנדער עלעמענט וואָס דערקלערט position: relative;. דראָפּדאָוונס קענען זיין טריגערד פֿון <a>אָדער <button>עלעמענטן צו בעסער פּאַסיק דיין פּאָטענציעל באדערפענישן. די ביישפילן געוויזן דאָ נוצן סעמאַנטיק <ul>עלעמענטן ווו צונעמען, אָבער מנהג מאַרקאַפּ איז געשטיצט.

איין קנעפּל

יעדער איינער .btnקענען זיין פארוואנדלען אין אַ דראָפּדאָוון טאַגאַל מיט עטלעכע מאַרקאַפּ ענדערונגען. דאָ ס ווי איר קענען שטעלן זיי צו אַרבעטן מיט יעדער <button>עלעמענטן:

HTML

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

און מיט <a>עלעמענטן:

HTML

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

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

דער בעסטער טייל איז אַז איר קענען טאָן דאָס מיט קיין וואַריאַנט פון קנעפּלעך:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

סייזינג

קנעפּל דראָפּדאָוונס אַרבעט מיט קנעפּלעך פון אַלע סיזעס, אַרייַנגערעכנט פעליקייַט און שפּאַלטן דראָפּדאָוון קנעפּלעך.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

טונקל דראָפּדאָוונס

אַפּט אין דאַרקער דראָפּדאָוונס צו גלייַכן אַ טונקל נאַוובאַר אָדער מנהג סטיל דורך אַדינג .dropdown-menu-darkאַ יגזיסטינג .dropdown-menu. קיין ענדערונגען זענען פארלאנגט צו די דראָפּדאָוון זאכן.

HTML

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

און שטעלן עס צו נוצן אין אַ נאַוובאַר:

HTML

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

אינסטרוקציעס

RTL

אינסטרוקציעס זענען שפּיגל ווען איר נוצן Bootstrap אין RTL, טייַטש .dropstartוועט זיין געוויזן אויף די רעכט זייַט.

סענטערד

מאַכן די דראָפּדאָוון מעניו סענטערד אונטער די טאַגאַל מיט .dropdown-centerדי פאָטער עלעמענט.

HTML

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

דראָפּופּ

צינגל דראָפּדאָוון מעניוז אויבן עלעמענטן דורך אַדינג .dropupצו די פאָטער עלעמענט.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

דראָפּופּ סענטערד

מאַכן די דראָפּופּ מעניו סענטערד אויבן די טאַגאַל מיט .dropup-centerאויף די פאָטער עלעמענט.

HTML

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

דראָפּענד

צינגל דראָפּדאָוון מעניוז אין די רעכט פון די עלעמענטן דורך אַדינג .dropendצו די פאָטער עלעמענט.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

דראָפּסטאַרט

צינגל דראָפּדאָוון מעניוז אין די לינקס פון די עלעמענטן דורך אַדינג .dropstartצו די פאָטער עלעמענט.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

איר קענען נוצן <a>אָדער <button>עלעמענטן ווי דראָפּדאָוון זאכן.

HTML

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

איר קענען אויך שאַפֿן ניט-ינטעראַקטיוו דראָפּדאָוון זאכן מיט .dropdown-item-text. פילן פריי צו סטיל ווייַטער מיט מנהג CSS אָדער טעקסט יוטילאַטיז.

HTML

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

אַקטיוו

לייג .activeצו זאכן אין די דראָפּדאָוון צו סטיל זיי ווי אַקטיוו . צו קאַנוויי די אַקטיוו שטאַט צו אַסיסטיוו טעקנאַלאַדזשיז, נוצן די aria-currentאַטריביוט - ניצן די pageווערט פֿאַר דעם קראַנט בלאַט, אָדער trueפֿאַר די קראַנט נומער אין אַ גאַנג.

HTML

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

פאַרקריפּלט

לייג .disabledצו זאכן אין די דראָפּדאָוון צו סטיל זיי ווי פאַרקריפּלט .

HTML

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

דורך פעליקייַט, אַ דראָפּדאָוון מעניו איז אויטאָמאַטיש פּאַזישאַנד 100% פון די שפּיץ און צוזאמען די לינקס זייַט פון זיין פאָטער. איר קענען טוישן דעם מיט די דירעקטיאָנאַל .drop*קלאסן, אָבער איר קענען אויך קאָנטראָלירן זיי מיט נאָך מאָדיפיער קלאסן.

לייג .dropdown-menu-endצו אַ .dropdown-menuרעכט ייַנרייען די דראָפּדאָוון מעניו. אינסטרוקציעס זענען שפּיגל ווען איר נוצן Bootstrap אין RTL, וואָס .dropdown-menu-endוועט זיין געוויזן אויף די לינקס זייַט.

קאָפּ אַרויף! דראָפּדאָוונס זענען פּאַזישאַנד דאַנק צו פּאָפּער אַחוץ ווען זיי זענען קאַנטיינד אין אַ נאַוובאַר.

HTML

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

אָפּרופיק אַליינמאַנט

אויב איר ווילן צו נוצן אָפּרופיק אַליינמאַנט, דיסייבאַל דינאַמיש פּאַזישאַנינג דורך אַדינג די data-bs-display="static"אַטריביוט און נוצן די אָפּרופיק ווערייישאַן קלאסן.

צו ייַנרייען רעכט די דראָפּדאָוון מעניו מיט די געגעבן ברייקפּוינט אָדער גרעסער, לייגן .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

HTML

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

צו ייַנרייען לינקס די דראָפּדאָוון מעניו מיט די געגעבן ברייקפּוינט אָדער גרעסער, לייגן .dropdown-menu-endאון .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

HTML

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

באַמערקונג אַז איר טאָן ניט דאַרפֿן צו לייגן אַ data-bs-display="static"אַטריביוט צו דראָפּדאָוון קנעפּלעך אין נאַוובאַרס, ווייַל פּאָפּער איז נישט געניצט אין נאַוובאַרס.

אַליינמאַנט אָפּציעס

גענומען רובֿ פון די אָפּציעס געוויזן אויבן, דאָ איז אַ קליין קיך זינקען דעמאָ פון פאַרשידן דראָפּדאָוון אַליינמאַנט אָפּציעס אין איין אָרט.

HTML

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

העאַדערס

לייג אַ כעדער צו לייבלינג סעקשאַנז פון אַקשאַנז אין קיין דראָפּדאָוון מעניו.

HTML

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

דיווידערס

באַזונדער גרופּעס פון פֿאַרבונדענע מעניו זאכן מיט אַ דיווידער.

HTML

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

טעקסט

שטעלן קיין פריי פאָרעם טעקסט אין אַ דראָפּדאָוון מעניו מיט טעקסט און נוצן ספּייסינג יוטילאַטיז . באַמערקונג אַז איר וועט מסתּמא דאַרפֿן נאָך סייזינג סטיילז צו באַגרענעצן די מעניו ברייט.

HTML

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

Forms

שטעלן אַ פאָרעם אין אַ דראָפּדאָוון מעניו, אָדער מאַכן עס אין אַ דראָפּדאָוון מעניו, און נוצן גרענעץ אָדער וואַטן יוטילאַטיז צו געבן עס די נעגאַטיוו פּלאַץ איר דאַרפֿן.

HTML

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <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>

HTML

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <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>
</div>

ניצן data-bs-offsetאָדער data-bs-referenceצו טוישן דעם אָרט פון די דראָפּדאָוון.

HTML

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

אַוטאָ נאָענט נאַטור

דורך פעליקייַט, די דראָפּדאָוון מעניו איז פֿאַרמאַכט ווען קליקינג ין אָדער אַרויס די דראָפּדאָוון מעניו. איר קענען נוצן די autoCloseאָפּציע צו טוישן דעם נאַטור פון די דראָפּדאָוון.

HTML

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, דראָפּדאָוונס איצט נוצן היגע CSS וועריאַבאַלז .dropdown-menuפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

קוסטאָמיזאַטיאָן דורך CSS וועריאַבאַלז קענען זיין געזען אין די .dropdown-menu-darkקלאַס ווו מיר אָווועררייד ספּעציפיש וואַלועס אָן אַדינג דופּליקאַט CSS סעלעקטאָרס.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

סאָס וועריאַבאַלז

וועריאַבאַלז פֿאַר אַלע דראָפּדאָוונס:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

וועריאַבאַלז פֿאַר די טונקל דראָפּדאָוון :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

וועריאַבאַלז פֿאַר די CSS-באזירט קאַרעץ וואָס אָנווייַזן די ינטעראַקטיוואַטי פון אַ דראָפּדאָוון:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

מיקסינס

מיקסינס זענען געניצט צו דזשענערייט די CSS-באזירט קאַרעץ און קענען זיין געפֿונען אין scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

באַניץ

דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, די דראָפּדאָוון פּלוגין טאַגאַליז פאַרבאָרגן אינהאַלט (דראָפּדאָוון מעניוז) דורך טאַגאַלינג די .showקלאַס אויף דער פאָטער .dropdown-menu. די data-bs-toggle="dropdown"אַטריביוט איז רילייד אויף פֿאַר קלאָוזינג דראָפּדאָוון מעניוז אויף אַ אַפּלאַקיישאַן מדרגה, אַזוי עס איז אַ גוטע געדאַנק צו שטענדיק נוצן עס.

אויף פאַרבינדן-ענייבאַלד דעוויסעס, עפן אַ דראָפּדאָוון מוסיף ליידיק mouseoverהאַנדלערס צו די באַלדיק קינדער פון די <body>עלעמענט. דעם אַדמיטאַדלי מיעס כאַק איז נייטיק צו אַרבעטן אַרום אַ קנאַפּ אין יאָס 'עווענט דעלאַגיישאַן , וואָס אַנדערש וואָלט פאַרמייַדן אַ צאַפּן ערגעץ אַרויס פון די דראָפּדאָוון פון טריגערינג די קאָד וואָס קלאָוזיז די דראָפּדאָוון. אַמאָל די דראָפּדאָוון איז פארמאכט, די נאָך ליידיק mouseoverהאַנדלערס זענען אַוועקגענומען.

דורך דאַטן אַטריביוץ

לייג data-bs-toggle="dropdown"צו אַ לינק אָדער קנעפּל צו באַשטימען אַ דראָפּדאָוון.

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

דורך דזשאַוואַסקריפּט

רופן די דראָפּדאָוונס דורך דזשאַוואַסקריפּט:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`נאָך פארלאנגט

צי איר רופן דיין דראָפּדאָוון דורך דזשאַוואַסקריפּט אָדער אַנשטאָט ניצן די דאַטן-אַפּי, עס data-bs-toggle="dropdown"איז שטענדיק פארלאנגט צו זיין פאָרשטעלן אויף די צינגל עלעמענט פון די דראָפּדאָוון.

אָפּציעס

ווי אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט, איר קענען לייגן אַן אָפּציע נאָמען צו data-bs-, ווי אין data-bs-animation="{value}". מאַכן זיכער צו טוישן די פאַל טיפּ פון די אָפּציע נאָמען פון " camelCase " צו " קעבאַב פאַל " ווען איר פאָרן די אָפּציעס דורך דאַטן אַטריביוץ. פֿאַר בייַשפּיל, נוצן data-bs-custom-class="beautifier"אַנשטאָט פון data-bs-customClass="beautifier".

זינט Bootstrap 5.2.0, אַלע קאַמפּאָונאַנץ שטיצן אַן יקספּערמענאַל רעזערווירט דאַטן אַטריביוט data-bs-configוואָס קענען זיין אַ פּשוט קאָמפּאָנענט קאַנפיגיעריישאַן ווי אַ JSON שטריקל. ווען אַן עלעמענט האט data-bs-config='{"delay":0, "title":123}'און data-bs-title="456"אַטריביוץ, די לעצט titleווערט וועט זיין 456און די באַזונדער דאַטן אַטריביוץ וועט אָווועררייד וואַלועס געגעבן אויף data-bs-config. אין אַדישאַן, די יגזיסטינג דאַטן אַטריביוץ זענען ביכולת צו הויז JSON וואַלועס ווי data-bs-delay='{"show":0,"hide":150}'.

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
`autoClose`	בוליאַן, שטריקל	`true`	קאַנפיגיער די אַוטאָ נאָענט נאַטור פון די דראָפּדאָוון: `true`- די דראָפּדאָוון וועט זיין פארמאכט דורך געבן אַ קליק אַרויס אָדער ין די דראָפּדאָוון מעניו. `false`- די דראָפּדאָוון וועט זיין פארמאכט דורך געבן אַ קליק דעם טאַגאַל קנעפּל און מאַניואַלי רופן `hide`אָדער `toggle`אופֿן. (אויך וועט ניט זיין פארמאכט דורך דרינגלעך `esc`שליסל) `'inside'`- די דראָפּדאָוון וועט זיין פארמאכט (בלויז) דורך געבן אַ קליק אין די דראָפּדאָוון מעניו. `'outside'`- די דראָפּדאָוון וועט זיין פארמאכט (בלויז) דורך געבן אַ קליק אַרויס די דראָפּדאָוון מעניו. באַמערקונג: די דראָפּדאָוון קענען שטענדיק זיין פארמאכט מיט די `ESC`שליסל.
`boundary`	שטריקל, עלעמענט	`'clippingParents'`	איבערפלאָו קאַנסטריינט גרענעץ פון די דראָפּדאָוון מעניו (אַפּלייז בלויז צו פּאָפּער ס פּרעווענטאָווערפלאָוו מאָדיפיער). דורך פעליקייַט עס ס `clippingParents`און קענען אָננעמען אַן HTMLElement דערמאָנען (בלויז דורך דזשאַוואַסקריפּט). פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו Popper's detectOverflow docs .
`display`	שטריקל	`'dynamic'`	דורך פעליקייַט, מיר נוצן פּאָפּער פֿאַר דינאַמיש פּאַזישאַנינג. דיסייבאַל דעם מיט `static`.
`offset`	מענגע, שטריקל, פֿונקציע	`[0, 2]`	אָפסעט פון די דראָפּדאָוון קאָרעוו צו זיין ציל. איר קענען פאָרן אַ שטריקל אין דאַטן אַטריביוץ מיט קאָמע אפגעשיידט וואַלועס ווי: `data-bs-offset="10,20"`. ווען אַ פֿונקציע איז גענוצט צו באַשטימען דעם פאָטאָ, עס איז גערופן מיט אַ כייפעץ מיט די פּאָפּער פּלייסמאַנט, די רעפֿערענץ, און פּאָפּער רעקץ ווי זייַן ערשטער אַרגומענט. די טריגערינג עלעמענט DOM נאָדע איז דורכגעגאנגען ווי די רגע אַרגומענט. די פֿונקציע מוזן צוריקקומען אַ מענגע מיט צוויי נומערן: סקיידינג , ווייַטקייט . פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס פאָטאָ דאָקומענטן .
`popperConfig`	נאַל, כייפעץ, פֿונקציע	`null`	צו טוישן באָאָטסטראַפּ ס פעליקייַט פּאָפּער קאַנפיגיעריישאַן, זען פּאָפּער ס קאַנפיגיעריישאַן . ווען אַ פֿונקציע איז גענוצט צו שאַפֿן די פּאָפּער קאַנפיגיעריישאַן, עס איז גערופן מיט אַ כייפעץ וואָס כּולל די באָאָטסטראַפּ ס פעליקייַט פּאָפּער קאַנפיגיעריישאַן. עס העלפּס איר נוצן און צונויפגיסן די פעליקייַט מיט דיין אייגענע קאַנפיגיעריישאַן. די פֿונקציע מוזן צוריקקומען אַ קאַנפיגיעריישאַן כייפעץ פֿאַר פּאָפּער.
`reference`	שטריקל, עלעמענט, כייפעץ	`'toggle'`	רעפערענץ עלעמענט פון די דראָפּדאָוון מעניו. אַקסעפּץ די וואַלועס פון `'toggle'`, `'parent'`, אַן HTMLElement רעפֿערענץ אָדער אַ כייפעץ פּראַוויידינג `getBoundingClientRect`. פֿאַר מער אינפֿאָרמאַציע אָפּשיקן צו פּאָפּער ס קאַנסטראַקטער דאָקומענטן און ווירטועל עלעמענט דאָקומענטן .

ניצן פונקציע מיט`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

מעטהאָדס

מעטאָ��	באַשרייַבונג
`dispose`	דיסטרויז אַן עלעמענט ס דראָפּדאָוון. (רימוווז סטאָרד דאַטן אויף די DOM עלעמענט)
`getInstance`	סטאַטיק אופֿן וואָס אַלאַוז איר צו באַקומען די דראָפּדאָוון בייַשפּיל פארבונדן צו אַ DOM עלעמענט, איר קענען נוצן עס ווי דאָס: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	סטאַטיק אופֿן וואָס קערט אַ דראָפּדאָוון בייַשפּיל פֿאַרבונדן צו אַ DOM עלעמענט אָדער שאַפֿן אַ נייַע אין פאַל עס איז נישט יניטיאַלייזד. איר קענען נוצן עס ווי דאָס: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	כיידז די דראָפּדאָוון מעניו פון אַ געגעבן נאַוובאַר אָדער טאַבבעד נאַוויגאַציע.
`show`	ווייזט די דראָפּדאָוון מעניו פון אַ געגעבן נאַוובאַר אָדער טאַבבעד נאַוויגאַציע.
`toggle`	טאַגאַלס די דראָפּדאָוון מעניו פון אַ געגעבן נאַוובאַר אָדער טאַבבעד נאַוויגאַציע.
`update`	דערהייַנטיקונגען די שטעלע פון אַ עלעמענט ס דראָפּדאָוון.

געשעענישן

אַלע דראָפּדאָוון געשעענישן זענען פייערד אויף די טאַגאַלינג עלעמענט און דעמאָלט באַבאַלד אַרויף. אַזוי איר קענען אויך לייגן געשעעניש צוהערערס אויף דער .dropdown-menuפאָטער עלעמענט. hide.bs.dropdownאון hidden.bs.dropdownגעשעענישן האָבן אַ clickEventפאַרמאָג (בלויז ווען דער אָריגינעל עווענט טיפּ איז click) וואָס כּולל אַ עווענט אָבדזשעקט פֿאַר די קליק געשעעניש.

געשעעניש טיפּ	באַשרייַבונג
`hide.bs.dropdown`	פירעס מיד ווען דער `hide`בייַשפּיל אופֿן איז גערופן.
`hidden.bs.dropdown`	פייערד ווען די דראָפּדאָוון איז פאַרטיק צו זיין פאַרבאָרגן פון די באַניצער און CSS טראַנזישאַנז האָבן געענדיקט.
`show.bs.dropdown`	פירעס מיד ווען דער `show`בייַשפּיל אופֿן איז גערופן.
`shown.bs.dropdown`	פייערד ווען די דראָפּדאָוון איז קענטיק צו דער באַניצער און CSS טראַנזישאַנז האָבן געענדיקט.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

דראָפּדאָוונס

איבערבליק

אַקסעסאַביליטי

ביישפילן

איין קנעפּל

שפּאַלטן קנעפּל

סייזינג

טונקל דראָפּדאָוונס

אינסטרוקציעס

RTL

סענטערד

דראָפּופּ

דראָפּופּ סענטערד

דראָפּענד

דראָפּסטאַרט

מעניו זאכן

אַקטיוו

פאַרקריפּלט

מעניו אַליינמאַנט

אָפּרופיק אַליינמאַנט

אַליינמאַנט אָפּציעס

מעניו אינהאַלט

העאַדערס

דיווידערס

טעקסט

Forms

אַוטאָ נאָענט נאַטור

CSS

וועריאַבאַלז

סאָס וועריאַבאַלז

מיקסינס

באַניץ

דורך דאַטן אַטריביוץ

דורך דזשאַוואַסקריפּט

`data-bs-toggle="dropdown"`נאָך פארלאנגט

אָפּציעס

ניצן פונקציע מיט`popperConfig`

מעטהאָדס

געשעענישן

דראָפּדאָוונס

איבערבליק

אַקסעסאַביליטי

ביישפילן

איין קנעפּל

שפּאַלטן קנעפּל

סייזינג

טונקל דראָפּדאָוונס

אינסטרוקציעס

RTL

סענטערד

דראָפּופּ

דראָפּופּ סענטערד

דראָפּענד

דראָפּסטאַרט

מעניו זאכן

אַקטיוו

פאַרקריפּלט

מעניו אַליינמאַנט

אָפּרופיק אַליינמאַנט

אַליינמאַנט אָפּציעס

מעניו אינהאַלט

העאַדערס

דראָפּדאָוון כעדער

דיווידערס

טעקסט

Forms

דראָפּדאָוון אָפּציעס

אַוטאָ נאָענט נאַטור

CSS

וועריאַבאַלז

סאָס וועריאַבאַלז

מיקסינס

באַניץ

דורך דאַטן אַטריביוץ

דורך דזשאַוואַסקריפּט

data-bs-toggle="dropdown"נאָך פארלאנגט

אָפּציעס

ניצן פונקציע מיטpopperConfig

מעטהאָדס

געשעענישן

`data-bs-toggle="dropdown"`נאָך פארלאנגט

ניצן פונקציע מיט`popperConfig`