Bootstrap4 Выпадающее меню
Выпадающее меню Bootstrap 4 — это очень распространённый UI-компонент, используемый для отображения ряда кликабельных опций или пунктов меню.
Выпадающие меню Bootstrap4 обычно используются в панелях навигации, формах или других интерактивных интерфейсах.
Базовая структура
Ядром выпадающего меню Bootstrap 4 является класс.dropdown, который может содержать другие элементы (например, кнопки, ссылки или текст) для запуска отображения меню. Сами пункты меню определяются с помощью класса .dropdown-menu, а конкретные опции используют класс .dropdown-item.
Выпадающие меню Bootstrap4 зависят отpopper.min.js。
Описание класса стиля:
| Имя класса | Описание | Пример использования |
|---|
.dropdown | Класс-контейнер для выпадающего меню, оборачивающий кнопку и меню. | <div class="dropdown">...</div> |
.dropdown-toggle | Используется для создания кнопки, которая запускает выпадающее меню, обычно в сочетании с.btnclass. | <button class="btn btn-secondary dropdown-toggle">...</button> |
data-toggle="dropdown" | Заставляет кнопку или ссылку запускать показ и скрытие выпадающего меню. | <button data-toggle="dropdown">Dropdown button</button> |
.dropdown-menu | Класс-контейнер для выпадающего меню, содержащий пункты меню. | <div class="dropdown-menu">...</div> |
.dropdown-item | Пункт меню в выпадающем меню, обычно ссылка. | <a class="dropdown-item" href="../index.html">Item</a> |
aria-haspopup="true" | Добавляет поддержку доступности, указывая, что этот элемент имеет всплывающее меню. | <button aria-haspopup="true">Dropdown</button> |
aria-expanded="false" | Добавляет поддержку доступности, указывая текущее состояние меню (развёрнуто или свёрнуто). | <button aria-expanded="false">Dropdown</button> |
Выпадающее меню можно переключать, и оно является контекстным меню, которое отображает ссылки в виде списка.
Пример
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Кнопка выпадающего меню
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Ссылка 1</a>
<a class="dropdown-item" href="#">Ссылка 2</a>
<a class="dropdown-item" href="#">Ссылка 3</a>
</div>
</div>
Попробуйте сами »
Разбор примера
.dropdownКласс используется для указания выпадающего меню.
Мы можем использовать кнопку или ссылку, чтобы открыть выпадающее меню. Кнопка или ссылка должна добавить.dropdown-toggleиdata-toggle="dropdown"атрибут.
<div>Добавьте к элементу.dropdown-menuкласс, чтобы настроить выпадающее меню, затем добавьте.dropdown-itemкласс к опциям в выпадающем меню.
Мы также можем использовать его в<a>теге:
Пример
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Ссылка выпадающего меню
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то ещё здесь</a>
</div>
</div>
Попробуйте сами »
Разделитель в выпадающем меню
.dropdown-dividerКласс используется для создания горизонтального разделителя в выпадающем меню:
Заголовок в выпадающем меню
.dropdown-headerКласс используется для добавления заголовка в выпадающем меню:
Пример
<div class="dropdown-header">Заголовок выпадающего меню 1</div>
Попробуйте сами »
Активные и отключенные элементы в выпадающем меню
Класс .active подсветит опцию в выпадающем меню (добавив синий фон).
Если вы хотите отключить опцию в выпадающем меню, можно использовать класс.disabled.
Пример
<a class="dropdown-item active" href="#">Активный</a>
<a class="dropdown-item disabled" href="#">Отключенный</a>
Попробуйте сами »
Позиционирование выпадающего меню
Если мы хотим, чтобы выпадающее меню было выровнено по правому краю, мы можем добавить к элементу класс .dropdown-menu, а затем.dropdown-menu-rightкласс.
Настройки направления появления выпадающего меню
По умолчанию выпадающее меню появляется вниз, но мы также можем задать другие направления.
Указание выпадающего меню, которое появляется справа
Если вы хотите, чтобы выпадающее меню появлялось справа, вы можете добавить"dropright"класс к элементу div:
Пример
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
</div>
</div>
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Разделить dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключить Dropright</span>
</button>
<div class="dropdown-menu">
</div>
</div>
Попробуйте сами »
Укажите меню Dropup, которое всплывает вверх
Если вы хотите, чтобы меню dropup всплывало вверх, вы можете добавить"dropup"класс:
Пример
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Разделенное выпадающее вверх
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключить выпадающее меню</span>
</button>
<div class="dropdown-menu">
</div>
</div>
Попробуйте сами »
Укажите выпадающее меню, которое раскрывается влево
Если вы хотите, чтобы выпадающее меню раскрывалось вверх, вы можете добавить"dropleft"класс:
Пример
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Влево
</button>
<div class="dropdown-menu">
</div>
</div>
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключить выпадающее меню влево</span>
</button>
<div class="dropdown-menu">
</div>
</div>
<button type="button" class="btn btn-secondary">
Разделённая кнопка с выпадающим меню влево
</button>
</div>
Попробуйте сами »
Текст выпадающего меню
.dropdown-item-textКласс позволяет задавать текстовые элементы в выпадающем меню:
Пример
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Ссылка 1</a>
<a class="dropdown-item" href="#">Ссылка 2</a>
<a class="dropdown-item-text" href="#">Текстовая ссылка</a>
<span class="dropdown-item-text">Только текст</span>
</div>
Попробуйте сами »
Выпадающее меню в кнопке
Мы можем добавить выпадающее меню в кнопку:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Смартфон</a>
</div>
</div>
Попробуйте сами »
Вертикальная группа кнопок с выпадающим меню:
Пример
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Смартфон</a>
</div>
</div>
</div>
Попробуйте сами » Другие расширения