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 класс к элементу с раскрывающееся меню:
Пример
<ul class="dropdown-menu dropdown-menu-right">
Dropup
Если вы хотите, чтобы раскрывающееся меню расширялось вверх, а не вниз, измените элемент <div> с классом = "раскрывающийся список" на "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.
