1) Introducción. ¿Qué es bootstrap?
Bootstrap es una librería CSS, o sea, es un fichero CSS que añades en tus proyectos para tener una serie de estilos ya dispuestos para usar.
Este tipo de librerías CSS suelen incluir estilos para los elementos más comunes de una página web, como por poner un ejemplo, botones, tarjetas, navbars, etcétera Además tiene una serie de estilos para crear columnas fácilmente.
Back to top2) ¿Por qué utilizar Bootstrap? Ventajas
- Facilidad de uso. Lo único que debes hacer es poner clases a elementos HTML.
- Responsive. Perfecto para crear páginas web acomodables a cualquier dispositivo.
- Personalizable. Puedes personalizar su descarga para utilizar los elementos que necesites.
- Gran comunidad. Este framework está muy extendido y si tenemos un problema podremos localizar mucha información en Internet.
3) Descarga y instalación de Bootstrap
Para usar Bootstrap en un proyecto tenemos 2 formas de hacerlo:
3.1) Instalación de forma manual
Para instalar Bootstrap de forma manual lo que tienes que hacer es descargar los ficheros de Bootstrap desde su página web haciendo click en Downloaddentro de Compiled CSS and JS:
Además, para que funcione correctamente tienes que descargar también Jquery y Popper.js, un par de librerías que usa Bootstrap a fin de que funcione adecuadamente.
Jquery: Popper.js:> Botón derecho > “Guardar cómo” y lo descargas.
Una vez descargados todos los ficheros, los tienes que meter dentro de una carpeta en tu proyecto. IMPORTANTE: Si empleas un framwework como React, Vue o Angular no te recomiendo que lo hagas así.
Dentro de la carpeta que te has descargado de Bootstrap hay una carpeta cssy otra carpeta js. En la carpetita csses donde están los estilos y en la carpetita jsel javascript preciso a fin de que ciertos elementos funcionen.
Dentro de la carpeta csstienes que coger el archivo que lleva por nombre botstrap.min.cssque es el que contiene todos y cada uno de los estilos y además está minificado sin espacios para que ocupe menos.
Dentro de la carpeta jstienes que coger el archivo bootstrap.min.js.
Estos dos archivos junto con el fichero js de jqueryy el fichero js de popper.jstienes que meterlos en tu proyecto. Lo aconsejables es meterlos separados para identificarlos mejor, o sea, los ficheros de estilos .cssen una carpetita y los .jsen otra carpetita, eso ya como quieras.
Hecho esto ya puedes importar estos archivos dentro de la sección headde los HTML:
Cuando abras la página, en la sección Networkde las herramientas para los programadores del navegador (para abrirlas puedes pulsar ALT + SHIFT + Io puedes hacer botón derecho> inspeccionar elementodentro del navegador) tienes que repasar que los ficheros que has importado (recarga la página si no te sale nada) los encuentra bien.
Este método es más sencillo pues solo debemos llamar desde en la etiqueta headdel HTML a cada una de los ficheros en la nube y por consiguiente no tienes que descargar nada.
Back to top4) Tutorial bootstrap. Elementos que tiene Bootstrap
A continuación te voy a enseñar los elementos más interesantes y que más va a emplear de Bootstrap. Aún así Bootstrap tiene más elementos de los que te voy a enseñar ya que no me daría un solo artículo para explicarlos todos.
Si deseas personalizar alguno de estos elementos para tu página web, lo que suelo hacer es añadir, detrás de las clases de Bootstrap, mis propias clases para poder sobrescribir los estilos de Bootstrap que no me agraden.
Back to top5) Sistema de grid y contenedores
Estos elementos de Boostrap son los que más me gustan y los que más uso. Muchas veces terminaba usando de Bootstrap solo estos elementos por la gran utilidad que tienen.
5.1) Containers
Lo primero que vamos a ver son los contenedores. Los contenedores como su nombre señala, sirven para crear una “caja” o “contenedor” sobre la que va el contenido de una página web.
Cuando le aplicas a un elemento HTML la clase containerlo que ocurre es que a ese elemento se le aplica un ancho y un padding determinado y además se coloca en el centro de la página web.
Lo que ocurre es que por norma general en las páginas webs no deseas que el contenido primordial de la página web ocupe el 100 por cien de la página en tanto que es muy incómodo para el usuario a la hora de leer que las líneas sean tan largas.
Con este elemento logras reducir el ancho del contenido además de ponerlo en el centro de la página web.
Lo bueno de los containers es que van a ajustar su ancho automáticamente sin que debas hacer nada al ancho de los diferentes elementos para que se vea correctamente,
En el ejemplo de abajo he creado un contenedor con un párrafo sencillamente. Le he puesto un color de fondo a fin de que se vea lo que ocupa el contenedor, aunque el contenedor por defecto es transparente.
5.2) Cómo crear columnas en Bootstrap
Si has trabajado con HTML y CSS con anterioridad entenderás el sufrimiento de tener que crear columnas y que encima se adaptaran de forma responsive. Si bien en los últimos tiempos tenemos flexboxy css gridde forma oficial en CSS sin descargar nada, la verdad es que crear columnas con Bootstrap es todavía más fácil.
Para crear columnas lo primero que debes hacer es crear un elemento HTML padre con la etiqueta row. Esta etiqueta le dice a Bootstrap que el contenido serán columnas.
Otra cosa que debes tener en cuenta es que Bootstrap se basa en un sistema de doce columnas, es decir, teniendo doce columnas en total, si deseas crear dos columnas de igual tamaño, debes crear dos columnas de seis. Si quieres tres columnas tienes que crear tres columnas de cuatro porque 3 * 4 = doce columnas en total.
Veamos un caso creado 2 columnas de igual tamaño:
Como antes, he puesto 2 colores para distinguir, mas las columnas por defecto no tienen background.
Si te fijas, para crear columnas debes utilizar la clase colseguido de otra clase con el ancho que desees del 1 al doce, por ejemplo: col-seis, col-3, col-2, etc.
Otro ejemplo mas ahora con una columna que ocupe más que las otras:
Por cierto, si lo que quieres es que todas y cada una de las columnas de un row tengan exactamente el mismo ancho, no hace falta que especifiques un tamaño, te vale con poner sencillamente la clase cola cada columna.
Las columnas que hemos creado hasta el momento, tienen el un el ancho que especifiquemos en la clase y siempre y en toda circunstancia será exactamente el mismo para todos y cada uno de los dispositivos. Si deseas cambiar el ancho de una columna para determinado dispositivo debes emplear estas clases:
- xsancho de pantalla de más de 576px
- smancho de pantalla de más de 768px
- mdancho de pantalla de más de 992px
- lgancho de pantalla de más de 1200px
Como los estilos se marchan a aplicar desde la medida en píxeles cara arriba, tienes que tomar en consideración que si aplicas un ancho a una columna para los dispositivos sm, también se van aplicar en los mdy en los lg
Por ejemplo, imagina que quieres crear una fila que tenga tres columnas y deseas que en ordenador una de ellas ocupe más, en tablets ocupen lo mismo y en móvil se pongan una debajo de la otra ocupando toda la fila:
Si las columnas en un row suman más de 12 se apilarán unas encima de otras, es decir, si dentro de un row creas cuatro columnas de 6 lo que ocurrirá es que se creasen 2 filas con dos columnas cada una ocupando la mitad.
Back to top6) Elementos funcionales
Los elementos que voy a explicar ahora son elementos que Bootstrap ha decidido darle estilos por defecto para que se vean mejor, es decir, los contenedores y márgenes eran elementos layout que no añadían look and feel y los que hay a continuación tienen ya apariencia visual, colores, bordes, etc.
6.1) Botones de Bootstrap
Para crear un botón tienes que emplear la clase btn. Dentro de los botones bootstrap ha creado una serie de tipos:
Para acrecentar o reducir el tamaño del botón debemos añadir la clase btn-lg, btn-sm, o btn-xsdependiendo del tamaño que deseemos.
6.2) Alertas
Las alertas sirven para enseñar un mensaje al usuario. Como pasa con los botones, las alertas tienen múltiples tipos:
6.3) Breadcrumbs
Los breadcrubs o migas de pan, sirven para mostrar la situación del usuario en una página. Indica al usuario dónde está y de dónde viene:
Dentro de cada elemento de la lista, puedes utilizar la clase activepara señalar a Bootstrap la sección actual sobre la que está el usuario. Además, opcionalmente, puedes usar el enlace hrefpara poner un enlace a la sección.
6.4) Cards
Las cards o bien tarjetas, sirven para agrupar el contenido. Se suelen emplear para crear listas de elementos, por servirnos de un ejemplo, artículos de blog, tweets, colecciones de elementos, etc.
Esta sección en Bootstrap daría para un artículo entero, con lo que voy a ponerte dos ejemplos, si deseas ver todas las posibilidades te dejo el enlace a la sección en la documentación de bootstrap:
6.5) Collapse
Este elemento sirve para moder añadir un botón cuya funcionalidad sea poder ocular y mostrar cierto contenido, es decir, crear elementos colapsables.
6.6) Dropdowns
Los dropdowns o bien multiselect, sirven a fin de que el usuario pueda escoger una opción para un conjunto de posibilidades:
Lo bueno es que puedes usar cualquier botón de los que hemos visto antes.
6.7) Modal
Los popups son ventanas emergentes que se abren cuando el usuario interaacciona con cierto elemento de uan página como un botón o bien un link.
Para que el modal pueda marchar, Bootstrap lo que hace es utilizar la etiqueta de data-toggle(en este caso modal) y de la etiqueta de data-target(en el ejemplo es el id del modal que se crea abajo). Para cerrar el modal se utiliza la etiqueta html de data-dismiss=”modal”. En el modal puedes poner el contenido que quieras.
Como pasa con los cardsde Bootstrap, el navbar también tiene muchas opciones. Lo que voy a poner a continuación es el ejemplo más típico con todas las cosas. Si deseas localizar más información mira este enlace:
Lo bueno del navbar es que ya viene preparado con el típico icono de burger(tres líneas horizontales) que aparece en la versión móvil sin que debas hacer nada.
6.8) Otros elementos que no hemos visto
- : Pequeñas etiquetas para meter texto o bien números
- : Agrupación de botones
- : Agrupación de botones
- : Una de las secciones más extensas de Bootstrap. Tiene todo tipo de elementos para crear formularios. Muy recomendable.
- : Header con información
- : Agrupación de elementos en forma de lista
- : Componente para la creación de elementos repetitivos como tweets, artículos de weblog, etc
- : Popup
- : Lista de links para la navegación de una web
- : Para maquetar la paginación de una web
- : Pequeños popups que aparecen al lado del contenido
- : Barra de progreso
- : Para maquetar áreas scrollables
- : Animaciones de carga
- : Para maquetar notificaciones
- : Ayudas dentro del contenido
7) Otras utilidades
Además de los elementos funcionales y contenedores que hemos visto antes, Bootstrap también ofrece una serie de clases de apoyo que puedes utilizar donde quieras.
7.1) Colores
Bootstrap tiene una serie de clases dispuestas para poder poner colores de manera directa a los textos y colores de fondo. La única queja es que los colores son los que vienen con Bootstrap y si deseas colores nuevos te los tienes que hacer tu a mano:
Colores para textos:
Colores para fondos:
7.2) Sombras
Tambien viene con sombras ya hechas para ser aplicadas rápidamente sin esfuerzo:
7.3) Tamaños
Muy útil cuando precisas poner un tamaño en porcentaje y no deseas crear una clase solo para eso:
7.4) Mostrar y esconder elementos
Para mostrar y esconder elementos de manera sencilla puedes usar estas dos clases:
7.5) Otros elementos que no hemos visto
Como en el apartado de los elementos visuales, me dejo una serie de elementos que también vienen con Bootstrap pero que no los he incluído pues personalmente no los empleo mucho, si bien te pueden venir bien:
- : Para aplicar bordes a elementos
- : Adecentar los floats
- : Icono con la típica “X”para cerrar cosas
- : Para poder añadir propiedades de displayde CSS poniendo solo su etiqueta html
- : Para engastar elementos como vídeos o bien webs dentro de una página
- : Propiedades flex de CSS
- : Propiedades float de CSS
- : Sustituir contenido por una imagen de fondo
- : Propiedades overflow de CSS
- : Propiedades position de CSS
- : Ocultar contenido a los lectores de pantalla
- : Dar espacios y padding entre elementos
- : links que ocupen todo el contenido
- : Clases de ayuda para texto
- : Alineación vertical de elementos
8) Conclusiones
Mi opinión sobre esta clase de librerías CSS es que vienen bien para aprender o bien prototipar, pero para edificar webs profesionales pienso que lo mejor es contruir todo el CSS desde 0. Al final lo que haces es añadir demasiadas clases y estilos que solo están como etiquetas en código HTML y cuando te toque mantener no te acordarás.
Como he dicho de esta clase de frameworks lo que he acabado usando siempre y en toda circunstancia es el sistema de grid y columnas y poco más, el resto de elementos siempre he debido personalizar a mano y para eso no los uso.
Aún así si te ha gustado y quieres seguir aprendiedo acerca de este framework te invito a que busques más información en su página web
Back to top
