Bootstrap es un marco CSS diseñado para crear sitios web receptivos y especialmente aquellos sitios web que se desarrollan para móviles antes de ser diseñado para cualquier otro tipo de dispositivo. Este marco se desarrolló utilizando HTML, CSS y JavaScript, y consiste en plantillas para crear varios elementos, como botones, formularios, menores y muchos más. Además, este marco es de código abierto y también es gratuito de usar.

Como sugiere el título del artículo, aquí el enfoque principal de nuestra discusión será Bootstrap 5. Por lo tanto, sin más preámbulos, comencemos.

¿Qué es Bootstrap 5??

Bootstrap 5 es la última versión del marco de Bootstrap que permite a sus usuarios crear sitios web sorprendentes con hojas de estilo CSS rápidas y capacidad de respuesta mejorada. Fue lanzado en el año 2021 y es compatible con casi todos los navegadores y plataformas. \

Características de Bootstrap

Algunas de las características distintivas de Bootstrap 5 son las siguientes.

1. Esta nueva versión de Bootstrap es liviana y se puede personalizar de acuerdo con las necesidades de los usuarios.
2. Consiste en una capacidad de respuesta mejorada.
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 más rápido, por lo tanto, ahorrar mucho tiempo y energía.

Bootstrap 5 vs. Otras versiones

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. Sin embargo, las versiones más antiguas aún se pueden usar para arreglar o alterar la documentación.

Ahora que tenemos una introducción básica de lo que es Bootstrap 5, creemos nuestra primera página web utilizando este marco.

Mi primer programa Bootstrap5

Con el fin de usar Bootstrap 5, obviamente debe instalarlo primero. Puede incluir este marco desde la red de entrega de contenido, o descargarlo e instalarlo desde bootstrap.comunicarse. Se prefiere el primer enfoque si no desea alojar bootstrap 5. A continuación le hemos dado el CDN de Bootstrap 5.

Para CSS

Para JavaScript

Ahora que tenemos nuestro CDN, creemos una página web usando Bootstrap 5. A continuación, hemos proporcionado una guía paso a paso.

Paso 1
El primer paso para usar Bootstrap 5 es incluir DOCTYPE HTML5 para que Bootstrap 5 pueda hacer un uso completo de varios elementos HTML y las propiedades de CSS.

>

Además de HTML5 DOCTYPE, también hemos incluido el atributo Lang, junto con un conjunto de personajes.

Paso 2
Como sabemos que Bootstrap 5 desarrolla un sitio web con un enfoque móvil primero, por lo tanto, el siguiente paso es agregar una metaetiqueta receptiva para asegurarse de que el sitio web creado como resultado responda al contacto y al zoom.

Incluya lo siguiente de la etiqueta.

Paso 3
Una necesidad básica de Bootstrap 5 es incluir un contenedor con el fin de envolver el contenido del sitio web. Estos contenedores básicamente envuelven elementos dentro de ellos. Para usar estos contenedores, use las siguientes dos clases.

1. .envase para construir un contenedor con ancho fijo pero receptivo.
2. .fluido de contenedores Para hacer un contenedor de ancho completo que se extiende por el ancho completo.

Etapa 4
Para este paso, agregaremos algo de contenido para crear nuestra página web utilizando el contenedor de ancho fijo. Mantenemos nuestro programa muy simple para que como principiante sea fácil entender 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.

En el código anterior, utilizando la clase de contenedor, hemos creado un elemento Div que anida aún más un encabezado y dos párrafos. Para ver el efecto completo de Bootstrap 5, cambie el tamaño de la ventana de su navegador. En la salida a continuación, le hemos mostrado cómo se ve la página a los tamaños de pantalla aleatorios.

Producción
Cuando el ancho de la pantalla es 837px y arriba.

Cuando el ancho de la pantalla es 677px y menor.

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

Conclusión

Bootstrap 5 es la última versión del marco Bootstrap CSS que permite a sus usuarios crear sitios web que responden en la naturaleza y con un enfoque móvil primero. Esta versión tiene hojas de estilo rápidos y capacidad de respuesta mejorada y se lanzó en 2021. Tiene muchas características sorprendentes que lo distinguen de otras versiones. 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. Este tutorial cubre todos los detalles necesarios sobre Bootstrap 5 junto con un programa simple.