¿Sabes qué es Bootstrap 5? Las librerías o frameworks le han facilitado la vida a los programadores. Este es el caso de BootStrap, un framework (creado, en un principio, para Twitter) que ha facilitado la creación de páginas web con sus distintas plantillas y otros elementos.
Si quieres saber qué es Bootstrap 5 y cuáles son algunas de sus opciones de descarga, así como los elementos que la componen, te invitamos a seguir leyendo este artículo.
¿Qué es Bootstrap 5?
El framework bootstrap 5 es una de las versiones recientemente lanzadas del Framework Bootstrap para el desarrollo web. Esta es una de las librerías más conocidas, pues se pueden construir aplicaciones web adaptables para móvil con el CDN de open source jsDelivr y una página con una plantilla de inicio.
Versión 5
En términos de la versión de bootstrap 5, además de algunas mejoras sobre muchas herramientas, se tomaron decisiones relacionadas al uso y a la aplicación del framework. Por ejemplo, esta versión no es compatible con Internet Explorer ni con Jquery. Asimismo, se integraron con el generador de sitios web estáticos Hugo, dejando de lado a Jekyll.
Por otro lado, se agregaron variables CSS, perfeccionaron el Grid CSS y se permitió añadir una nueva API de interfaz con Sass, donde puedes incluir tus propias herramientas.
Elementos de Bootstrap
El bootsrapt 5 está compuesta de varios elementos que la convierten en un framework mucho más completo e interesante para los desarrolladores web. Algunos de estos elementos son:
- El bootstrap5 precompilado que aparece una vez descargado y descomprimido el archivo de descarga de la librería.
- Todos los archivos CSS que puedas imaginar: utilities, grid, reboot.
- Todos los archivos JS compilados.
- El Bootstrap source code.
En términos programables de la librería, encontrarás:
- Elementos con cambios específicos de la hoja de estilos CSS en forma de Reboot.
- Documentación y ejemplificación de las tipografías nativas de este framework.
- Documentación y ejemplo para un uso de imágenes óptimo y con un comportamiento receptivo.
- Documentación y ejemplos para el uso opcional de tablas y su estilo.
- Documentación y ejemplos para el uso de figuras sobre el display.
Las diferentes versiones de bootstrap: un análisis comparativo
| Versión | Año / Última actualización | Compatibilidad y dependencias | Características principales | Diferencias con v5 |
|---|---|---|---|---|
| v1.x | 2011-2012 (v1.4.0) | – jQuery obligatorio.- Compatibilidad con IE7+. | – Sistema básico de grid.- Soporte básico de tipografías y estilos.- Inicialmente diseñado para Twitter. | – Sin soporte modular.- Sin preprocesadores como LESS o Sass.- No había variables CSS ni compatibilidad con navegadores modernos. |
| v2.x | 2012-2013 (v2.3.2) | – jQuery obligatorio.- Compatibilidad con IE8+. | – Introducción de más componentes (navbar, dropdown, modals).- Sistema de grid mejorado.- Aparición de los íconos Glyphicons. | – Sin flexbox.- Grid menos versátil comparado con v5.- Dependencia total de jQuery y soporte para IE. |
| v3.x | 2013-2015 (v3.4.1) | – jQuery obligatorio.- Compatibilidad con IE8+. | – Diseño mobile-first.- Uso de LESS como preprocesador CSS.- Grid responsivo más sólido. | – Sin flexbox.- Uso de LESS en lugar de Sass.- Dependencia de jQuery para plugins interactivos. |
| v4.x | 2016-2021 (v4.6.2) | – jQuery y Popper.js.- Compatibilidad con IE10+. | – Migración a Sass.- Sistema de grid con flexbox.- Mayor personalización con utilidades CSS.- Documentación mejorada. | – Sigue dependiendo de jQuery.- Variables CSS limitadas.- Menos flexibilidad en la personalización comparado con v5. |
| v5.x | 2021-actualidad (v5.3.3) | – JavaScript nativo.- No compatible con IE.- Popper.js opcional. | – Eliminación de jQuery.- Variables CSS (custom properties).- Grid CSS más avanzado.- Compatibilidad con navegadores modernos. | – Es la versión más avanzada y no depende de frameworks o navegadores antiguos.- Uso mejorado de Sass y personalización dinámica. |
Algunos aspectos a tener en cuenta
- Compatibilidad: Las versiones anteriores a bootstrap 5, es decir, v1-v4, solo se enfocaban en brindar soporte para navegadores antiguos, como lo era el internet explorer. Después de la versión de bootstrap 5 se abandona este enfoque para adaptarse de forma exclusiva a navegadores modernos.
- Dependencia de jQuery: El JQuery era un requisito de caracter obligatorio desde las versiones 1 hasta la 4. En bootstrap 5 se reemplaza por JavaScript nativo, esto mejora el rendimiento y reduce la carga de dependencias externas.
- Sistema de Grid: El sistema de grid de bootstrap 5 evolucionó del siguiente modo:
- Desde un sistema básico en v1 y v2.
- Adopción de responsive design mobile-first en v3.
- Introducción de flexbox en v4.
- Mejora y ampliación con soporte de CSS Grid en v5.
- Personalización:
- Inicialmente, Bootstrap usaba hojas de estilo predefinidas sin muchas opciones de personalización.
- En v3 se introdujo LESS y en v4, Sass, lo que permitió más flexibilidad.
- En Bootstrap 5, se añadieron variables CSS, haciendo posible personalizar estilos sin necesidad de preprocesadores adicionales.
- Documentación:
- La documentación de Bootstrap siempre ha sido un punto fuerte. En bootstrap 5 se mejoró aún más con ejemplos más claros, integración con Hugo y distribución más eficiente mediante gestores de paquetes y CDN.
Opciones de descarga
Ahora que sabes qué es Bootstrap 5, podemos pasar a las opciones de descarga. Para incluir Bootstrap en tu programa de código, puedes hacerlo de dos maneras: desde jsDelivr, CDN open source o descargando los archivos para utilizar un gestor de paquetes.
Con jsDelivr
Para la primera opción, solo debes tener claro el comando que debes copiar en el fichero CSS, el cual es:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> Después, deberás habilitar el uso de JavaScript en tu programa de código. Necesitas plugins y la herramienta de Popper. Para habilitarlos, solo tendrás que copiar alguno de los scripts que te presentaremos a continuación, antes de la etiqueta que cierra el cuerpo de texto de tu programa, es decir, antes de </body>.
- La opción de bundle que agrega todas las dependencias del framework y de Popper:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>- La opción de separate se utiliza para una propuesta que tenga las dependencias de la librería y de Popper por separado:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>De esta manera y con todos los permisos habilitados, podrás encontrarte con la primera página que contiene una plantilla inicial utilizando HTML5.
Descargar el toolkit
Si, por el contrario, quieres descargar todo el toolkit, requerimientos y demás elementos del framework, puedes hacerlo con la descarga de un archivo comprimido.
Para descargar todas las herramientas CSS y JS debes hacerlo desde GitHub. Recuerda que estas no conciben otras dependencias de lenguajes de programación como Popper o documentación sobre el framework.
La otra opción de descarga te permite obtener la fuente de los documentos que se utilizaron para la complicación de la librería. Para obtenerla, también puedes hacerlo desde GitHub. Asimismo, si por ahora solo necesitas explorar los ejemplos que se han creado con Bootstrap, te ofrecen un link de descarga con todos ellos.
Si necesitas otras opciones de descarga, la página oficial de la librería te lista todas las maneras posibles de hacerlo.
Ahora que conoces una de las tantas librerías que existen en el mercado, como Bootstrap 5, es el momento de que la indagues y empieces a escribir tu propio programa de código para el desarrollo web.
Si lo que buscas es una formación intensiva que dure menos de un año, pero que te ayude a formarte en profundidad en el ámbito del desarrollo web, el Desarrollo Web Full Stack Bootcamp es la oportunidad perfecta para ti. En pocos meses y con la guía constante de los profesores, podrás cambiar tu vida laboral. ¡Anímate a apuntarte y conviértete en un experto en desarrollo web!
