Преминете към основното съдържание Преминете към навигацията с документи
in English

падащи менюта

Превключете контекстуалните наслагвания за показване на списъци с връзки и други с плъгина за падащо меню Bootstrap.

На тази страница

Преглед

Падащите менюта са превключващи, контекстуални наслагвания за показване на списъци с връзки и други. Те са направени интерактивни с включената приставка за JavaScript с падащо меню Bootstrap. Те се превключват чрез щракване, а не чрез задържане на мишката; това е умишлено дизайнерско решение .

Падащите менюта са изградени върху библиотека на трета страна, Popper , която осигурява динамично позициониране и откриване на прозорци. Не забравяйте да включите popper.min.js преди JavaScript на Bootstrap или използвайте bootstrap.bundle.min.js/ bootstrap.bundle.js, който съдържа Popper. Popper не се използва за позициониране на падащи менюта в ленти за навигация, въпреки че не е необходимо динамично позициониране.

Достъпност

Стандартът WAI ARIA дефинира действителна role="menu"джаджа , но това е специфично за подобни на приложения менюта, които задействат действия или функции. Менютата ARIA могат да съдържат само елементи от менюто, елементи от менюто с квадратчета за отметка, елементи от менюто с радио бутони, групи радио бутони и подменюта.

Падащите менюта на Bootstrap, от друга страна, са проектирани да бъдат общи и приложими към различни ситуации и структури за маркиране. Например, възможно е да създадете падащи менюта, които съдържат допълнителни входове и контроли на формуляри, като полета за търсене или формуляри за влизане. Поради тази причина Bootstrap не очаква (нито добавя автоматично) нито един от атрибутите roleи , необходими за истинските ARIA менюта. Авторите ще трябва сами да включат тези по-специфични атрибути.aria-

Въпреки това, Bootstrap добавя вградена поддръжка за повечето стандартни взаимодействия с менюто на клавиатурата, като например възможнос��та за придвижване през отделни .dropdown-itemелементи с помощта на клавишите със стрелки и затваряне на менюто с ESCклавиша.

Примери

Обвийте превключвателя на падащото меню (вашият бутон или връзка) и падащото меню в .dropdown, или друг елемент, който декларира position: relative;. Падащите менюта могат да се задействат от <a>или <button>елементи, за да отговарят по-добре на вашите потенциални нужди. Показаните тук примери използват семантични <ul>елементи, където е подходящо, но се поддържа персонализирано маркиране.

Единичен бутон

Всеки единичен .btnможе да се превърне в падащо превключване с някои промени в маркирането. Ето как можете да ги накарате да работят с един от двата <button>елемента:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>елементи:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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. Не са необходими промени в падащите елементи.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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>

И поставянето му за използване в навигационна лента:

<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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ще се появи от дясната страна.

Спадне до

Задействайте падащи менюта над елементите чрез добавяне .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>

Dropright

Задействайте падащи менюта отдясно на елементите чрез добавяне .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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

Задействайте падащи менюта отляво на елементите чрез добавяне .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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Можете да използвате <a>или <button>елементи като падащи елементи.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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 или текстови помощни програми.

<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за текущия елемент в набор.

<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към елементи в падащото меню, за да ги оформите като деактивирани .

<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, освен когато се съдържат в навигационна лента. 
<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.

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

<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 не се използва в навигационните ленти.

Опции за подравняване

Като вземем повечето от опциите, показани по-горе, ето малка демонстрация на кухненска мивка с различни опции за подравняване на падащото меню на едно място.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

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

Заглавки

Добавете заглавка, за да етикетирате секции от действия във всяко падащо меню.

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

Разделители

Разделете групи от свързани елементи от менюто с разделител.

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

Форми

Поставете формуляр в падащо меню или го направете в падащо меню и използвайте помощни програми за марж или подложка , за да му дадете необходимото отрицателно пр��странство.

Нов тук? Регистрирай се Забравена парола? 
<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>
<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>

Използвайте data-bs-offsetили data-bs-reference, за да промените местоположението на падащото меню.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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опцията, за да промените това поведение на падащото меню.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

дързък

Променливи

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

$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:             rgba($black, .15);
$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:           $dropdown-padding-y $dropdown-item-padding-x;

Променливи за тъмното падащо меню :

$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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Чрез JavaScript

Извикайте падащите менюта чрез JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"все още се изисква

Независимо дали извиквате своето падащо меню чрез JavaScript или вместо това използвате data-api, data-bs-toggle="dropdown"винаги се изисква да присъства в задействащия елемент на падащото меню.

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-bs-, както в data-bs-offset="". Уверете се, че сте променили типа case на името на опцията от camelCase на kebab-case, когато предавате опциите чрез атрибути на данни. Например, вместо да използвате data-bs-autoClose="false", използвайте data-bs-auto-close="false".

Име Тип По подразбиране Описание
boundary низ | елемент 'clippingParents' Граница на ограничението за препълване на падащото меню (отнася се само за модификатора на PrevenOverflow на Popper). По подразбиране той е 'clippingParents'и може да приеме препратка към HTMLElement (само чрез JavaScript). За повече информация вижте документите на Popper's detectOverflow .
reference низ | елемент | обект 'toggle' Референтен елемент от падащото меню. Приема стойностите на 'toggle', 'parent', препратка към HTMLElement или обект, предоставящ getBoundingClientRect. За повече информация вижте документите за конструктор на Popper и документите за виртуални елементи .
display низ 'dynamic' По подразбиране използваме Popper за динамично позициониране. Деактивирайте това с static.
offset масив | низ | функция [0, 2]

Отместване на падащото меню спрямо неговата цел. Можете да подадете низ в атрибути на данни със стойности, разделени със запетая, като:data-bs-offset="10,20"

Когато функция се използва за определяне на отместването, тя се извиква с обект, съдържащ разположението на popper, препратката и popper rects като първи аргумент. Задействащият елемент DOM възел се предава като втори аргумент. Функцията трябва да върне масив с две числа: .[skidding, distance]

За повече информация вижте офсетните документи на Popper .
autoClose булево | низ true

Конфигурирайте поведението на автоматично затваряне на падащото меню:

  • true- падащото меню ще бъде затворено чрез щракване извън или вътре в падащото меню.
  • false- падащото меню ще бъде затворено чрез щракване върху бутона за превключване и ръчно извикване на метод hideили . toggle(Също така няма да се затвори чрез натискане на escклавиш)
  • 'inside'- падащото меню ще бъде затворено (само) чрез щракване вътре в падащото меню.
  • 'outside'- падащото меню ще бъде затворено (само) чрез щракване извън падащото меню.
popperConfig нула | обект | функция null

За да промените конфигурацията на Popper по подразбиране на Bootstrap, вижте конфигурацията на Popper .

Когато се използва функция за създаване на конфигурацията на Popper, тя се извиква с обект, който съдържа конфигурацията на Popper по подразбиране на Bootstrap. Помага ви да използвате и обедините настройките по подразбиране с вашата собствена конфигурация. Функцията трябва да върне конфигурационен обект за Popper.

Използване на функция сpopperConfig

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

Методи

Метод Описание
toggle Превключва падащото меню на дадена навигационна лента или навигация с раздели.
show Показва падащото меню на дадена навигационна лента или навигация с раздели.
hide Скрива падащото меню на дадена навигационна лента или навигация с раздели.
update Актуализира позицията на падащото меню на елемент.
dispose Унищожава падащото меню на елемент. (Премахва съхранените данни в DOM елемента)
getInstance Статичен метод, който ви позволява да получите падащото меню, свързано с DOM елемент, можете да го използвате по следния начин:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Статичен метод, който връща падащ екземпляр, свързан с DOM елемент, или създава нов, в случай че не е инициализиран. Можете да го използвате по следния начин:bootstrap.Dropdown.getOrCreateInstance(element)

събития

Всички падащи събития се задействат при превключващия елемент и след това се издигат нагоре. Така че можете също да добавите слушатели на събития към .dropdown-menuродителския елемент. hide.bs.dropdownи hidden.bs.dropdownсъбитията имат clickEventсвойство (само когато оригиналният тип събитие е click), което съдържа обект на събитие за събитието кликване.

Метод Описание
show.bs.dropdown Задейства се незабавно, когато се извика методът за показване на екземпляр.
shown.bs.dropdown Задейства се, когато падащото меню е направено видимо за потребителя и CSS преходите са завършени.
hide.bs.dropdown Задейства се незабавно, когато се извика методът на скрития екземпляр.
hidden.bs.dropdown Задейства се, когато падащото меню свърши да бъде скрито от потребителя и CSS преходите са завършени. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})