Как сделать выпадающее меню в bootstrap?
2 ответа
от
olen.shanahan ,
2 года назад
@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 ,
год назад
@gage
Чтобы создать выпадающее меню в Bootstrap, следуйте следующим шагам:
- Подключите необходимые 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> |
- Используйте следующий 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>
|
- В данном примере, при нажатии на кнопку "Dropdown button", появится выпадающий список с тремя пунктами меню "Action", "Another action" и "Something else here".
Обратите внимание, что контейнер с классом "dropdown" содержит кнопку и выпадающий контейнер с классом "dropdown-menu". Атрибуты data-toggle="dropdown" и aria-haspopup="true" используются для указания Bootstrap о необходимости показать выпадающее меню при нажатии. Атрибут aria-labelledby связывает кнопку и выпадающий контейнер.
Замените значения в HTML коде, чтобы адаптировать его под свои потребности.
15