Как сделать выпадающее меню в bootstrap?

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

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

Как сделать выпадающее меню в bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от olen.shanahan , год назад

@gage 

Для создания выпадающего меню в Bootstrap, используйте следующий HTML код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>


И подключите CSS и JavaScript библиотеки Bootstrap.

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

от hobart.rath , 3 месяца назад

@gage 

Чтобы создать выпадающее меню в Bootstrap, следуйте следующим шагам:

  1. Подключите необходимые CSS и JavaScript библиотеки Bootstrap в ваш HTML файл. Вы можете использовать CDN ссылки или загрузить файлы локально. Пример:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <title>Ваша страница</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<!-- Ваш контент здесь -->

</body>
</html>


  1. Используйте следующий HTML код для создания выпадающего меню:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>


  1. В данном примере, при нажатии на кнопку "Dropdown button", появится выпадающий список с тремя пунктами меню "Action", "Another action" и "Something else here".


Обратите внимание, что контейнер с классом "dropdown" содержит кнопку и выпадающий контейнер с классом "dropdown-menu". Атрибуты data-toggle="dropdown" и aria-haspopup="true" используются для указания Bootstrap о необходимости показать выпадающее меню при нажатии. Атрибут aria-labelledby связывает кнопку и выпадающий контейнер.


Замените значения в HTML коде, чтобы адаптировать его под свои потребности.