¿Qué es Bootstrap 5?

Autor: | Última modificación: 8 de abril de 2024 | Tiempo de Lectura: 4 minutos
Temas en este post: ,

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿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 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.

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

  1. 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.

¿Quieres aprender sobre desarrollo web?

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!

Posts Relacionados

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado