Компоненты

Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Выпадающие списки

Выпадающие списки переключаемы, контекстно перекрываются для отображения списков ссылок и многое другое. Они интерактивны с включенным плагином выпадающих списков JavaScript. Они переключаются нажатием, а не при наведении курсора; Это намеренное дизайнерское решение.

Содержание

Примеры

Оберните переключатель выпадающего списка (ваша кнопка или ссылка) и раскрывающееся меню внутри .dropdown, или другой элемент, который объявляет position: relative;.Выпадающие списки могут запускаться из элементов <a> или <button>, чтобы лучше соответствовать вашим потенциальным потребностям.

Выпадающие списки одной кнопки

Любой отдельный .btn можно превратить в выпадающий переключатель с некоторыми изменениями разметки. Вот как вы можете заставить их работать с элементами <button>:

Action Another action Something else here 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

И с элементами <a>:

Action Another action Something else here 
<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Самое приятное то, что вы можете сделать это с любым вариантом кнопки:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Выпадающие списки разделенных кнопок

Аналогичным образом создайте выпадающие списки разделенных кнопок с практически такой же разметкой, что и выпадающие списки с одной кнопкой, но с добавлением .dropdown-toggle-split для правильного интервала вокруг выпадающей каретки.

Мы используем этот дополнительный класс, чтобы уменьшить горизонтальный padding с обеих сторон каретки на 25% и удалить margin-left добавленный для обычных выпадающих кнопок. Эти дополнительные изменения удерживают курсор, центрированный в разделенной кнопке, и обеспечивают более подходящую область попадания рядом с главной кнопкой.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Изменение размера

Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и разделенные кнопки.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Вариант сброса

Вызовите выпадающие меню над элементами, добавив .dropup к родительскому элементу.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">Dropup</button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
должно было быть ссылкой, но это уже не так с v4. Теперь вы можете опционально использовать элементы <button> в выпадающих списках вместо просто <a>.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

По умолчанию выпадающее меню автоматически позиционируется на 100% сверху и вдоль левой стороны его родителя. Добавьте .dropdown-menu-right в .dropdown-menu, чтобы выровнять выпадающее меню по правому краю.

Берегись! Выпадающие списки позиционируются только с помощью CSS и могут потребоваться некоторые дополнительные стили для точного выравнивания.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

Dropdown header
Action Another action 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Отделите группы связанных элементов меню с помощью разделителя.

Action Another action Something else here
Separated link 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Отключенные пункты меню

Добавьте .disabled к элементам в выпадающем списке, чтобы стилизовать их как отключенные.

Regular link Disabled link Another link 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Применение

С помощью атрибутов данных или JavaScript плагин выпадающего списка переключает скрытый контент (выпадающие меню) путем переключения класса .show на родительский элемент списка.

На мобильных устройствах при раскрытии выпадающего списка добавляется .dropdown-backdropв качестве области подключения для закрытия раскрывающихся меню при нажатии вне меню, что необходимо для правильной поддержки iOS. Это означает, что переход из раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве.

Примечание. Атрибут data-toggle="dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

Через атрибуты данных

Добавьте data-toggle="dropdown" в ссылку или кнопку, чтобы переключить выпадающий список.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызовите выпадающие списки с помощью JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown" по-прежнему требуется

Независимо от того, вызываете ли вы выпадающий список через JavaScript или вместо этого используете data-api, всегда требуется, чтобы data-toggle="dropdown" присутствовал в элементе выпадающего элемента.

Опции

Нет.

Методы

Метод Описание
$().dropdown('toggle') Переключает раскрывающееся меню данной навигационной панели или с вкладками.

События

Все выпадающие события запускаются в родительском элементе .dropdown-menu и имеют свойствоrelatedTarget, значение которого является переключающим элементом привязки.

Событие Описание
show.bs.dropdown Это событие срабатывает сразу после вызова метода экземпляра показа.
shown.bs.dropdown Это событие вызывается, когда выпадающий список становится видимым для пользователя (будет ждать переходов CSS, чтобы завершить).
hide.bs.dropdown Это событие вызывается немедленно при вызове метода hide instance.
hidden.bs.dropdown Это событие вызывается, когда раскрывающийся список закончил скрываться от пользователя (будет ждать переходов CSS, чтобы завершить). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x