Bootstrap llegó para ayudarnos !!
Bootstrap, es un increíble framework que hace que el desarrollo web front-end sea más rápido y más fácil. Está hecho para la gente de todos los niveles, los dispositivos de todas las formas, y para proyectos de todos los tamaños.
Inicialmente fue creado como una solución interna para Twitter y posteriormente fue liberado al público en agosto del 2011 como un proyecto Open Source en GitHub.
Para usar Bootstrap en nuestros proyectos podemos hacerlo de diferentes maneras, ya sea agregando el código CDN a nuestro HTML para usarlo de manera remota o descargando bootstrap de su página web. Si utilizas las opción de descargar bootstrap, deberás descomprimir y agregar las carpetas a tu proyecto para que funcione, además de linkear los archivos de bootstrap y jquery para que los plugins funcionen correctamente.
Algo así:
Ahora que estamos listos para usar Bootstrap sólo tenemos que usar las clases que nos brinda Bootstrap para dar algunos estilos a nuestro HTML, escribiendo en este caso muy poco CSS.
Aquí listo algunas clases más usadas de Bootstrap, con su respectiva funcionalidad:
GLYPHICONS
Bootstrap incluye 180 íconos creados mediante una fuente especial llamada Glyphicon Halflings.
Para añadir un ícono en cualquier elemento de la página, utiliza el siguiente código como ejemplo:
Y no olvides añadir un espacio entre el ícono y el texto para que se vea mejor.
MENÚS DESPLEGABLES
Menú contextual desplegable que muestra una lista de enlaces. Es necesario tener linkeado el JavaScript plug-in.
BOTONES
Se pueden aplicar tanto a enlaces como a etiquetas button/input simplemente usando la clase .btn. Así podemos distinguir el propósito de cada botón con los distintos estilos prefijados o variar su tamaño.
MENÚS DESPLEGABLES DESDE UN BOTÓN
Se utiliza la clase .btn-group y dentro la clase .dropdown para activar un menú desplegable en un botón.
GRUPOS DE ENTRADA
Utilice .input-group con un .input-group-addon (para añadir texto) o con .input-group-btn (para la adición de botones).
Aquí un ejemplo:
Y aquí el resultado:
ELEMENTOS DE NAVEGACIÓN
Bootstrap define varios elementos de navegación que comparten el mismo código HTML y la misma clase base .nav
BARRAS DE NAVEGACIÓN
Los Navbars son componentes “sensibles” a los diferentes anchos de página, sirven como cabeceras de navegación para el desarrollo de tu aplicación o sitio web. Esta clase nos permite ocultar ciertos elementos navbar en determinados tamaños de pantalla también podemos obtener el conocido “menú hamburguesa” de manera automática.
PAGINATION (Navegar entre páginas)
El componente de paginación debe ser envuelto en un <nav> elemento para identificarlo como una sección de navegación. Además, como es probable que una página tenga más de una sección de navegación (navegación en la cabecera, o una barra lateral de navegación), es recomendable proporcionar un descriptivo aria-label para el <nav>. Añadimos la clase .pagination para la navegación o los resultados de búsqueda.
ETIQUETAS
Añadir la clase .label para generar un etiqueta y resaltar contenido.
THUMBNAILS (Contenido reducido)
Los Thumbnails aparte de incluir imágenes, nos permite añadir cualquier tipo de contenido HTML como encabezados, párrafos, o botones en miniaturas.
A continuación un segmento de código que muestra la estructura de un Thumbnail:
Aquí el resultado:
ALERTAS
Proporcionar mensajes de información de alerta como éxito (.alert alert-success), información (.alert alert-info), advertencia (.alert alert-warning) o peligro (.alert alert-danger), para un distinto contexto con diseño flexibles.
BARRAS DE PROGRESO
Las barras de progreso están definidas por la clase .progress.
VIDEO RESPONSIVE
Permite que las dimensiones de vídeo se adapten adecuadamente en cualquier dispositivo en base a la anchura de su contenedor.
Las reglas se aplican directamente a elementos como <iframe>, <embed>, <video>, y <object>.
