Как создавать выпадающие списки в Bootstrap 5?

Мы уже касались раскрывающегося списка в нашем предыдущем руководстве по кнопкам Bootstrap. Выпадающий список — это не что иное, как кнопка (или ссылка), и при нажатии на нее отображается список. В этом руководстве мы рассмотрим различные типы раскрывающихся списков Bootstrap 5 с примерами. Не забудьте включить bootstrap.bundled.min.js, чтобы раскрывающийся список работал. Вы можете сослаться на стартовый шаблон здесь.

Учебное пособие по раскрывающимся спискам Bootstrap 5

  1. Основные возможности выпадающих списков
  2. Создание раскрывающейся кнопки по умолчанию
  3. Добавление разделителя
  4. Отключение ссылки в раскрывающемся списке
  5. Выпадающее меню с выравниванием по правому краю
  6. Выпадающая кнопка с заголовком
  7. Размер раскрывающейся кнопки
  8. Разделить раскрывающуюся кнопку
  9. Кнопка разделения выпадающего списка
  10. Что нужно помнить

1. Основы раскрывающегося списка Bootstrap 5

  • Выпадающие списки — это переключаемый список ссылок или элементов кнопок, отображаемых в направлении вверх или вниз.
  • Обычно это используется для элементов раскрывающегося или раскрывающегося меню и элементов навигации на боковой панели.
  • Работает на основе скрипта Popper.js.
  • Вы должны включить popper.min.js, а затем bootstrap.min.js в той же последовательности. Используйте все примеры в этом руководстве вместе с нашим начальным шаблоном.
  • По умолчанию к раскрывающемуся элементу не добавляются атрибуты «role» или «aria-». Вы должны вручную вставить там, где это необходимо.
  • Выпадающие элементы можно закрыть, нажав кнопку или нажав за пределами. Вы также можете использовать клавишу «Esc», чтобы закрыть раскрывающиеся элементы.

2. Создание раскрывающейся кнопки по умолчанию

Ниже приведен код для создания раскрывающегося списка по умолчанию в Bootstrap 5:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Это приведет к следующему результату в браузере:

Выпадающий список Bootstrap 4

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

Теперь вы знаете, как создать базовую кнопку раскрывающегося списка. Давайте добавим некоторые декоративные элементы, например, добавим разделитель между пунктами меню и заголовком.

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<h6 class="dropdown-header">Dropdown Header</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Выпадающее меню будет выглядеть так:

Выпадающий компонент с разделителем и заголовком

4. Отключение ссылки в раскрывающемся списке

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

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Мы использовали информационную кнопку и отключили третью ссылку. При наведении указателя мыши на отключенную ссылку будет отображаться символ остановки курсора, и вы не сможете щелкнуть по нему.

Кнопка раскрывающегося списка с разделителем и отключено

5. Выпадающее меню с выравниванием по правому краю.

Как вы заметили в приведенных выше примерах, меню по умолчанию будет отображаться с выравниванием по левому краю. Вы можете изменить его на выравнивание по правому краю, добавив класс «.dropdown-menu-right» вместе с классом «.dropdown-menu». Помните, что это переместит все окно меню вправо от контейнера. Вам следует использовать дополнительные стили CSS, чтобы правильно расположить меню под элементом раскрывающейся кнопки.

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button Alignment Right
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Пункты меню, выровненные по правому краю, будут выглядеть следующим образом:

Выпадающее меню кнопки Выравнивание по правому краю

6. Выпадающая кнопка с заголовком

Вы также можете добавить текст заголовка внутри пунктов меню, используя класс «.dropdown-header» с любым из тегов H1 — H6. Обычно заголовок добавляется поверх меню и не доступен для нажатия.

<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<h5 class="dropdown-header" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Header</h5>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
</div>
</div>

Выпадающий список с заголовком даст следующий результат:

Кнопка раскрывающегося списка с заголовком

7. Размер кнопки раскрывающегося меню

Увеличьте или уменьшите раскрывающуюся кнопку, используя классы «.btn-lg» и «.btn-sm», как показано ниже:

<div class="btn-group">
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownmenu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Обратите внимание: мы использовали две группы кнопок для отображения двух встроенных кнопок. Если вы хотите отображать только одну кнопку (скажем, большую), вы можете использовать класс по умолчанию «.dropdown».

Большая и маленькая раскрывающиеся кнопки показаны ниже:

Размер раскрывающейся кнопки

8. Кнопка «Разделить раскрывающийся список»

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

<div class="btn-group">
<button type="button" class="btn btn-secondary">Split Button</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">Dropdown Button Group</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Кнопка раскрывающегося списка разделить будет выглядеть следующим образом:

Разделить раскрывающуюся кнопку

9. Кнопка разделения выпадающего меню

Это просто стиль раскрывающегося списка вместо раскрывающегося по умолчанию с использованием класса «.dropup».

<div class="btn-group dropup">
<button type="button" class="btn btn-warning">Split Dropup Button</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Dropdown Button Group</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown One</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Two</a>
<a class="dropdown-item" href="https://www.webnots.com/bootstrap-dropdowns-tutorial/#">Dropdown Three</a>
</div>
</div>

Кнопка разделения выпадающего меню будет выглядеть, как показано ниже:

Кнопка разделения выпадающего меню

10. Важные моменты, которые следует помнить

Выпадающее меню будет автоматически отображаться вниз или вверх в зависимости от области просмотра браузера. Например, когда вы находитесь в конце страницы, элементы раскрывающегося меню будут отображаться выше, как раскрывающееся меню.

Элемент кнопки в раскрывающемся списке поддерживает все служебные классы цвета фона, аналогичные компоненту кнопки по умолчанию. Bootstrap 3 поддерживает только ссылки для пунктов меню. Но в Bootstrap 4 и 5 каждый пункт меню может быть ссылкой или элементом кнопки.


Изучите Bootstrap 5 (Индекс)


Похожие записи

Один комментарий

Добавить комментарий

Ваш адрес email не будет опубликован.