Frameworks para CSS: Bootstrap

Actualmente para diseñar cualquier página web se necesita utilizar los estilos o reglas CSS. Las reglas permiten crear páginas web que se adaptan perfectamente el entorno en que se estén viendo: Son básica para el diseño responsive.

Las reglas de estilo se pueden usar directamente editandolas mediante el pseudolenguaje CSS. Si las usas mucho lograras crear reglas CSS prácticamente de memoria.

Pero son muchas las prpiedades y valores utilizables y nosiempre es sencillo memorizarlo todo o andar consultando cada vez que quieras hacer algo. Por eso existen también frameworks aplicados a los estilos CSS: una especie de librerías de reglas predefinidas aplicables a las situaciones habituales al generar páginas web: cuadros con imégnes, barras de navegación, barras laterales....

El frame works más conocido actualmente es el Bootstrap, aunque existen otros como yogurtcss, Foundation o W3.CSSentre otros.

Bootstrap

De todos los frameworks CSS quizás el más conocido y usado see Bootstrap, que en el momento de publicar este artículo (enero 2021) se encuentra en la versión 5, que entre otras mejors deja de depender de jQuery.

Bootstrap es un conjunto de estilos CSS predefinidos que simplifica la maquetación de cualquier página.

Todas las definiciones se basan en un diseño pensando en las pantallas de los móviles, con lo que se logra un diseño responsive prácticamente garantizado.

Aunque se fuerte es el CSS, también utiliza javascript para algunas utilidades básicas como los accordions o el carrusel.

El uso de Javascript no es imprescindible, pero puede facilitar las cosas, además de poner a disposición del desarrollador herramientas como ventanas popup o animaciones más elaboradas.

Este framework se puede usar de dos maneras:

Código fuente: Partiendo del código fuente de las hojas de estilo en lenguaje Sass y javascript. Estos archivos de deben compilar (digamos traducir) para obtener los archivos CSS y javascript aceptados por los navegadores.
Para esta tarea se necesitan algunas herramientas adicionales y permiten personalizar Bootstrap a cada caso particular.
Es el camino recomendable para crear temas en este framework

Precompilado: Es la forma más sencilla de utilizar Botostrap. Simplemente se trata de utilizar los archivos CSS y Javascript ya compilados, como cualquier otro archivos de estilos o scripts.

En cualquier caso al final tendremos una colección de reglas que se pueden usar en la página web mediante las habituales etiquetas class. Por supuesto se pueden seguir usando clases definidas por nosotros o incluso redefinir las reglas provistas por Bootstrap.

Para usar estas librerias de estilo CSS no se necesita ningún programa especial, cualquier editor usado para las páginas web te sirve para incorporar este framework. Recuerda que no es más que un archivo de hojas de estilo CSS y uno con añadidos de javascript (que puedes usar o no).

Un ejemplo muy simple para tener una barra de navegación

<html>

<head>

</head>

<body>

<a class="nav-link active" href="#">Destino uno</a>

</li> <li class="nav-item">

<a class="nav-link" href="#">Destino dos</a></li>

<a class="nav-link" href="#">Destino tres</a>

</li>

</ul>

</body></html>

Un fragmento del código para insertar un elemento con estilos Bootstrap

En este ejemplo se usa una copia local del archivo css de bootstrap, aunque puedes usar una copia de ambos archivos alojada en la nube, como el CDN de JSdelivr.net https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css recomendando en el sitio oficial.

En el ejemplo no se coloca el javascript de Bootstrap, pero también puede incluirse de forma local o desde la CDN indicada. Si usas javascript con una versión de Bootstrap anterior a la 5 necesitas enlazar también la librería jQuery.

Para tener siempre veisiones actualizadas visita este sitio oficial de Bootstrap

La estrategia usada por este framework es pensar pimero en el móvil (mobile-first). Cualquier tamaño o posicionamiento que dependa o esté influida por el tamaño de la ventana tiene su valor por defecto pensado para pantallas pequeñas. Lógicamente se puede modificar para diferentes tamaños. Bootstrap considera 5 tamaños de pantalla (conocidos como breakpoint en el framework):

XS: extra pequeña anchos menores de 576px
SM: pequeña, anchos hasta 768px
MD: medianas, anchos hasta 992px
LG: grande, anchos hasta 1200px
XL: extragrandes, acnhos por encima de 1200px

Conocer esta segmentación es importante a lo hora de adaptar el contenido al tamaño de pantalla. Por ejemplo puedes tener una imagen que no se muestre en pantallas pequeñas (xs, sm) pero que se vea a partir de pantallas medianas (md). La regla para esto en CSS puro sería display:none para ocultar y display:block para mostrarla como un bloque y tendrías de escribir una regla en función del tamaño de pantalla (@media).

Veamos como en Bootstrap se usa la clase d-none y d-block junto a la segmentación citada

<html>

<head>

</head>

<body>

</body>

</html>

Ejemplo de ocultación responsive

Prueba el código y verás que al disminuir el tamaño de la ventana de resultado la imagen desaparece por debajo de 768px. Pero lo interesante aquí es que te fijes en el sistema d-none, sería display:none por defecto. d-md-block sería aplicar display:block a partir de pantallas medians (MD). Este sistema se usa en otros propiedades como flex, float o table.

Por lo demás el sistema de reglas se encarga de que el diseño sea responsive y se adapte al tamaño de pantalla prácticamente sin codificar nada. Como en este otro ejemplo de imagen responsive:

<head>

</head>

<body>

<img src="/baul/imgresp.jpg"

class="img-fluid" style="max-width: 100%; height: auto;">

</body>

</html>

Ejemplo de imagen responsive

Prueba en el sandbox y comprueba com se adapta al tamaño de la ventana disponible. Es un ejemplo en el que combinamos Bootstrap con estilos propios (style)

Pros y contras

En este apartado es aplicable lo que se dic en el post dedicado a los CMS. Los pros y los contras como es natural son relativos. Si conoces muy bien node y el pseodo lenguaje Sass la personalización será fácil para tí, en caso contrario no tanto.

Por supuesto quizás para crear unas pocas páginas de manera puntual, quizás aprender Bootstrap no te sea rentable, mientras que si te dedicas al desarrollo web de forma profesinal pues la tarea de aprendizaje es un trabajo bien invertido.

Pros

Rapidez: Se puede conseguir una página web acabada y con muy buen aspecto en muy poco tiempo.
Responsive: La filosofía de trabajo de Bootstrap es mobile-first : por defecto la pantalla es la de un dispositivo móvil. Esto hace que se obtengan páginas responsive (adaptables) de manera sencilla.
Consistencia: Los resultados son similares con cualqueir navegador.
Documentación Está muy bien documentado, aunque en inglés
Plantillas. Al ser un framework muy utilizado también existen muchos creadores que han diseñado temas o plantillas basadas en esta plataforma.
Editores: existen editores para crear páginas con Bootstrap, que incluso permiten personalizarlo. Entre otros están bootstrap.io, Pingendo o Pinegrow.
Comunidad. Son muchos los usuarios que desarrollan con este framework por lo que no es difícil encontrar soluciones a los problemas que se encuentren aplicando los estilos y utilidades de Bootstrap

Contras

Aprendizaje Es necesario aprender las numerosas etiqueas de clase que incorpora
Tamaño Implica unos archivos de tamaño considerable que pueden afectar a la rapidez de nuestras páginas, y el consecuente efecto SEO
Impersonalización. Las páginas desarrolladas con los estilos Bootstrap terminan pareciéndose entre sí, con lo que pierden la personalización
Selectores muy específicos Para cambiar un estilo tienes que cambiar la clase en todos los lugares de la página donde aparezca.
Personalización Compilar y personalizar las hojas CSS de Bootstrap es un trabajo de expertos. Exige trabajar con nodeJS y compiladores extras.

Recursos

Aquí te dejo algunos recursos útiles para seguir explorando el mundo Bootstrap

El sitio oficial donde puedes descargar y consultar la documentación
El editor Bootstrapstudio, que soporta Sass (archivos scss)
Otro editor es Pinegrow, que también soporta Sass además de Less (otro pseudo lenguaje CSS)
Un editor con versión gratuita es Pingendo, también admite la extensión Sass
Si quieres plantillas gratis visita Startbootstrap
Manual en español de Sass por si quieres compilar tu propio Bootstrap