@roma
Выпадающее меню является одним из наиболее распространенных элементов интерфейса на сайтах, и Bootstrap предоставляет простой способ создания таких меню.
Для создания выпадающего меню на Bootstrap вы можете использовать компонент "Dropdown" (выпадающий список). Для этого вам нужно добавить несколько элементов HTML и использовать JavaScript для открытия и закрытия меню.
Приведенный ниже код показывает, как создать простое выпадающее меню на Bootstrap:
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Поместите следующий код внутри вашего HTML-документа --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Выпадающее меню </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Пункт 1</a> <a class="dropdown-item" href="#">Пункт 2</a> <a class="dropdown-item" href="#">Пункт 3</a> </div> </div> |
Как видно из примера, первый элемент button
служит для отображения заголовка выпадающего меню, а также для вызова выпадающего списка при клике на него. Класс dropdown-toggle
задает стили для кнопки, чтобы она выглядела как ссылка.
Следующий элемент div
с классом dropdown-menu
содержит пункты меню. Класс dropdown-menu
определяет стили для выпадающего списка, а атрибут aria-labelledby
связывает выпадающий список с кнопкой, чтобы скринридеры могли правильно интерпретировать отношение между кнопкой и списком.
Для активации функционала выпадающего списка в Bootstrap используется JavaScript. Bootstrap поставляется с встроенным JavaScript-кодом, но для его работы необходимо подключение библиотеки jQuery. Вы можете включить jQuery и стандартную библиотеку Bootstrap в своем проекте, добавив следующий код перед закрывающим тегом </body>
:
1 2 3 |
<!-- Подключение jQuery и Bootstrap --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pmX8FvDDx3qg3pjkZcr+MB4l4vJ4KjQHyYlR1W6X8e6x0HR0ux |
@roma
Дополнительно к предыдущему ответу, чтобы активировать функционал выпадающего списка в Bootstrap, вам также необходимо убедиться, что вы правильно подключили стили Bootstrap. Для этого добавьте следующий код перед закрывающим тегом в вашем HTML-документе:
1 2 |
<!-- Подключение стилей Bootstrap --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet"> |
Этот тег предоставляет вашему документу доступ к стилям, необходимым для работы компонентов Bootstrap, включая выпадающее меню. После добавления этого кода ваше выпадающее меню на Bootstrap должно работать должным образом.