
Выпадающее меню — один из компонентов Bootstrap, использующий для своей работы JavaScript. В контейнер с классом .dropdown (или position:relative) помещается кнопка, которую будут нажимать пользователи, для отображения выпадающей части (На картинке соответствует слову «Выпадающее»). После кнопки размещается Список с классом .dropdown-menu и доп. атрибутами aria-* при необходимости.
Выпадающее меню
Например,
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Выпадающее
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Первый</a></li>
<li><a href="#">Второй</a></li>
<li><a href="#">Третий пункт</a></li>
</ul>
</div>
Если нужно, чтобы меню выкидывало пункты вверх, надо заменить класс .dropdown на .dropup.
Меню может содержать разделители и неактивные пункты, которые будут играть роль заголовков или пояснений:
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li role="separator" class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Неактивные пункты выпадающего меню помечаются классом .disabled. Примечание: класс добавляется элементу li.