Bootstrap Выпадающие меню (Dropdowns)
Эта глава посвящена выпадающим меню Bootstrap. Выпадающее меню — это переключаемое контекстное меню, которое отображает ссылки в виде списка. Это можно сделать с помощью взаимодействия с плагиномDropdown JavaScript.для реализации.
Чтобы использовать выпадающий список, просто добавьте к классу.dropdownдобавьте выпадающий список. Следующий пример демонстрирует базовый выпадающий список:
Пример
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Тема<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Интеллектуальный анализ данных</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Передача данных/Сеть</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a>
</li>
</ul>
</div>
Попробуйте »
Результат показан ниже:
Параметры
Выравнивание
Добавив.dropdown-menuкласс.pull-rightчтобы выровнять выпадающее меню по правому краю. Следующий пример демонстрирует это:
Пример
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Тема<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Интеллектуальный анализ данных</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Передача данных/Сеть</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a>
</li>
</ul>
</div>
Попробуйте »
Результат показан ниже:
Заголовок
Вы можете использовать классdropdown-headerчтобы добавить заголовок в область метки выпадающего меню. Следующий пример демонстрирует это:
Пример
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Тема<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Заголовок выпадающего меню</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Интеллектуальный анализ данных</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Передача данных/Сеть</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Заголовок выпадающего меню</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a>
</li>
</ul>
</div>
Попробуйте »
Результат показан ниже:
Другие примеры
| Класс | Описание | Пример |
|---|---|---|
| .dropdown | Укажите выпадающий список, все выпадающие списки обёрнуты в .dropdown | Попробуйте |
| .dropdown-menu | Создайте выпадающий список | Попробуйте |
| .dropdown-menu-right | Выровнять выпадающее меню по правому краю | Попробуйте |
| .dropdown-header | Добавить заголовок в выпадающее меню | Попробуйте |
| .dropup | Укажите выпадающее меню, открывающееся вверх | Попробуйте |
| .disabled | Неактивные элементы в выпадающем меню | Попробуйте |
| .divider | Разделители в выпадающем меню | Попробуйте |