Bootstrap 4 Dropdowns - выпадающее меню
Основное раскрывающийся список
Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка:
Пример
<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 класс or в .dropleft выпадающий элемент. Обратите внимание, что курсор/стрелка добавляется автоматически:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Выпадающее меню вправо
Чтобы выровнять выпадающее меню по правому краю, добавьте .dropdown-menu-right класс к элементу с. раскрывающееся меню:
Пример
<div class="dropdown-menu dropdown-menu-right">
Dropup
Если вы хотите, чтобы раскрывающееся меню расширялось вверх, а не вниз, измените элемент <div> с классом = "раскрывающийся список" на "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" href="#">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">Sony</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="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Вертикальная группа кнопок w/раскрывающийся список
Пример
<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.