Bootstrap 3: Botones, labels y alerts

Vamos a hablar sobre los Botones, labels y alerts de Bootstraps 3.

Botones

Los botones en bootstrap 3 se crean simplemente creando un enlace con la clase “btn” y se agrega una clase extra para el color del boton la cual puede ser: blanco “btn-default”, azul “btn-primary”, amarillo “btn-warning”, verde “btn-success”, rojo “btn-danger”,celeste “btn-info”.

Los botones se pueden crear con las etiquetas a, button e input, segun sea el caso, el uso es el mismo solo basta incluir el atributo class y su valor correspondiente.

[code language=”html”] <a href="" class="btn btn-default">Your button</a>
<a href="" class="btn btn-primary">Your button</a>
<a href="" class="btn btn-success">Your button</a>
<a href="" class="btn btn-warning">Your button</a>
<a href="" class="btn btn-danger">Your button</a>
<a href="" class="btn btn-info">Your button</a>
[/code]

Tamaños

A los botones también se les puede definir un tamaño, para ello se anexan las clases: normal “btn-md”, chica “btn-sm”, extrachica “btn-xs”, grande “btn-lg”.

La clase “btn-md” es el tamaño por default, aunque no se especifique el tamaño.

[code language=”html”] <a href="" class="btn btn-default btn-sm">Your button</a>
<a href="" class="btn btn-default btn-xs">Your button</a>
<a href="" class="btn btn-default btn-lg">Your button</a>
[/code]

Labels

Los labels o etiquetas se usan normalmente para especificar o resaltar textos de cierta importancia en nuestra aplicación web.

Para los labels se puede utilizar la etiqueta span o div y se usa la misma nomenclatura de colores que en los botones, solo que en lugar de “btn” se usa “label”.

[code language=”html”] <span class="label label-default">Your label</span>
<span class="label label-primary">Your label</span>
<span class="label label-success">Your label</span>
<span class="label label-warning">Your label</span>
<span class="label label-danger">Your label</span>
<span class="label label-info">Your label</span>
[/code]

El resultado seria algo similar a lo que se ve en la imagen superior.

Alerts

Las alertas se utilizan para expresar mensajes.

Se pueden crear usando la etiqueta div, span o p, la nomenclatura es similar, solo que no existe “primary” ni “default”, tambien se hace uso del atributo role=”alert”.

[code language=”html”] <div class="alert alert-warning" role="alert">Your alert</div>
<div class="alert alert-success" role="alert">Your alert</div>
<div class="alert alert-info" role="alert">Your alert</div>
<div class="alert alert-danger" role="alert">Your alert</div>
[/code]

Conclusión

Estos componentes le dan un nuevo sabor a las aplicaciones web y a la experiencia del usuario, fácil mente se puede entender los colores azul primary y verde success como operaciones exitosas, amarillo warning como advertencias y rojo danger como peligro o error.

Para tu próxima aplicación web no olvides de usar bootstrap y sacar el máximo provecho utilizando estos y otros componentes.