Основные Дропдаун
Раскрывающееся меню является переключаемой меню, которое позволяет пользователю выбрать одно значение из заранее определенного списка:
пример
<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 Класс используется для отдельных звеньев внутри выпадающего меню с тонкой горизонтальной границей:
Выпадающее Заголовок
.dropdown-header класса используется для добавления заголовков внутри выпадающего меню:
Отключить элемент
Для того, чтобы отключить элемент в выпадающем меню, используйте .disabled класс:
Выпадающее Позиция
Для выравнивания правой кнопкой в раскрывающемся списке, добавьте .dropdown-menu-right класса к элементу с .dropdown-меню:
Dropup
Если вы хотите, чтобы выпадающее меню , чтобы развернуть вверх , а не вниз, измените <div> элемент с class="dropdown" к "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> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Полное Bootstrap Dropdown Reference
Для полного ведения всех выпадающих вариантов, методов и событий, перейдите на наш Bootstrap JS Dropdown Reference .