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

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

Преглед

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

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

Ако изграждате нашия JavaScript от изходния код, той изискваutil.js .

Достъпност

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

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

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

Примери

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

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

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

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

И с <a>елементи:

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

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

Най-добрата част е, че можете да направите това и с всеки вариант на бутон:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Бутон за разделяне

По същия начин създайте падащи менюта с разделени бутони с практически същата маркировка като падащите менюта с един бутон, но с добавяне на .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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Оразмеряване

Падащите менюта с бутони работят с бутони с всякакви размери, включително бутони по подразбиране и разделени падащи бутони.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Упътвания

Спадне до

Задействайте падащи менюта над елементите чрез добавяне .dropupкъм родителския елемент.

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

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Задействайте падащи менюта отдясно на елементите чрез добавяне .droprightкъм родителския елемент.

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

Задействайте падащи менюта отляво на елементите чрез добавяне .dropleftкъм родителския елемент.

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

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Исторически съдържанието на падащото меню трябваше да бъде връзки, но това вече не е така с v4. Сега можете по избор да използвате <button>елементи в падащите менюта вместо само <a>s.

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

Можете също да създавате неинтерактивни падащи елементи с .dropdown-item-text. Чувствайте се свободни да стилизирате допълнително с персонализирани CSS или текстови помощни програми.

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

Активен

Добавете .activeкъм елементи в падащото меню, за да ги оформите като активни .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

хора с увреждания

Добавете .disabledкъм елементи в падащото меню, за да ги оформите като деактивирани .

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

По подразбиране падащото меню се позиционира автоматично на 100% от горната част и от лявата страна на своя родител. Добавяне .dropdown-menu-rightкъм a .dropdown-menuза подравняване на падащото меню вдясно.

Горе главата! Падащите менюта се позиционират благодарение на Popper (освен когато се съдържат в лентата за навигация).

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

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

Ако искате да използвате адаптивно подравняване, деактивирайте динамичното позициониране, като добавите data-display="static"атрибута и използвайте адаптивните вариационни класове.

За да подравните надясно падащото меню с дадената точка на прекъсване или по-голяма, добавете .dropdown-menu{-sm|-md|-lg|-xl}-right.

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

За да подравните ляво падащото меню с дадената точка на прекъсване или по-голяма, добавете .dropdown-menu-rightи .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

Имайте предвид, че не е необходимо да добавяте data-display="static"атрибут към падащите бутони в навигационните ленти, тъй като Popper не се използва в навигационните ленти.

Заглавки

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

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

Разделители

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

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

Текст

Поставете всякакъв текст в свободна форма в падащо меню с текст и използвайте помощни програми за интервали . Имайте предвид, че вероятно ще ви трябват допълнителни стилове за оразмеряване, за да ограничите ширината на менюто.

<div 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="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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-offsetили data-reference, за да промените местоположението на падащото меню.

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

Използване

Чрез атрибути на данни или JavaScript плъгинът за падащо меню превключва скритото съдържание (падащи менюта), като превключва .showкласа на родителя .dropdown-menu. На data-toggle="dropdown"атрибута се разчита за затваряне на падащи менюта на ниво приложение, така че е добра идея винаги да го използвате.

На устройства със сензорен екран отварянето на падащо меню добавя празни ( $.noop) mouseoverманипулатори към непосредствените деца на <body>елемента. Този несъмнено грозен хак е необходим, за да се заобиколи странност в делегирането на събития в iOS , което иначе би попречило на докосване някъде извън падащото меню да задейства кода, който затваря падащото меню. След като падащото меню се затвори, тези допълнителни празни mouseoverманипулатори се премахват.

Чрез атрибути на данни

Добавете data-toggle="dropdown"към връзка или бутон, за да превключите падащо меню.

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

Чрез JavaScript

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

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

`data-toggle="dropdown"`все още се изисква

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

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-offset="".

Име	Тип	По подразбиране	Описание
изместване	номер \| низ \| функция	0	Отместване на падащото меню спрямо неговата цел. Когато се използва функция за определяне на отместването, тя се извиква с обект, съдържащ данните за отместването като първи аргумент. Функцията трябва да върне обект със същата структура. Задействащият елемент DOM възел се предава като втори аргумент. За повече информация вижте офсетните документи на Popper .
флип	булево	вярно	Разрешаване на падащото меню да се обръща в случай на припокриване на референтния елемент. За повече информация вижте flip docs на Popper .
граница	низ \| елемент	'scrollParent'	Границата на ограничението за препълване на падащото меню. Приема стойностите на `'viewport'`, `'window'`, `'scrollParent'`или препратка към HTMLElement (само за JavaScript). За повече информация вижте документите на PrevenOverflow на Popper .
справка	низ \| елемент	"превключване"	Референтен елемент от падащото меню. Приема стойностите на `'toggle'`, `'parent'`или препратка към HTMLElement. За повече информация вижте референтните обектни документи на Popper .
дисплей	низ	"динамичен"	По подразбиране използваме Popper за динамично позициониране. Деактивирайте това с `static`.
popperConfig	нула \| обект	нула	За да промените конфигурацията на Popper по подразбиране на Bootstrap, вижте конфигурацията на Popper

Обърнете внимание, когато boundaryе зададена стойност, различна от 'scrollParent', стилът position: staticсе прилага към .dropdownконтейнера.

Методи

Метод	Описание
`$().dropdown('toggle')`	Превключва падащото меню на дадена навигационна лента или навигация с раздели.
`$().dropdown('show')`	Показва падащото меню на дадена навигационна лента или навигация с раздели.
`$().dropdown('hide')`	Скрива падащото меню на дадена навигационна лента или навигация с раздели.
`$().dropdown('update')`	Актуализира позицията на падащото меню на елемент.
`$().dropdown('dispose')`	Унищожава падащото меню на елемент.

събития

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

Събитие	Описание
`show.bs.dropdown`	Това събитие се задейства веднага, когато се извика методът за показване на екземпляр.
`shown.bs.dropdown`	Това събитие се задейства, когато падащото меню е направено видимо за потребителя (ще изчака CSS преходите да завършат).
`hide.bs.dropdown`	Това събитие се задейства незабавно, когато методът за скриване на екземпляра е извикан.
`hidden.bs.dropdown`	Това събитие се задейства, когато падащото меню свърши да бъде скрито от потребителя (ще изчака CSS преходите да завършат).

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

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

Преглед

Достъпност

Примери

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

Бутон за разделяне

Оразмеряване

Упътвания

Спадне до

Dropright

Dropleft

Елементи от менюто

Активен

хора с увреждания

Подравняване на менюто

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

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

Заглавки

Разделители

Текст

Форми

Използване

Чрез атрибути на данни

Чрез JavaScript

`data-toggle="dropdown"`все още се изисква

Настроики

Методи

събития

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

Преглед

Достъпност

Примери

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

Бутон за разделяне

Оразмеряване

Упътвания

Спадне до

Dropright

Dropleft

Елементи от менюто

Активен

хора с увреждания

Подравняване на менюто

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

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

Заглавки

Заглавка на падащото меню

Разделители

Текст

Форми

Опции за падащо меню

Използване

Чрез атрибути на данни

Чрез JavaScript

data-toggle="dropdown"все още се изисква

Настроики

Методи

събития

`data-toggle="dropdown"`все още се изисква