Crea tu web, tutor html, css
Bootstrap: framework css

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-beta

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, utiliza jQuery para algunas utilidades básicas. Auqneu al parecer la nueva versión va a eliminar esta dependencia y incorporará utilidades javascript propias.

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. 
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 los style en linea o 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>
<link rel="stylesheet" href="/baul/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Destino uno</a>
</li> <li class="nav-item">
<a class="nav-link" href="#">Destino dos</a></li>
<li class="nav-item">
<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 pPuedes 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 necesitas enlazar también la librería jQuery (al menos hasta la versión 4.5)

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:

  • 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>
<link rel="stylesheet" href="/baul/bootstrap.min.css">
</head>
<body>
<img src="/baul/bs.jpg" class="d-none d-md-block">
</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:

<html>
<head>
<link rel="stylesheet" href="/baul/bootstrap.min.css">
</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 aplicnado 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
  • Personalización Compilar y personalizar las hojas CSS de Bootstrap es un trabajo de expertos. Exige trabajar con Node 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