В этой главе мы обсудим, как добавить выпадающее меню к кнопкам с помощью классов Bootstrap. Чтобы добавить раскрывающийся список к кнопке, просто оберните ее и раскрывающееся меню в .btn-группе . Вы также можете использовать <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 .