В этой главе мы поговорим о том, как добавить кнопки с выпадающимся меню, используя классы Bootstrap. Чтобы добавить выпадающее меню к кнопке, просто оберните кнопку и раскрывающееся меню в .btn-group</b>. Вы можете также использовать <span class = “caret”></span>, чтобы указать в качестве индикатора того, что кнопка является раскрывающийся.

Следующий пример демонстрирует основные одной кнопки с выпадающимся списком:

<div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Default <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>
<div class = "btn-group"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> Primary <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>

 

Кнопка с разделением выпадающим списком

Кнопка с разделением выпадающим списком используется один и тот же общий стиль как кнопка с выпадающим списком, но еще добавляется первичное действие вместе с выпадающим меню. Разделенные кнопки имеют первичное действие слева и переключатель справа, который отображает ниспадающее меню.

<div class = "btn-group"> <button type = "button" class = "btn btn-default">Default</button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>
<div class = "btn-group"> <button type = "button" class = "btn btn-primary">Primary</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>

 

Размер кнопки с выпадающим списком

Вы можете использовать выпадающие списки с любым размером кнопки – .btn-large, .btn-sm, или .btn-xs.

<div class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown"> Default <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>
<div class = "btn-group"> <button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown"> Primary <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>
<div class = "btn-group"> <button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown"> Success <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul>
</div>

 

Разновидности кнопок с раскрывающимся списком

Меню также может быть построено, чтобы быть выпадающим. Для достижения этой цели, просто добавьте .dropup в родительском контейнер .btn-group.

<div class = "row" style = "margin-left:50px; margin-top:200px"> <div class = "btn-group dropup"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Default <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div> <div class = "btn-group dropup"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> Primary <span class = "caret"></span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Action</a></li> <li><a href = "#">Another action</a></li> <li><a href = "#">Something else here</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </div>
</div>

 

Источник: AndreyEx.ru