Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Введение в выпадающие списки Bootstrap: Путеводитель для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир выпадающих списков Bootstrap. Как ваш доброжелательный сосед по компьютеру, я рад помочь вам в этом путешествии. Не волнуйтесь, если вы никогда не писали ни строчки кода — мы начнем с нуля и будем crescendo. Так что возьмите себе чашечку кофе (или чая, если это ваш выбор) и давайте начнем!

Bootstrap - Dropdowns

Что такое выпадающие списки?

Прежде чем мы перейдем к коду, давайте поговорим о том, что такое выпадающие списки. Представьте, что вы находитесь в ресторане, и официант протягивает вам меню. Это меню похоже на выпадающий список — оно предлагает вам список вариантов на выбор. В веб-дизайне выпадающие списки работают аналогично. Это compactные способы представить пользователю множество вариантов без захламления вашей веб-страницы.

Основной выпадающий список

Давайте начнем с最基本的 выпадающего списка. Вот как он выглядит в Bootstrap:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выпадающая кнопка
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">Что-то другое здесь</a></li>
</ul>
</div>

Давайте разберем это:

  1. Мы начинаем с <div> с классом dropdown. Это наш контейнер.
  2. Внутри него у нас есть <button>, который активирует выпадающий список. Обратите внимание на класс dropdown-toggle и атрибут data-bs-toggle="dropdown".
  3. <ul> с классом dropdown-menu — это наш фактический контент выпадающего списка.
  4. Каждый <li> внутри <ul> — это элемент нашего выпадающего меню.

Кнопка vs. Ссылка в выпадающем списке

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

Выпадающая кнопка

Мы уже видели это в нашем базовом примере. Он использует элемент <button>:

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выпадающая кнопка
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Выпадающая ссылка

Для выпадающего списка на основе ссылки мы используем тег <a>:

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Выпадающая ссылка
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- Меню элементы -->
</ul>
</div>

Основное различие заключается в используемом HTML-элементе (<button> vs. <a>), но они работают аналогично.

Варианты

Bootstrap предлагает различные цветовые варианты для ваших выпадающих списков. Вы можете изменить класс btn-secondary на любой из следующих:

  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-light
  • btn-dark

Например:

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Опасный выпадающий список
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Разделенная кнопка

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

<div class="btn-group">
<button type="button" class="btn btn-primary">Действие</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Переключить выпадающий список</span>
</button>
<ul class="dropdown-menu">
<!-- Меню элементы -->
</ul>
</div>

Здесь, нажатие на левую часть кнопки выполняет действие, а правая часть открывает выпадающий список.

Размеры

Вы можете создать большие или маленькие выпадающие списки, добавив классы btn-lg или btn-sm:

Большая выпадающая кнопка

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
Большой выпадающий список
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- Меню элементы -->
</ul>
</div>

Маленькая выпадающая кнопка

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
Маленький выпадающий список
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- Меню элементы -->
</ul>
</div>

Темный выпадающий список

Для стильного, темного выпадающего списка добавьте класс dropdown-menu-dark к вашему dropdown-menu:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Темный выпадающий список
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Направления

Bootstrap позволяет вам изменить направление ваших выпадающих списков. Давайте рассмотрим эти варианты:

Выровненные по центру выпадающие списки

Чтобы выровнять выпадающее меню по центру, добавьте класс dropdown-center к контейнеру:

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Выровненный по центру выпадающий список
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- Меню элементы -->
</ul>
</div>

Вверх

Для выпадающего списка, который открывается вверх, используйте класс dropup:

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Вверх
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Вверх и по центру

Комбинируйте dropup и dropdown-center для выровненного по центру вверхного выпадающего списка:

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
Выровненный по центру вверхный выпадающий список
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- Меню элементы -->
</ul>
</div>

Справа

Для выпадающего списка, который открывается вправо, используйте класс dropend:

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Справа
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Слева

Для выпадающего списка, который открывается влево, используйте класс dropstart:

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Слева
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Элементы меню

Теперь давайте поговорим о том, что идет внутрь вашего выпадающего меню. У вас есть несколько вариантов:

Заголовки

Добавьте заголовок для分组 элементов меню:

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Заголовок выпадающего списка</h6></li>
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
</ul>

Разделители

Используйте разделители для отделения групп связанных элементов меню:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Что-то другое здесь</a></li>
</ul>

Текст

Вы также можете включить неинтерактивный текст:

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Действие</a></li>
<li><a class="dropdown-item" href="#">Другое действие</a></li>
<li><a class="dropdown-item" href="#">Что-то другое здесь</a></li>
<li><span class="dropdown-item-text">Текст элемента выпадающего списка</span></li>
</ul>

Формы

Вы можете даже включить формы в свои выпадающие списки:

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Адрес электронной почты</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Пароль</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Пароль">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Запомнить меня
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Войти</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Новичок? Зарегистрируйтесь</a>
<a class="dropdown-item" href="#">Забыли пароль?</a>
</div>

Выравнивание меню

По умолчанию выпадающие меню выровнены по левому краю. Вы можете изменить это с помощью классов выравнивания:

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

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выровненное по правому краю меню
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Адаптивное выравнивание

Вы также можете сделать выравнивание адаптивным:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Левое выравнивание, но выровненное по правому краю на больших экранах
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Этот выпадающий список будет выровнен по левому краю по умолчанию, но выровнен по правому краю на больших экранах и выше.

Опции выпадающего списка

Выпадающие списки Bootstrap企业提供一些附加选项：

Поведение автоматического закрытия

Вы можете контролировать, как закрывается выпадающий список, с помощью атрибута data-bs-auto-close:

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Кликабельно снаружи
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- Меню элементы -->
</ul>
</div>

Варианты для data-bs-auto-close:

  • true (по умолчанию): Закрывает выпадающий список при нажатии снаружи или внутри выпадающего списка
  • false: Выпадающий список не закрывается при нажатии снаружи или внутри
  • inside: Закрывает выпадающий список при нажатии внутри выпадающего списка
  • outside: Закрывает выпадающий список при нажатии снаружи выпадающего списка

И вот вы только что completaronimpasv whirlwind tour of Bootstrap dropdowns. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Happy coding, and may your dropdowns always drop in the right direction!

Credits: Image by storyset

Предыдущий учебник:
Bootstrap - Обвал
Следующий учебник:
Bootstrap - Группа списков