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.