7/10/2017 5.8.

Botones (Bootstrap 3, el manual oficial)

Ver ndice de contenidos del libro

5.8. Botones
Crea diferentes tipos de botones con ayuda de cualquiera de las clases CSS de nidas por Bootstrap 3. Ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 1/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

<!-- Botn normal -->

<button type="button" class="btn btn-default">Normal</button>

<!-- Muestra el botn de forma destacada para descubrir fcilmente

el botn principal dentro de un grupo de botones -->
<button type="button" class="btn btn-primary">Destacado</button>

<!-- Indica una accin exitosa o positiva -->

<button type="button" class="btn btn-success">xito</button>

<!-- Botn pensado para los mensajes con alertas informativas -->
<button type="button" class="btn btn-info">Informacin</button>

<!-- Indica que hay que tener cuidado con la accin asociada al botn -->
<button type="button" class="btn btn-warning">Advertencia</button>

<!-- Indica una accin negativa o potencialmente peligrosa -->

<button type="button" class="btn btn-danger">Peligro</button>

<!-- Resta importancia al botn hacindolo parecer un simple enlace,

aunque conserva tu comportamiento original de botn -->
<button type="button" class="btn btn-link">Enlace</button>

As se ve este ejemplo en tu navegador:

Normal Destacado xito Informacin Advertencia Peligro Enlace

Y esta es la imagen del aspecto que debera tener este ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 2/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

Figura 5.17 Botones en Bootstrap 3

5.8.1. Botones de diferente tamao

Cuando necesites crear botones ms grandes o ms pequeos que el tamao estndar, utiliza las clases .btn-lg (grande),
.btn-sm (pequeo) y .btn-xs (extra pequeo). Ejemplo:

<p>
<button type="button" class="btn btn-primary btn-lg">Botn grande</button>
<button type="button" class="btn btn-default btn-lg">Botn grande</button>
</p>
<p>
<button type="button" class="btn btn-primary">Botn normal</button>
<button type="button" class="btn btn-default">Botn normal</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Botn pequeo</button>
<button type="button" class="btn btn-default btn-sm">Botn pequeo</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Botn extra pequeo</button>
<button type="button" class="btn btn-default btn-xs">Botn extra pequeo</button>
</p>

As se ve este ejemplo en tu navegador:

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 3/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

Botn grande Botn grande

Botn normal Botn normal

Botn pequeo Botn pequeo

Botn extra pequeo Botn extra pequeo

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 5.18 Botones de diferente tamao en Bootstrap 3

Tambin puedes convertir el botn en un elemento de bloque para hacer que ocupe toda la anchura del elemento en el que se
encuentre. Para ello, aade la clase .btn-block . Ejemplo:

<button type="button" class="btn btn-primary btn-lg btn-block">Botn de bloque</button>

<button type="button" class="btn btn-default btn-lg btn-block">Botn de bloque</button>

As se ve este ejemplo en tu navegador:

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 4/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

Botn de bloque

Botn de bloque

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 5.19 Botones de bloque en Bootstrap 3

5.8.2. Botones activados

En ocasiones puede ser til mostrar un botn con el aspecto de haber sido presionado, es decir, con un color de borde y un
color de fondo un poco ms oscuro y una sombra que imite la presin del botn. 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 botn
muestre el aspecto presionado, aade la clase .active . Ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 5/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

<button type="button" class="btn btn-primary btn-lg active">Botn principal</button>

<button type="button" class="btn btn-default btn-lg active">Botn</button>

As se ve este ejemplo en tu navegador:

Botn principal Botn

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 5.20 Botones activados en Bootstrap 3

5.8.2.2. Activando los elementos <a>

Aade 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:

Enlace principal Enlace

Y esta es la imagen del aspecto que debera tener este ejemplo:

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 6/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

Figura 5.21 Enlaces activados en Bootstrap 3

5.8.3. Botones desactivados

Cuando quieras mostrar al usuario un botn 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>

Aade el atributo disabled para dar un aspecto desactivado a los elementos <button> . Ejemplo:

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Botn principal</button>

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Botn</button>

As se ve este ejemplo en tu navegador:

Botn principal Botn

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 5.22 Botones desactivados en Bootstrap 3

ADVERTENCIA
http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 7/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

Cuando se aade el atributo disabled a un elemento <button> , el navegador Internet Explorer 9 y sus versiones anteriores
muestran el texto de botn en color gris y con una sombra bastante fea que no se puede cambiar.

5.8.3.2. Desactivando los elementos <a>

Aade 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:

Enlace principal Enlace

Y esta es la imagen del aspecto que debera tener este ejemplo:

Figura 5.23 Enlaces desactivados en Bootstrap 3

NOTA
La clase .disabled solamente modi ca el aspecto de los elementos <a> , pero no su funcionalidad. Para deshabilitar
realmente los enlaces, tendrs que utilizar cdigo JavaScript.

5.8.4. Etiquetas para botones

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 8/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

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">Botn</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:

Enlace Botn Campo input Enviar

Y esta es la imagen del aspecto que debera 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 prctica recomendada consiste en utilizar
el elemento <button> siempre que sea posible, ya que es el que ofrece un aspecto ms homogneo 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.

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 9/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

Anterior Siguiente
5.7. Mensajes de ayuda Captulo 6. Componentes

(../capitulo_5/mensajes_de_ayuda.html) (../capitulo_6.html)

INDICE DE CONTENIDOS

1. Primeros pasos (../capitulo_1.html)

2. Diseando con rejilla (../capitulo_2.html)

3. Tipografa (../capitulo_3.html)

4. Elementos CSS (../capitulo_4.html)

Captulo 5. Formularios (../capitulo_5.html)

5.1. Formulario bsico (../capitulo_5/formulario_basico.html)

5.2. Formulario en lnea (../capitulo_5/formulario_en_linea.html)

5.3. Formularios horizontales (../capitulo_5/formularios_horizontales.html)

5.4. Campos de formulario (../capitulo_5/campos_de_formulario.html)

5.5. Estados de formulario (../capitulo_5/estados_de_formulario.html)

5.6. Redimensionando campos de formulario (../capitulo_5/redimensionando_campos_de_formulario.html)

5.7. Mensajes de ayuda (../capitulo_5/mensajes_de_ayuda.html)

5.8. Botones (../capitulo_5/botones.html)

6. Componentes (../capitulo_6.html)

7. Plugins de JavaScript (../capitulo_7.html)

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 10/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

2006-2017 LibrosWeb.es Contacto (/sitio/contacto) Novedades (https://plus.google.com/+librosweb) Condiciones (/sitio/condiciones) Privacidad

(/sitio/privacidad)

3.952
das online

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 11/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 12/13
7/10/2017 5.8. Botones (Bootstrap 3, el manual oficial)

http://librosweb.es/libro/bootstrap_3/capitulo_5/botones.html 13/13