Bootstrap 4 Выпадающие списки
Основной раскрывающийся список
Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:
Пример
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Объяснение примера
Класс .dropdownуказывает на выпадающее меню.
Чтобы открыть выпадающее меню, используйте кнопку или ссылку с классом .dropdown-toggleи
data-toggle="dropdown"атрибутом.
Добавьте .dropdown-menuкласс к <div>элементу, чтобы создать раскрывающееся меню. Затем добавьте
.dropdown-itemкласс к каждому элементу (ссылкам или кнопкам) в раскрывающемся меню.
Выпадающий разделитель
Класс .dropdown-dividerиспользуется для разделения ссылок внутри выпадающего меню тонкой горизонтальной рамкой:
Пример
<div class="dropdown-divider"></div>
Выпадающий заголовок
Класс .dropdown-headerиспользуется для добавления заголовков в выпадающее меню:
Пример
<div class="dropdown-header">Dropdown header 1</div>
Отключить и активировать элементы
Выделите определенный элемент раскрывающегося списка с .activeклассом (добавляет синий цвет фона).
Чтобы отключить элемент в раскрывающемся меню, используйте .disabledкласс (получает светло-серый цвет текста и значок «знак запрета парковки» при наведении):
Пример
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Выпадающее положение
Вы также можете создать «выпадающее» или «выпадающее» меню, добавив класс .droprightили .dropleftв раскрывающийся список. Обратите внимание, что каретка/стрелка добавляется автоматически:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Выпадающее меню справа
Чтобы выровнять раскрывающееся меню по правому краю, добавьте .dropdown-menu-rightкласс к элементу с .dropdown-menu:
Пример
<div class="dropdown-menu dropdown-menu-right">
Выпадающий
Если вы хотите, чтобы выпадающее меню расширялось вверх, а не вниз, измените элемент <div> с class="dropdown" на "dropup":
Пример
<div class="dropup">
Выпадающий текст
Этот .dropdown-item-textкласс используется для добавления простого текста в раскрывающийся список или используется в ссылках для оформления ссылок по умолчанию.
Пример
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Сгруппированные кнопки с раскрывающимся списком
Пример
<div class="btn-group">
<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="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Раскрывающиеся списки кнопок разделения
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</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="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Полная ссылка на раскрывающийся список Bootstrap 4
Полный справочник по всем параметрам раскрывающегося списка, методам и событиям см. в нашем Справочнике раскрывающегося списка Bootstrap 4 JS .