Aunque he utilizado mucho el framework PureCSS, lo cierto es que estoy cayendo en la trampa de Twitter Bootstrap (TB) …. demasiado bueno cómo para no usarlo! Desde que os presenté TB hasta hoy, ha pasado caso un año, y … las cosas han mejorado bastante, facilitando muchísimo la vida al desarrollador. Aquí teneis un buen tutorial (en inglés).
Reconozco que utilizar TB es cómodo, aunque hay que conocer muy bien todas las posibilidades …. yo aún estoy en ello. En parte estoy aumentando mis conocimientos gracias al libro Bootstrap 3, el manual.
También quiero recomendar una versión muy atractiva de Bootstrap: Material design for Bootstrap, que está escrita con la versión 3.
Botones
En una entrada sobre PureCSS ya comentamos las distintas clases para hacer botones, y lo mismo aplica con TB. La clase btn es la principal, a la que hay que acompañar con otra clase, cómo btn-default, o btn-primary, btn-success, btn-info, btn-warning o btn-danger, entre otras … para darle apariencia.
El resultado lo podeis ver aquí.
Respecto a los tamaños de los botones, también pueden ser cambiados usando las clases: btn-lg para grande, btn-sm para pequeño, y btn-xs para extra pequeño.
La clase active es la que hay que incluir también para enfatizar el botón. Y se pueden desabilitar con el atributo disabled=”disabled” si usas la etiqueta <button>, mientras que con la etiqueta <a> sí que podemos incluir la clase disabled (además de incorporar role=”button”)
La comparación entre PureCSS y Bootstrap respecto a los botones es que ambas son muy fáciles de utilizar, y en ambos casos suelen usarse dos clases: una para indicar que queremos un botón, y una segunda para darle el aspecto.
Para hacerte más fácil el código, aquí una interesante propuesta para generar botones para TB: http://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php.
Glyphicons
Glyphicons son iconos que incluye Bootstrap, y que se pueden llamar usando clases dentro de etiquetas span. Un ejemplo:
<span class=”glyphicon glyphicon-eur“></span>
Muy simple. El listado de iconos disponibles los tienes aquí.
Solapas (Tabs)
La creación de solapas usando jQueryUI es bastante sencilla, y tras leer las siguientes líneas, comprenderás que es igual que fácil con Bootstrap. Sólo tienes que ser un poco ordenado. Todo tiene lugar dentro de un DIV contenedor (aplicamos la clase container), y en el que necesitamos definir dos contenedores dentro: uno con las cabeceras de las solapas, y otra con los contenidos de cada solapa. El vínculo entre la solapa seleccionado y el contenido a mostrar se realiza desde la propiedad href.
</p> <p><section class="container"><br /> <div id="tab_resultados"><br /> <ul class="nav nav-tabs"><br /> <li class="active"><a data-toggle="tab" href="#ver-tab1">Tab 1</a></li><br /> <li><a data-toggle="tab" href="#ver-tab2">Tab 2</a></li><br /> <li><a data-toggle="tab" href="#ver-tab3">Tab 3</a></li><br /> </ul><br /> <div class="tab-content"><br /> <div id="ver-tab1" class="tab-pane fade in active"><br /> <p>Info de Tab 1</p><br /> </div></p> <p><div id="ver-tab2" class="tab-pane fade"><br /> <p>Info de Tab 2</p><br /> </div></p> <p><div id="ver-tab3" class="tab-pane fade"><br /> <p>Info de Tab 3</p><br /> </div><br /> </div><br /> </div><br /> </section></p> <p>
Cómo puedes comprobar, con un poco de orden es bastante sencillo. Todo el trabajo es desarrollado gracias a las clases nav, nav-tabs y tab-content. Para mostrar el contenido ayudan las clases tab-pane fade.
En lugar de nav-tabs es posible emplear nav-pills para cambiar el formato de visualización de las solapas, aunque el comportamiento es exáctamente el mismo. Puedes comprobar además que he utilizado nav-justified en las solapas de abajo, justificandolas.
Aquí el resultado, de ambos casos lo tienes en la siguiente imagen, y aquí:
Tabs en Bootstrap
Espero que te resulte de interés, y buen día!
Otras entradas sobre Twitter Bootstrap: una introducción, trabajar con tablas.