Bootstrap 5 es la última versión del marco de Bootstrap que permite a sus usuarios crear sitios web que responden en la naturaleza y con un enfoque móvil primero. Este enfoque especifica que el diseño web se desarrolla por primera vez para teléfonos móviles y más tarde para otros dispositivos. Bootstrap 5 se lanzó en el año 2021 y tiene muchas características sorprendentes, como hojas de estilo rápidos y capacidad de respuesta mejorada. Aquí lo guiaremos sobre cómo comenzar con Bootstrap 5, pero antes de eso, aprendamos un poco más sobre Bootstrap 5.

Características de Bootstrap 5

Bootstrap 5 tiene muchas características que lo hacen destacar entre otras versiones. Algunas de estas características se enumeran a continuación.

1. Esta última versión de Bootstrap es muy fácil de usar.
2. Tiene una rápida capacidad de respuesta.
3. Es útil para desarrollar sitios web diseñados para teléfonos móviles primero y otros dispositivos más tarde.
4. Este marco es compatible con todos los navegadores modernos.
5. Es rápido, por lo tanto, ahorra mucho tiempo y energía.

Bootstrap 5 vs. Bootstrap 3 y 4

En comparación con otras versiones de Bootstrap, específicamente la versión 3 y la versión 4, la principal diferencia que se puede señalar entre otras diferencias es que Bootstrap 5 usa Vanilla JavaScript en lugar de jQuery.

Obtener bootstrap 5

Antes de que pueda comenzar a usar Bootstrap 5, obviamente necesita descargarlo primero y para eso, puede incluirlo desde la red de entrega de contenido, o descargarlo e instalarlo desde Bootstrap.comunicarse. En aras de este tutorial, vamos a incluir Bootstrap 5 de CDN.

Para CSS

Para JavaScript

Ahora que se incluye Bootstrap 5, desarrollemos nuestro primer programa.

Comenzando con Bootstrap 5

A continuación, le hemos proporcionado una guía paso a paso sobre cómo comenzar con Bootstrap 5.

1. Hacer un documento HTML
El propósito de hacer un archivo HTML usando Bootstrap 5 es incluir DOCTYPE HTML5 para que este marco pueda hacer un uso completo de varios elementos HTML y CSS Propiedades.

También incluya el atributo Lang, junto con un conjunto de personajes. Otro que hemos agregado aquí es la metaetiqueta receptiva. Como sabemos, Bootstrap 5 desarrolla un sitio web con un enfoque de primer móvil, por lo tanto, incluida una metaetiqueta receptiva se asegura de que el sitio web responda al contacto y al zoom.

2. Agregar bootstrap 5
Ahora simplemente agregue el CDN para CSS y JavaScript en su archivo HTML para comenzar a usar Bootstrap 5 sin ningún problema.

Ambos CDN se agregaron en la etiqueta. Otro enfoque para agregar el CDN de JavaScript en el archivo es antes de la etiqueta de cuerpo de cierre.

3. Agregar elementos
El código anterior le falta por completo la etiqueta, por lo tanto, para agregar algún contenido, crear varios elementos HTML en el cuerpo de su archivo. Dado que el propósito de esta publicación es mostrar la capacidad de respuesta de Bootstrap 5, por lo tanto, lo presentamos aquí con algunos conocimientos básicos sobre las clases de contenedores de bootstrap.

Un requisito fundamental de Bootstrap 5 es incluir un contenedor con el fin de envolver el contenido del sitio web. Para usar estos contenedores, use las siguientes dos clases.

1. .envase para construir un contenedor con ancho fijo pero receptivo.
2. .contenedor-fluiD para obtener un contenedor de ancho completo que se extiende por el ancho completo.

Aquí utilizaremos la clase de fluido de contenedores para demostrar nuestra primera página receptiva usando Bootstrap 5.

Bootstrap 5

Bootstrap 5 es la última versión del marco Bootstrap que permite a su usuario crear sitios web sorprendentes con CSS rápido
hojas de estilo y capacidad de respuesta mejorada.

En comparación con otras versiones específicamente, la versión 3 y la versión 4, Bootstrap 5 usa Vanilla JavaScript en lugar de
jQuery.

Usando la clase de contenedor-fluido, hemos creado un elemento Div que nesta aún más

elemento y dos

elementos. Escala la ventana del navegador hacia arriba y hacia abajo para ver el efecto.

Producción

Se creó una página web receptiva con éxito utilizando Bootstrap 5.

Conclusión

Para comenzar con Bootstrap 5, primero debe hacer un archivo HTML básico al incluir el DOCTYPE HTML5 para que Bootstrap 5 pueda hacer un uso completo de varios elementos HTML y CSS Propiedades. Después, debe instalar Bootstrap 5 o obtener su CDN e incluirlo en su documento HTML. Entonces puede comenzar a crear los elementos que desea mostrar en su página web. Por último, guarde su archivo, y voila se ha creado su primera página Bootstrap 5. Este tutorial te guía un paso a paso sobre cómo comenzar con Bootstrap 5.