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

Пользователь

от roma , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от hattie , год назад

@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


Пользователь

от marlen , 6 дней назад

@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 должно работать должным образом.