Bootstrap en 10 minutos

Crear todo desde cero está muy bien. Sin embargo, en ocasiones nos encontramos con clientes que desean una respuesta rápida y eficaz a su requerimiento: Una página web responsive en poco tiempo que cuente con dropdowns, spinners, login, navbar, footer interactivo, slidebars...En este tutorial encontrarás que Bootstrap ofrece una docena de elementos que permitirán que cada trabajo de desarrollo frontend sea más eficiente.

Seamos honestos: CSS puede generar problemas y dolores de cabeza, así que, finalmente, lo han arreglado con Bootstrap, una biblioteca hecha por dos desarrolladores exempleados de Twitter.

Ellos, Mark Otto y Jacob Thornton, se encontraban en la misma situación que tú y yo, lidiando con los problemas de HTML y CSS. Ya agotados de la situación, tomaron la decisión de construir una hoja CSS básica diseñada y que pudiera importarse a cualquier sitio web. Suena genial, ¿no? Justo es lo que hace Bootstrap.

Ahora bien, ¿cómo nos facilita  la vida, sobre todo en el desarrollo frontend? La respuesta está en los sistemas de diseño, porque con Bootstrap no hay que hacer todo desde cero.

Los sistemas de diseño cuentan con un conjunto de reglas sobre espaciado, tipografía, indentación y dividir la pantalla en 12 espacios(o en 6 si son dispositivos móviles), entre otras. Los equipos de diseño maquetan todos los detalles armoniosos para el sitio web y son los desarrolladores quienes deben encargarse de transformar esos diseños en lenguaje de programación para que queden de la misma manera, lo cual puede incurrir en largas horas de trabajo.

Si no se emplean correctamente las propiedades de CSS podemos fácilmente quebrar o romper el diseño. Allí interviene esta librería, que nos ofrece una cantidad de nuevos elementos que no existen en CSS+HTML o que tomaría mucho tiempo en escribir el código. ¿Ves cómo sí ayuda Bootstrap?

En la web hay diversas herramientas para diseñar tu proyecto, donde apreciarás cómo son los sistemas de diseño, el sombreado, el color, los formularios, los botones, los dropdowns, los controles de encendido y apagado, entre otros. Cada detalle y cada componente requieren código en CSS. Como en la actualidad nos enfocamos en ser más productivos y eficaces, no  temas a usar estas herramientas si el fin te permitirá ser más productivo/a y eficaz.

Deberíamos comenzar por diseñar lo que se desea lograr y cómo quieres que se vea la página web, ya sea porque tengas clientes o que quieras hacer tus propios proyectos. Para ello podemos utilizar Figma, Canva, Sketch o Excalidraw. Una vez que cuentas con el diseño o el dibujo de los componentes de tu página web, puedes visitar directamente la página de Bootstrap y crear un archivo HTML con su estructura básica.

¿Vamos bien hasta aquí? Continuemos entonces. Sabemos que trabajar con float, display y position es algo que falla en CSS, pero Bootstrap lo resolvió. Los desarrolladores y creadores de esta librería replicaron el concepto que tenía <table>, solo que en lugar de usar tablas, emplearon <div> (contenedores en caja). En Bootstrap, los contenedores se denotan con la clase container  y nos sirven para referirnos a un elemento que va a contener a muchos más dentro de él.

Bootstrap tiene contenido interesante. ¿Recuerdan que les hablé arriba de la responsividad? La responsividad es que nuestro código ya renderizado se vea bien y bonito en diferentes tamaños de pantalla sin que haya un punto de quiebre. Con Bootstrap nos ahorramos los media queries, esa funcionalidad HTML/CSS que permite que el contenido de una página web se adapte al tipo de medio en el que se representa la página. Eso lo provee Bootstrap con su responsividad.

Bootstrap divide el ancho de la pantalla en 12 espacios, donde el tamaño de 1 columna estaría entre 1 y 12 ranuras. En el mismo orden, las columnas se han creado para vivir dentro de las filas, tal como sucede con <td> y <tr>. Se necesitará siempre abrir una fila antes de abrir una columna y todas las columnas en una fila deben sumar un máximo de 12 espacios.

No te aburras, ya viene la parte divertida, ¡lo prometo! Bootstrap es 100% responsive ya que es muy fácil decidir cómo se desea representar un sitio web en los diferentes tamaños de pantalla. Cuando agregues cada columna a las filas, debes asignar una clase con el siguiente formato:

Muy bien. Ahora te explico los detalles de lo anterior.

Col significa que este elemento debe comportarse como una columna de Bootstrap. Por su parte, md se refiere al tamaño mediano de la pantalla, por lo que solo aplicarán los dispositivos con esa característica. Por último, especifica cuántos espacios tomará  la columna, recordando que se puede tomar un máximo de 12 espacios por fila.

Los tamaños de dispositivos de Bootstrap son los siguientes:

Teléfonos: Nothing.

Teléfono grande / tablet pequeña: sm.

Tablets: md.

Computadora de escritorio: lg.

Computadores de escritorio extragrande: xl.

Extra extra grande: xxl.

Estructura básica de Bootstrap 5

Si estás viendo este tutorial es porque, posiblemente, ya conoces cómo es la estructura de HTML5 que todo sitio web debe tener. Entonces, el siguiente paso consiste en que ya teniendo nuestra estructura, nos quedarían por agregar algunas líneas de código para que, de esa forma, sean compatibles con Bootstrap.

Estas líneas las encontraremos en el sitio oficial de Bootstrap. Bajamos hasta el apartado donde dice Include via CDN, que no es más que incluir esta librería a través de CDN (Content Delivery Network) o, en español, una red de entrega de contenido.  Lo anterior significa que es un grupo de servidores distribuidos geográficamente que almacenan contenido caché cerca de los usuarios finales.

Una CDN permitirá una rápida transferencia de activos necesarios para cargar el contenido a internet. Allí se incluyen páginas HTML, hojas de estilo, imágenes, vídeos, entre otros. Este Bootstrap que importamos está alojado en internet y podemos acceder a él como un recurso en la nube.

A continuación haremos un Hello World y luego profundizaremos en algunos de los componentes que nos ofrece esta herramienta.

Debemos recordar que Bootstrap es solo una hoja de estilos. Dada esa razón, es sencillo incluirla en tu web (como hicimos en la imagen anterior). En este punto, utiliza la etiqueta <link> para incluir los estilos.

Los sitios webs de la actualidad tienen íconos, barras de carga, barras de navegación, etiquetas, menús desplegables, spinners, modales, carruseles y más. Sabemos que HTML tiene solo unas pocas etiquetas y, para hacer uso de menús, íconos o etiquetas tendríamos que usar HMTL + CSS. Es por ello que Bootstrap está para ayudarnos y evitar usar CSS. Al importar Bootstrap a tu sitio web, tendrás una gran cartera de nuevos conjuntos de componentes.

Los componentes más importantes y usados

NavBar

En casi todos los sitios web vas a conseguir un Navbar. Dependiendo del diseño y la lógica comercial de cada sitio web, el NavBar es donde normalmente estará el logotipo de la empresa, enlaces, menús desplegables, opción de Login y Sign up.

Veamos un ejemplo de cómo puede verse un Navbar en un sitio web.

El código realizado en las imágenes anteriores corresponden al Navbar mostrado arriba. Podemos observar tanto en código como en renderización del código la distribución del contenido, utilizando las clases que nos genera el componente de Navbar.

Card

Card o la tarjeta es uno de los componentes más utilizados. Las tarjetas son perfectas para darle armonía a los artículos. Algunos ejemplos de Card o tarjetas los puedes ver en Pinterest o en el feed de cualquier red social como Instagram, Facebook o Twitter.

Veamos un ejemplo de una Card o Tarjeta en un sitio web.

Una tarjeta o Card es un contenedor de contenido flexible y ampliable. Una Card incluye opciones para encabezados, pies de página, colores de fondo, variedad de contenido. En estas tarjetas podríamos colocar fácilmente un producto (si es el caso), su descripción y un botón que nos lleve a una acción como comprar, adquirir, más información o alguna otra.

Carrusel

El carrusel es un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto).  El carrusel se utiliza generalmente debajo del navbar para indicar al usuario más información acerca de su página web y lo que encontrará en ella.

Veamos un ejemplo:

Ahora veamos cómo se ve el carrusel al momento de renderizar nuestro código. Los componentes aquí mostrados se pueden estudiar a profundidad en la página oficial de Bootstrap.

Conclusión

Ahora que ya saben los fundamentos de Bootstrap, es momento de que profundicen un poco más y hagan sus páginas web más dinámicas, responsivas y en poco tiempo. Como experiencia personal, esta herramienta ha sido parte de mis proyectos, motivo por el que la recomiendo con ustedes. Si desean practicar, diríjanse a un sitio web que les guste e intenten diseñarlo con Bootstrap. De esta manera aprenderás  mucho más.

La documentación de Bootstrap es bastante comprensible. Lo ideal es comenzar sin  copiar y pegar los componentes, sino comprenderlos y sacarles el mejor provecho. Por eso los invito a que si se encuentran interesados/as en aprender, pueden leer algunos temas como: Formas de estilo, sistema de cuadrícula, lista de componentes disponibles para usar tu sitio web, clases auxiliares, etc. Estas últimas son de mucha utilidad porque se usan constantemente para asuntos como centrar texto, centrar un contenedor o columna, agregar fondos, entre otros.

Bootstrap cuenta con muchas versiones. Verifica siempre que uses la más reciente en tu proyecto porque, en ocasiones, cuando existe alguna nueva actualización algunos componentes ya han sido removidos o modificados.

¡Hasta pronto!