Выпадающие списки
Выпадающие списки позволяют организовать в группу список ссылок (или кнопок) вызываемых нажатием на кнопку.
Выпадающий список на основе тега <button>
Выпадающий список состоит из двух обязательных составлюящих: кнопки и списка и обертки. Вызывающая список кнопка должна включать класс .dropdown-toggle. Список представляет собой слой с классом .dropdown-menu, в котором находится перечисление ссылок, входящих в выпадающий список. Для группировки кнопки и слоя со списком используется слой с классом .dropdown или .btn-group. Сами ссылки в выпадающем меню должны иметь класс .dropdown-item
<div class="dropdown">
<button class="btn btn-primary 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="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
</div>
</div>Выпадающий список на основе тега <a>
Вы можете использовать для вызывающей список кнопки тег <a>. В этом случае используется кнопка созданная на основе ссылки, которая также должна включать в себя класс .dropdown-toggle.
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Основная ссылка
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
</div>
</div>Оформление выпадающего списка
Для офомрления выпадающего списка используются классы кнопок.
<div class="btn-group">
<button type="button" class="btn btn-default btn-square dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">По умолчанию</button>
<div class="dropdown-menu dropdown-square">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>Выпадающий список с разделителем
Вы можете разделить кнопку выпадающего списка на две, используя для второй кнопки класс dropdown-toggle-split. Это позволит основной кнопке выполнить основное действие а дополнительной вызывать выпадающей списко, расширяющий возможности основной кнопки.
<div class="btn-group">
<button type="button" class="btn btn-default">По умолчанию</button>
<button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Переключатель выпадающего списка</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>Выпадающие списки разных размеров
Вы можете использовать классы .btn-xs .btn-sm .btn-lg для изменения размеров выпадающих списков.
<div class="btn-group">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Большая кнопка
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Стандартная кнопка
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Маленькая кнопка
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Сверх маленькая кнопка
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>Раскрывающийся вверх список
Если вам требуется чтобы список раскрвался вверх, используйте для оберточного слоя дополнительный класс .dropup.
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Раскрывающийся
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>
</div>Кнопки в выпадающем меню
Вы можете в выпадающем списке использовать вместо ссылок кнопки. Они должны содержать класс .dropdown-item.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадающий
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Действие</button>
<button class="dropdown-item" type="button">Другое действие</button>
<button class="dropdown-item" type="button">Что-то еще</button>
</div>
</div>Выравнивание выпадающего списка по правому краю кнопки
Если необходимо выравнивать меню по правому краю вызывающей кнопки, то необходимо для списка использовать дополнительный класс .dropdown-menu-right.
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Это выпадающее меню выровнено по правому краю
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Действие</button>
<button class="dropdown-item" type="button">Другое действие</button>
<button class="dropdown-item" type="button">Что-то еще</button>
</div>
</div>Разделитель в выпадающем списке
Для разделения элементов списка используйте слой с классом .dropdown-divider.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
<a class="dropdown-item" href="#">Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Отдельная ссылка</a>
</div>Иконки в выпадающем списке
Вы можете использовать шрифтовые иконки для оформления ссылок в выпадающем списке.
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><i class="fa fa-car" aria-hidden="true"></i>Действие</a>
<a class="dropdown-item" href="#"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>Другое действие</a>
<a class="dropdown-item" href="#"><i class="fa fa-diamond" aria-hidden="true"></i>Что-то еще</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fa fa-flask" aria-hidden="true"></i>Отдельная ссылка</a>
</div>Заголовок в выпадающем списке
Используйте класс .dropdown-header для заголовков размещенных в выпадающем списке.
<div class="dropdown-menu">
<h6 class="dropdown-header">Заголовок выпадающего списка</h6>
<a class="dropdown-item" href="#">Действие</a>
<a class="dropdown-item" href="#">Другое действие</a>
</div>Деактивация элемента выпадающего списка
Используйте класс .disabled для обозначения деактивированного элемента выпадающего списка.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Обычная ссылка</a>
<a class="dropdown-item disabled" href="#">Отключенная ссылка</a>
<a class="dropdown-item" href="#">Другая ссылка</a>
</div>