Выпадающие списки Bootstrap
Основной раскрывающийся список
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Пример
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Объяснение примера
Класс .dropdownуказывает на выпадающее меню.
Чтобы открыть выпадающее меню, используйте кнопку или ссылку с классом .dropdown-toggleи
data-toggle="dropdown"атрибутом.
Класс .caretсоздает значок стрелки вставки (), что указывает на то, что кнопка является раскрывающимся списком.
Добавьте .dropdown-menuкласс к <ul>элементу, чтобы создать раскрывающееся меню.
Выпадающий разделитель
Класс .dividerиспользуется для разделения ссылок внутри выпадающего меню тонкой горизонтальной рамкой:
Пример
<li class="divider"></li>
Выпадающий заголовок
Класс .dropdown-headerиспользуется для добавления заголовков в выпадающее меню:
Пример
<li class="dropdown-header">Dropdown header 1</li>
Отключить и активировать элементы
Выделите определенный элемент раскрывающегося списка с классом .active (добавляет синий цвет фона).
Чтобы отключить элемент в раскрывающемся меню, используйте .disabledкласс (получает светло-серый цвет текста и значок «знак запрета парковки» при наведении):
Пример
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Выпадающее положение
Чтобы выровнять раскрывающийся список по правому краю, добавьте .dropdown-menu-rightкласс к элементу с .dropdown-menu:
Пример
<ul class="dropdown-menu dropdown-menu-right">
Выпадающий
Если вы хотите, чтобы выпадающее меню расширялось вверх, а не вниз, измените элемент <div> с class="dropdown" на "dropup":
Пример
<div class="dropup">
Доступность раскрывающегося списка
Чтобы улучшить доступность для людей, использующих программы чтения с экрана , при создании раскрывающегося меню необходимо включить следующие атрибуты role:aria-*
Пример
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
Полное руководство по раскрывающемуся списку Bootstrap
Полный справочник по всем параметрам раскрывающегося списка, методам и событиям см. в нашем Справочнике раскрывающегося списка Bootstrap JS .