Bootstrap - Botones desplegables
Este capítulo discutirá sobre cómo agregar un menú desplegable a los botones usando clases de Bootstrap. Para agregar un menú desplegable a un botón, simplemente envuelva el botón y el menú desplegable en un.btn-group. También puede usar <span class = "caret"> </span> para actuar como indicador de que el botón es un menú desplegable.
El siguiente ejemplo muestra un menú desplegable básico de un solo botón:
<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>
Menú desplegable de botones divididos
Los menús desplegables de botones divididos utilizan el mismo estilo general que el botón desplegable, pero agregan una acción principal junto con el menú desplegable. Los botones divididos tienen la acción principal a la izquierda y un interruptor a la derecha que muestra el menú desplegable.
<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>
Tamaño desplegable del botón
Puede utilizar los menús desplegables con cualquier tamaño de botón: .btn-large, .btn-sm, o .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>
Variación Dropup
Los menús también se pueden construir para desplegar hacia arriba en lugar de hacia abajo. Para lograr esto, simplemente agregue.dropup a los padres .btn-group envase.
<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>