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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от deion , 2 года назад

@jose 

Выпадающее меню на Bootstrap можно сделать с помощью компонента Dropdown. Пример реализации:

 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-файлы Bootstrap и JavaScript-файлы (jQuery и Popper.js), чтобы компонент Dropdown заработал.

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

от alisa.bahringer , 2 года назад

@jose 

Чтобы сделать выпадающее меню на Bootstrap, вам нужно:

  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. Подключите CSS-файл Bootstrap и JavaScript-библиотеку jQuery к вашему проекту.
  2. Подключите файл bootstrap.js или bootstrap.min.js.


Это должно быть все, что вам нужно, чтобы создать выпадающее меню с помощью Bootstrap.