Crea diferentes tipos de botones con ayuda de cualquiera de las clases CSS definidas por Bootstrap 3. Ejemplo:
<!-- Botón normal -->
<button type="button" class="btn btn-default">Normal</button>
<!-- Muestra el botón de forma destacada para descubrir fácilmente
el botón principal dentro de un grupo de botones -->
<button type="button" class="btn btn-primary">Destacado</button>
<!-- Indica una acción exitosa o positiva -->
<button type="button" class="btn btn-success">Éxito</button>
<!-- Botón pensado para los mensajes con alertas informativas -->
<button type="button" class="btn btn-info">Información</button>
<!-- Indica que hay que tener cuidado con la acción asociada al botón -->
<button type="button" class="btn btn-warning">Advertencia</button>
<!-- Indica una acción negativa o potencialmente peligrosa -->
<button type="button" class="btn btn-danger">Peligro</button>
<!-- Resta importancia al botón haciéndolo parecer un simple enlace,
aunque conserva tu comportamiento original de botón -->
<button type="button" class="btn btn-link">Enlace</button>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.17 Botones en Bootstrap 3
5.8.1. Botones de diferente tamaño
Cuando necesites crear botones más grandes o más pequeños que el tamaño estándar, utiliza las clases .btn-lg (grande), .btn-sm (pequeño) y .btn-xs (extra pequeño). Ejemplo:
<p>
<button type="button" class="btn btn-primary btn-lg">Botón grande</button>
<button type="button" class="btn btn-default btn-lg">Botón grande</button>
</p>
<p>
<button type="button" class="btn btn-primary">Botón normal</button>
<button type="button" class="btn btn-default">Botón normal</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
<button type="button" class="btn btn-default btn-sm">Botón pequeño</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Botón extra pequeño</button>
<button type="button" class="btn btn-default btn-xs">Botón extra pequeño</button>
</p>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.18 Botones de diferente tamaño en Bootstrap 3
También puedes convertir el botón en un elemento de bloque para hacer que ocupe toda la anchura del elemento en el que se encuentre. Para ello, añade la clase .btn-block. Ejemplo:
<button type="button" class="btn btn-primary btn-lg btn-block">Botón de bloque</button>
<button type="button" class="btn btn-default btn-lg btn-block">Botón de bloque</button>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.19 Botones de bloque en Bootstrap 3
5.8.2. Botones activados
En ocasiones puede ser útil mostrar un botón con el aspecto de haber sido presionado, es decir, con un color de borde y un color de fondo un poco más oscuro y una sombra que imite la presión del botón. Los elementos <button> consiguen este efecto mediante la pseudo-clase :active y los elementos <a> mediante la clase .active.
5.8.2.1. Activando los elementos <button>
Como se utiliza la pseudo-clase :active, no es necesario que hagas nada. No obstante, si quieres forzar a que el botón muestre el aspecto presionado, añade la clase .active. Ejemplo:
<button type="button" class="btn btn-primary btn-lg active">Botón principal</button>
<button type="button" class="btn btn-default btn-lg active">Botón</button>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.20 Botones activados en Bootstrap 3
5.8.2.2. Activando los elementos <a>
Añade la clase .active a cualquier elemento <a> para hacer que parezca presionado. Ejemplo:
<a href="#" class="btn btn-primary btn-lg active" role="button">Enlace principal</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Enlace</a>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.21 Enlaces activados en Bootstrap 3
5.8.3. Botones desactivados
Cuando quieras mostrar al usuario un botón con aspecto desactivado para indicarle que no puede pulsarlo, utiliza los estilos de Bootstrap que reducen su opacidad un 50%.
5.8.3.1. Desactivando los elementos <button>
Añade el atributo disabled para dar un aspecto desactivado a los elementos <button>. Ejemplo:
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Botón principal</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Botón</button>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.22 Botones desactivados en Bootstrap 3
Advertencia Cuando se añade el atributo disabled a un elemento <button>, el navegador Internet Explorer 9 y sus versiones anteriores muestran el texto de botón en color gris y con una sombra bastante fea que no se puede cambiar.
5.8.3.2. Desactivando los elementos <a>
Añade la clase .disabled para dar un aspecto desactivado a los elementos <a>. Ejemplo:
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Enlace principal</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Enlace</a>Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.23 Enlaces desactivados en Bootstrap 3
Nota La clase .disabled solamente modifica el aspecto de los elementos <a>, pero no su funcionalidad. Para deshabilitar realmente los enlaces, tendrás que utilizar código JavaScript.
5.8.4. Etiquetas para botones
Gracias a los estilos de Bootstrap 3, puedes utilizar cualquiera de las siguientes etiquetas para mostrar botones: <a>, <button> e <input>. Ejemplo:
<a class="btn btn-default" href="#" role="button">Enlace</a>
<button class="btn btn-default" type="submit">Botón</button>
<input class="btn btn-default" type="button" value="Campo input">
<input class="btn btn-default" type="submit" value="Enviar">Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo:
Figura 5.24 Etiquetas para botones en Bootstrap 3
Advertencia Al margen de que puedas utilizar varios elementos para crear botones, la buena práctica recomendada consiste en utilizar el elemento <button> siempre que sea posible, ya que es el que ofrece un aspecto más homogéneo en los diferentes navegadores.
Así por ejemplo, Firefox sufre un error que impide establecer la propiedad line-height en los botones creados con elementos <input>, por lo que su aspecto no coincide con el del resto de botones.