El marco CSS llamado Bootstrap es uno de los marcos ampliamente utilizados para crear y diseñar aplicaciones web. Tiene HTML, estilos CSS y algunos componentes de diseño de JavaScript para formas, botones, navegación y otros módulos de interfaz. Antes de usar Bootstrap, uno debe agregar los enlaces CSS, JavaScript y JQuery requeridos.

Este artículo describirá los métodos sobre cómo agregar bootstrap a un proyecto.

Cómo agregar bootstrap a un proyecto?

Hay dos formas de agregar bootstrap a un proyecto:

• • Descargar bootstrap
  • Agregar bootstrap de un CDN

Método 1: Descargar bootstrap

Si desea alojar bootstrap en su sitio web, descargue Bootstrap desde su sitio web oficial y siga las instrucciones.

Método 2: Agregar bootstrap de un CDN

Una red global llamada CDN o Network de entrega de contenido almacena el recurso estático para un sitio web en todo el mundo. Los recursos incluyen imágenes, videos, CSS y más. Hace el tiempo de carga del sitio web más rápido cargando los archivos estáticos desde el servidor CDN relativamente cercano. MaxCDN ofrece soporte de CDN para JavaScript y CSS de Bootstrap. JQuery también debe ser incluido.

Implementemos un ejemplo para crear una página web usando Bootstrap.

Ejemplo: cree una página web usando bootstrap

Para crear una página web con Bootstrap, pruebe los siguientes pasos:

Paso 1: crear un archivo HTML

Primero, cree un archivo HTML y nombre con la extensión ".html". En nuestro caso, llamamos el archivo HTML "índice.html". Después de crearlo, agregue los elementos requeridos como se muestra a continuación:

Paso 2: Agregue el enlace CSS de arranque requerido

Ahora, agregue el enlace CSS de arranque requerido dentro del elemento "":

Supongamos que estamos utilizando Bootstrap 4, así que visite el sitio web oficial de Bootstrap 4 y copie el enlace CSS a la sección Head HTML.

Bootstrap CSS

Paso 3: Agregar etiquetas de script requeridas

Hay varios componentes de Bootstrap que necesitan JavaScript para funcionar correctamente. Más específicamente, necesitan complementos JQuery, Popper y JavaScript. Para agregarlos a su proyecto, use el ""Etiquetas, justo antes del""Etiqueta de cierre:

Nota IMPORTANTE: La secuencia de las etiquetas "" no debe cambiarse, como jQuery debe colocarse primero, js y tercer popper.js.

Consejo de bonificación

Hay una forma simple y fácil de incluir bootstrap en su proyecto. La plantilla de inicio se puede copiar desde el sitio web oficial de Bootstrap y pegar en su proyecto.

Paso 4: Agregar elementos HTML

Hemos agregado con éxito los enlaces de arranque necesarios. Ahora, agregue los elementos HTML para crear una página web. Por ejemplo, en el ejemplo en curso, agregue los elementos HTML dentro del ""Elemento como se menciona a continuación:

• • Primero, agregue un ""Elemento para crear un área para los elementos. Asignarlo el "centro de texto" y "BG-Info"Clases.
  • Dentro del "", agregue el "

    "Etiqueta con la clase"advertencia de texto"Para especificar un encabezado en color amarillo.

  • Luego, incluya algún contenido de texto usando el "

    " elemento.

Html

Linuxhint

Linuxhint ofrece los mejores artículos y videos para fines educativos!

Las clases de bootstrap utilizadas en el ejemplo mencionado anteriormente se explican a continuación:

• • El "centro de textoEl centro de clases alinea el texto.
  • "BG-Info"Agrega un color azul.
  • "BG-WARNING"Aplica el color amarillo al texto.

Guardar el código y iniciarlo en el navegador. La página web se verá así:

Así es como puede agregar bootstrap a su proyecto.

Conclusión

Para agregar bootstrap a su proyecto, "Descargue el bootstrap" o "Use Bootstrap CDN"Son las dos opciones. Para descargar Bootstrap, visite el sitio web oficial y siga la guía y, si no desea descargarlo, úselo a través de CDN. Para hacerlo, agregue el enlace CSS dentro del "Sección del HTML y agregue las etiquetas de JQuery, JavaScript y Popper.JS cerca del cierre "" etiqueta. Luego, incluya los elementos HTML después de la etiqueta de inicio del "" elemento. Este artículo ha explicado cómo agregar bootstrap a un proyecto con un ejemplo.