6.4. Botones desplegables (Bootstrap 3, el manual oficial)

Los botones desplegables se crean añadiendo un botón dentro de cualquier elemento con la clase .btn-group.

Nota Para que funcionen bien estos botones desplegables es necesario utilizar el plugin dropdown de JavaScript.

6.4.1. Botones desplegables simples

Aplica los cambios que se muestran a continuación para convertir un botón normal en un botón que despliega un completo menú de opciones:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle"
          data-toggle="dropdown">
    Título del botón <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Acción #1</a></li>
    <li><a href="#">Acción #2</a></li>
    <li><a href="#">Acción #3</a></li>
    <li class="divider"></li>
    <li><a href="#">Acción #4</a></li>
  </ul>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.11 Botones desplegables simples en Bootstrap 3

6.4.2. Botones desplegables compuestos

Los botones compuestos se crean realmente con dos botones diferentes: el primero contiene la acción principal y el segundo simplemente muestra una flecha descendente y al pulsarla, se despliega para mostrar el menú de opciones. Ejemplo:

<div class="btn-group">
  <button type="button" class="btn btn-danger">Título del botón</button>

  <button type="button" class="btn btn-danger dropdown-toggle"
          data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Desplegar menú</span>
  </button>

  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Acción #1</a></li>
    <li><a href="#">Acción #2</a></li>
    <li><a href="#">Acción #3</a></li>
    <li class="divider"></li>
    <li><a href="#">Acción #4</a></li>
  </ul>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.12 Botones desplegables compuestos en Bootstrap 3

6.4.3. Cambiando el tamaño de los botones

Los botones desplegables funcionan bien con cualquier tamaño de botón. Ejemplo

<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle"
          type="button" data-toggle="dropdown">
    Botón grande <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>


<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle"
          type="button" data-toggle="dropdown">
    Botón pequeño <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>


<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle"
          type="button" data-toggle="dropdown">
    Botón extra pequeño <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.13 Botones desplegables de diferente tamaño en Bootstrap 3

6.4.4. Botones desplegables invertidos

Por defecto, los botones desplegables en Bootstrap 3 se despliegan hacia abajo ("dropdown" en inglés). Si quieres desplegar el menú hacia arriba ("dropup" en inglés), añade la clase .dropup al elemento contenedor del botón. Ejemplo:

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">
  Botón dropup</button>

  <button type="button" class="btn btn-default dropdown-toggle"
          data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Desplegar menú</span>
  </button>

  <ul class="dropdown-menu">
    ...
  </ul>


  <button type="button" class="btn btn-default">
  Botón dropup a la derecha</button>
  ...

  <ul class="dropdown-menu pull-right">
    ...
  </ul>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Figura 6.14 Botones desplegables invertidos en Bootstrap 3