Bootstrap - Dropdown Demo
Что такое выпадающее меню?
Здравствуйте,future web разработчики! Сегодня мы окунемся в чудесный мир выпадающих меню Bootstrap. Как ваш добрый邻里 компьютерный учитель, я рад помочь вам в этом путешествии, даже если вы еще ни разу не писали строку кода. Поверьте мне, к концу этого учебника вы будете создавать выпадающие меню, как профессионал!
Выпадающее меню - это элемент пользовательского интерфейса, который позволяет пользователям выбирать одну опцию из списка элементов. Это как цифровое меню, которое появляется при нажатии на кнопку или ссылку. Представьте, что вы находитесь в ресторане, и вместо бумажого меню официант handing вам магическую кнопку. Когда вы нажмете на нее, список вкусных блюд появляется浮动的 в воздухе. Именно так и работает выпадающее меню на веб-странице!
Why Use Dropdowns?
Выпадающие меню incredibly полезны для:
- Экономии места на вашей веб-странице
- Организации связанных опций
- Обеспечения чистого и интуитивно понятного пользовательского интерфейса
Теперь давайте脏 our hands с кодом!
Настройка Bootstrap
Before мы создадим наш первый выпадающее меню, мы должны настроить Bootstrap в нашем HTML файле. Не волнуйтесь; это проще, чем настроить новый смартфон!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content will go here -->
<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Этот код устанавливает базовую структуру HTML и включает необходимые файлы Bootstrap. Представьте это как подготовку кухни перед началом готовки!
Создание базового выпадающего меню
Давайте начнем с простого выпадающего меню. Мы создадим кнопку, которая при нажатии показывает список опций.
<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">
<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>Давайте разберем это:
-
<div class="dropdown">: Это контейнер для нашего выпадающего меню. -
<button class="btn btn-primary dropdown-toggle" ...>: Это создает кнопку, которую пользователи нажимают для открытия выпадающего меню. -
data-bs-toggle="dropdown": Это говорит Bootstrap, что эта кнопка должна переключать выпадающее меню. -
<ul class="dropdown-menu">: Это список, который появляется при нажатии на кнопку. -
<li><a class="dropdown-item" href="#">...: Это отдельные элементы в списке выпадающего меню.
Направления выпадающего меню
Точно так же, как вы можете подавать еду с different направлений на буфете, Bootstrap позволяет изменять направление вашего выпадающего меню. Давайте рассмотрим некоторые варианты:
Dropup
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<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>Единственное отличие здесь - класс dropup вместо dropdown. Это как перевернуть ваше меню вверх дном!
Dropright и Dropleft
<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<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>
<div class="dropstart">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<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>Используйте dropend для выпадающих меню, выровненных по правому краю, и dropstart для выровненных по левому краю. Это как выбрать, с какой стороны тарелки положить вилку!
Элементы выпадающего меню
Теперь давайте оживим наше выпадающее меню с помощью дополнительных функций:
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Выпадающее меню
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">Заголовок выпадающего меню</h6></li>
<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>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Отключенное действие</a></li>
</ul>
</div>В этом примере мы добавили:
- Заголовок (
dropdown-header) - Разделитель (
dropdown-divider) - Отключенный элемент (
dropdown-item disabled)
Это как создание секций в вашем меню и зачеркивание элементов, которые закончились!
Размеры выпадающего меню
Точно так же, как вы можете заказать маленький, средний или большой напиток, вы можете изменить размер вашей кнопки выпадающего меню:
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Большая кнопка
</button>
<ul class="dropdown-menu">
<!-- Элементы выпадающего меню -->
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Маленькая кнопка
</button>
<ul class="dropdown-menu">
<!-- Элементы выпадающего меню -->
</ul>
</div>Используйте btn-lg для большой кнопки и btn-sm для маленькой. Это так просто!
Методы выпадающего меню
Bootstrap предоставляет несколько методов для управления выпадающими меню программно. Вот таблица этих методов:
| Метод | Описание |
|---|---|
| show | Показать выпадающее меню |
| hide | Скрыть выпадающее меню |
| toggle | Переключить выпадающее меню |
| update | Обновить положение выпадающего меню элемента |
| dispose | Уничтожить выпадающее меню элемента |
Чтобы использовать эти методы, вы можете использовать JavaScript. Например:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
// Показать выпадающее меню
dropdownList[0].show()
// Скрыть выпадающее меню
dropdownList[0].hide()
// Переключить выпадающее меню
dropdownList[0].toggle()И вот и все! Вы только что顺利完成 crash course в выпадающих меню Bootstrap. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими элементами на своих веб-сайтах.
Before вы знаете это, вы будете создавать выпадающие меню, которые заставят завидовать даже самые изысканные рестораны. Счастливого кодирования, и пусть ваши выпадающие меню всегда будут открываться в правильном направлении!
Credits: Image by storyset