Bootstrap 5 es la versión más reciente del marco Bootstrap que permite a sus usuarios crear sitios web receptivos construidos con la técnica móvil primero. Bootstrap 5 se lanzó en el año 2021 y tiene muchas características distintivas, ya que tiene hojas de estilo rápidos y capacidad de respuesta mejorada. En este tutorial, vamos a demostrar cómo puede crear una página web simple usando Bootstrap 5.

Vamos a empezar.

Cómo crear su primera página web usando Bootstrap 5

Incluir bootstrap 5

El primer paso es obviamente agregar Bootstrap 5 en su archivo HTML. Con el fin de incluir Bootstrap 5, obtenga un CDN para CSS y JavaScript y agregue en su archivo como hemos mostrado a continuación.

Además del CDN, también hemos agregado un conjunto de caracteres UTF-8 junto con una metaetiqueta receptiva. En esta etiqueta, el ancho se establece en ancho del dispositivo, lo que significa que el ancho de la página web cambiará en correspondencia al ancho del dispositivo, mientras que la escala inicial se establece en 1, lo que significa cuando el navegador cargue la página web. Por primera vez, el nivel de zoom será 1.

Hacer una barra de navegación

Después de incluir Bootstrap 5 en nuestro archivo, ahora haremos una barra de navegación superior utilizando varias clases de Bootstrap 5.

A continuación vamos a explicar las diversas clases utilizadas para crear una barra de navegación.

1. El .barra de navegación se usa para envolver una barra de navegación junto con .Navbar-Expand-SM para el colapso receptivo, mientras tanto el .BG-SECUDARY y .Navbar-oscuridad son los diferentes esquemas de color proporcionados a la barra de navegación.
2. El .envase clase envuelve todos los elementos de una barra de navegación con un ancho fijo.
3. El .blanco de texto y .centro de texto Las clases corresponden al color y la alineación del encabezado principal del sitio web.
4. El .navegador de navicar se utiliza para crear una barra de navegación que tenga una altura máxima y sea liviana y también admite desplegables. Mientras tanto, .Ml-Auto Establece el margen izquierdo de los elementos de la lista en Auto.
5. El .ítem de navegación, y .enlace de navegación se utilizan para crear varios elementos de lista en la barra de navegación.
6. El .activo La clase hace un enlace activo.

Producción

Se creó con éxito una barra de navegación.

Agregar contenido

Ahora que hemos creado con éxito una barra de navegación, agregaremos algo de contenido en el sitio web. En el código a continuación, solo estamos agregando algún texto a la sección "Acerca de nosotros".

Sobre nosotros

Hola. Bienvenido a mi primera página web. Esta es una página web receptiva que creé usando Bootstrap 5. Bootstrap es la versión más reciente del marco Bootstrap que permite a sus usuarios crear sitios web receptivos con una técnica móvil primero. Este enfoque establece 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 tiene hojas de estilo rápidos y capacidad de respuesta mejorada.

Varias clases utilizadas para agregar contenido en la página web se explican aquí.

1. El .fila La clase crea una fila en la que vamos a colocar nuestro texto, mientras tanto, .alinearse La clase alinea el contenido a la izquierda.
2. El .columna La clase genera una columna, mientras que el .text-col La clase proporciona un color predeterminado al texto.

Nota: Con el fin de agregar contenido, básicamente construimos un sistema de cuadrícula arriba. Un sistema de cuadrícula en Bootstrap 5 utiliza varios contenedores, filas y columnas para ajustar y alinear contenido.

Producción

Se ha agregado algún contenido a la página web.

Agregar galería de imágenes

Para que nuestro sitio web sea más interesante, ahora estamos agregando algunas imágenes mediante la creación de otro sistema de cuadrícula.

Aquí hemos explicado las clases utilizadas anteriormente.

1. El .Col-MD-4 La clase crea cuatro columnas de igual ancho y especifica que el ancho del dispositivo es medio o mayor que 768px, mientras tanto, el ancho del contenedor es de 720px.
2. El .MT-3 La clase proporciona un margen superior al diseño de la cuadrícula.
3. El .col-lg-3 La clase crea 3 columnas de igual ancho y establece que el ancho del dispositivo es grande que tiene un tamaño de pantalla mayor o igual a 992px.
4. Por último, las imágenes se hacen responder la .img-fluiclase D.

Producción

Se agregó una galería de imágenes receptiva con éxito.

Agregar un botón

Por último, vamos a agregar un botón en nuestro sitio web.

Contáctenos

Las clases utilizadas para crear el botón se analizan a continuación.

1. El .mt-2 Establece la parte superior del margen del botón.
2. Con el fin de personalizar nuestro botón, estamos utilizando el .btn clase, mientras tanto, el .BTN-SECUDARY la clase especifica el color del botón y el .btn-grande La clase establece el tamaño del botón.

Producción
Así es como se ve la página web completa.

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

Nota: Para evaluar la capacidad de respuesta de la página web escala el navegador web hacia arriba y hacia abajo.

Conclusión

Con el fin de crear su primera página web utilizando Bootstrap 5, debe tener una comprensión básica de varias clases integradas de Bootstrap 5. Una necesidad básica de este marco es un contenedor que envuelve elementos dentro de él. Las clases de contenedores se pueden usar con otras clases para construir varias entidades que una página web tiene, como una barra de navegación, cuadrícula de imágenes, botones, etc. En este artículo, hemos demostrado con la ayuda de un ejemplo apropiado cómo puede crear su primera página web usando Bootstrap 5.