Паѓања

Вклучете ги контекстуалните преклопувања за прикажување списоци со врски и повеќе со паѓачкиот приклучок Bootstrap.

На оваа страница

Преглед

Паѓачките мени се преклопни, контекстуални преклопувања за прикажување списоци со врски и многу повеќе. Тие се интерактивни со вклучениот приклучок за JavaScript за паѓање Bootstrap. Тие се префрлаат со кликнување, а не со лебдење; ова е намерна одлука за дизајн .

Паѓачките мени се изградени на библиотека од трета страна, Popper , која обезбедува динамично позиционирање и откривање на приказот на погледот. Погрижете се да вклучите popper.min.js пред JavaScript на Bootstrap или користете bootstrap.bundle.min.js/ bootstrap.bundle.jsшто содржи Popper. Попер не се користи за позиционирање на паѓачките мени во навигаторите, иако не е потребно динамично позиционирање.

Пристапност

Стандардот 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

Активирајте ги паѓачките менија лево од елементите со додавање .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во a .dropdown-menuнадесно порамни го паѓачкото мени. Насоките се пресликуваат кога користите Bootstrap во RTL, што значи дека .dropdown-menu-endќе се појави на левата страна.

Главите горе! Спуштањата се позиционирани благодарение на Popper освен кога се содржани во лентата за навигација.

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"атрибут на паѓачките копчиња во лентите за навигација, бидејќи Popper не се користи во лентите за навигација.

Опции за усогласување

Преземајќи ги повеќето од опциите прикажани погоре, еве демо за мал кујнски мијалник со различни опции за усогласување на паѓачкото место на едно место.

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>

Форми

Ставете го формуларот во паѓачкото мени или направете го во паѓачкото мени и користете ги алатките за маргина или полнење за да му го дадете потребниот негативен простор.

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

Променливи

Додадено во v5.2.0

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, паѓачкото мени сега користи локални CSS променливи .dropdown-menuза подобрено прилагодување во реално време. Вредностите за променливите CSS се поставени преку Sass, така што прилагодувањето на Sass сè уште е поддржано.

  --#{$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};

Sass променливи

Променливи за сите паѓачки мени:

$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;
    }
  }
}

Употреба

Преку атрибути на податоци или JavaScript, паѓачкиот приклучок ја менува скриената содржина (паѓачкото мени) со префрлање на .showкласата на родителот .dropdown-menu. На data-bs-toggle="dropdown"атрибутот се потпираме за затворање на паѓачките менија на ниво на апликација, па затоа е добра идеја секогаш да го користите.

На уредите со овозможен допир, со отворањето на паѓачкото мени се додаваат празни mouseoverуправувачи на најблиските деца на <body>елементот. Ова, секако, грдото хакирање е неопходно за да се надмине необичноста во делегирањето на настани на iOS , што инаку би спречило допир каде било надвор од паѓачкото мени да го активира кодот што го затвора паѓачкото мени. Откако ќе се затвори паѓачкото мени, овие дополнителни празни 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>

Преку JavaScript

Повикајте ги паѓачките списоци преку JavaScript:

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

`data-bs-toggle="dropdown"`сè уште се бара

Без оглед на тоа дали го повикувате паѓачкото мени преку JavaScript или наместо тоа го користите data-api, data-bs-toggle="dropdown"секогаш се бара да биде присутен на елементот за активирање на паѓачкото мени.

Опции

Бидејќи опциите може да се пренесат преку атрибути на податоци или JavaScript, можете да додадете име на опција на 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'`	Границата за ограничување на прелевање на паѓачкото мени (важи само за превентивниот модификатор на Popper за прелевање). Стандардно, тоа е `clippingParents`и може да прифати референца HTMLElement (само преку JavaScript). За повеќе информации погледнете ги Popper's detectOverflow docs .
`display`	низа	`'dynamic'`	Стандардно, ние користиме Popper за динамично позиционирање. Оневозможете го ова со `static`.
`offset`	низа, низа, функција	`[0, 2]`	Поместување на паѓачкото мени во однос на неговата цел. Може да пренесете низа во атрибути на податоци со вредности разделени со запирка како: `data-bs-offset="10,20"`. Кога функцијата се користи за определување на поместувањето, таа се повикува со објект што го содржи поставувањето на попер, референцата и попер рекциите како нејзин прв аргумент. Активирачкиот елемент DOM јазол се пренесува како втор аргумент. Функцијата мора да врати низа со два броја: лизгање , растојание . За повеќе информации погледнете ги офсет документите на Попер .
`popperConfig`	нула, објект, функција	`null`	За да ја промените стандардната конфигурација на Popper на Bootstrap, видете ја конфигурацијата на Popper . Кога функцијата се користи за креирање на Popper конфигурацијата, таа се повикува со објект што ја содржи стандардната Popper конфигурација на Bootstrap. Тоа ви помага да ги користите и споите стандардните со вашата сопствена конфигурација. Функцијата мора да врати конфигурациски објект за Popper.
`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

Центрирано

Спуштање

Центарот на паѓање

Дропенд

Dropstart

Ставки од менито

Активен

Оневозможено

Порамнување на менито

Респонзивно усогласување

Опции за усогласување

Содржина на менито

Заглавија

Разделувачи

Текст

Форми

Однесување за автоматско затворање

CSS

Променливи

Sass променливи

Мешавини

Употреба

Преку атрибути на податоци

Преку JavaScript

`data-bs-toggle="dropdown"`сè уште се бара

Опции

Користење на функцијата со`popperConfig`

Методи

Настани

Паѓања

Преглед

Пристапност

Примери

Едно копче

Копче за разделување

Димензионирање

Темни спуштања

Правци

RTL

Центрирано

Спуштање

Центарот на паѓање

Дропенд

Dropstart

Ставки од менито

Активен

Оневозможено

Порамнување на менито

Респонзивно усогласување

Опции за усогласување

Содржина на менито

Заглавија

Заглавие на паѓање

Разделувачи

Текст

Форми

Опции за паѓање

Однесување за автоматско затворање

CSS

Променливи

Sass променливи

Мешавини

Употреба

Преку атрибути на податоци

Преку JavaScript

data-bs-toggle="dropdown"сè уште се бара

Опции

Користење на функцијата соpopperConfig

Методи

Настани

`data-bs-toggle="dropdown"`сè уште се бара

Користење на функцијата со`popperConfig`