Выпадающее меню
За открытие выпадающего меню отвечает атрибут data-bs-toggle="dropdown"
.
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
Настройки
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Страницы</a></li>
<li><a class="dropdown-item" href="#">Разделы</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Сообщения</a></li>
</ul>
</div>
Результат кода:
В качестве библиотеки выпадающего меню Twitter Bootstrap использует Popper.js.
Открывать меню при нажатии на иконку
Атрибут data-toggle="dropdown"
, можно задать на иконку, после чего при нажатии на иконку будет открываться выпадающее меню.
<div class="btn-group">
<button type="button" class="btn">Настройки</button>
<button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Страницы</a>
<a class="dropdown-item" href="#">Разделы</a>
<a class="dropdown-item" href="#">Сообщения</a>
</div>
</div>
Результат кода:
Направление выпадающего меню
Задать направление выпадающего меню можно через классы .dropend
, .dropstart
и .dropup
.
<div class="dropdown dropend">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
Настройки
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Страницы</a></li>
<li><a class="dropdown-item" href="#">Разделы</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Сообщения</a></li>
</ul>
</div>
Результат кода:
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта