¿Qué es Bootstrap? Aprende a usarlo

 

Siempre que desarrollo una página web utilizo este framework y ya era hora de dedicarle una entrada, porque se lo merece.

 

Hablo de Bootstrap, concretamente de la versión 2.3.2 (es la que más he utilizado) un framework de Twitter que incorpora muchas funcionalidades y herramientas muy útiles que seguro que te enamoran.

 

Es bastante sencillo de instalar, solamente basta con descargar los archivos necesarios y colocarlos en nuestro servidor.

 

Y no olvidar de enlazarlos desde el código de nuestra web:

 

Con esto ya tendríamos Bootstrap instalado y listo para funcionar.
Y ahora, ¿Qué beneficios o características me aporta?

 

Scaffolding

 

Un sistema de filas formado por 12 columnas en las que podrás elegir el tamaño de los componentes y que automáticamente se adaptarán a versiones de pantalla más pequeñas (responsive design) como por ejemplo móviles o tablets.

Es sencillo de utilizar, para conseguir esto:

 

El código HTML seria este:

 

Como veis, utilizando la clase span+número asignamos un tamaño de un div en la fila.

 

Puedes leer más información sobre el Scaffolding aquí.

 

Base CSS

 

Clases predefinidas con estilos bastantes atractivos en los que engloban:

• Tipografía: estilos sobre los textos, tabulaciones, colores, tamaños, etc.
• Código: permite añadir código HTML como texto con un fondo resaltado para informar que es código.
• Tablas: filas y columnas con espaciados, colores en diferentes filas para mejorar la visualización…
• Formularios: alineación de botones preparada según para que formularios, de búsqueda, sesión, etc.
• Botones: diferentes estilos para según el tipo de botón, informativo, proceso terminado, advertencias, peligros, links, etc.
• Imágenes: clases predefinidas para redondear o encuadrar las imágenes.
• Iconos: conjunto de iconos más utilizados en las páginas webs.

 

Puedes leer más información sobre el Base CSS aquí.

 

Componentes

 

Decenas de componentes reutilizables diseñados para proporcionar una navegación mejor. Los componentes son:

• Dropdowns: menú contextual para mostrar una lista de enlaces.
• Grupos de botones: como su nombre indica, un grupo de botones que cumplen un objetivo parecido.
• Menú desplegable: un botón que activa un dropdown con una serie de elementos.
• Navs: pestañas para organizar contenido en fichas.
• Navbar: igual que el anterior, pero con un estilo de barra.
• Breadcrumbs: migas de pan, para orientar al usuario en que parte de la web se encuentra.
• Paginación: botones típicos para la funcionalidad de la paginación.
• Etiquetas: para dar un toque diferente a una parte del texto.
• Tipografía: engloba diferentes tipografías para crear cabeceras.
• Miniaturas: muestra miniaturas de imágenes con un tamaño específico.
• Alertas: muestra mensajes en forma de alerta.
• Barras de progreso: una barra con efectos de carga para indicar al usuario que se está realizando una tarea.
• Objetos de medios: ofrece una imagen al lado de texto para añadir estilo a la web.

 

Puedes leer más información y probar los componentes aquí.

 

JavaScript

 

Conjunto de plugins personalizados para dar vida a tus componentes:

• Transiciones: animación de movimiento para los elementos, opacidad, desplazamientos, etc.
• Modales: ventanas en forma de popup con animación incluida.
• Menús desplegables: elementos de menú desplegables desde otro elemento.
• Scrollspy: control del scroll para crear cambios en los componentes de la web.
• Tab: fichas con pestañas con una animación en el cambio entre ellas.
• Tooltip: personalización del title en los elementos.
• Popover: como tooltip pero añade la posibilidad de añadir contenido dentro del globo.
• Alertas: al cerrarlas produce una transición de opacidad.
• Colapso: contrae y expande fichas para mostrar diferentes contenidos.
• Carrusel: slider de imágenes con títulos y textos.
• Typehead: cuadros te texto con función de autocompletado y predicciones.
• Affix: subnavegación que permite hacer scroll hasta un determinado contenido.

 

Puedes probar todas estas animaciones aquí.

 

Te recomiendo que lo pruebes, al principio puede ser un poco lioso, pero si te acostumbras a utilizarlo verás que no es nada complicado y te ahorrará muchísimo trabajo.

Bootstrap continuará lanzando nuevas versiones, prueba siempre la última versión ya que será la más novedosa y este artículo habla concretamente de la 2.3.2 .