En este momento estás viendo ▷ Cómo agregar Bootstrap a HTML (Guía paso a paso)

▷ Cómo agregar Bootstrap a HTML (Guía paso a paso)

  • Categoría de la entrada:➤ Web
  • Comentarios de la entrada:Sin comentarios

Cómo agregar Bootstrap a HTML

Bootstrap es uno de los marcos de CSS, HTML y JavaScript más populares que existen. No hace falta decir que la pregunta de cómo agregar bootstrap a HTML seguramente se te ha pasado por la cabeza. Esta guía paso a paso explica los diferentes métodos que puede usar para vincular sin esfuerzo Bootstrap en HTML o para importar Bootstrap a HTML, dependiendo de cómo desee integrarlo en su sitio web.

La versión más reciente de Bootstrap es Bootstrap 5. Los pasos que debe seguir para agregar Bootstrap a HTML difieren ligeramente según la versión que desee usar. Necesitará un conocimiento básico de HTML/CSS y JS para comenzar con Bootstrap. Utilice uno de los siguientes tres métodos para agregar Bootstrap a HTML.

arranque a html

Método 1: uso de la red de entrega de contenido (CDN) Bootstrap

El uso de Bootstrap CDN es una excelente manera de entregar el contenido de su sitio web a sus usuarios de manera rápida y eficiente en función de su ubicación geográfica y mejorar el rendimiento del servidor de su sitio web. Para vincular Bootstrap en HTML usando este método:

Agregando Bootstrap 4 CDN a HTML

  • Para CSS:

Copie este enlace de hoja de estilo a la etiqueta <head> del archivo HTML deseado.

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”rel=”nofollow” integridad=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anónimo”>

  • Para JS:

Copie esta hoja de estilo antes del final de la etiqueta <body> del archivo HTML deseado.

<guión src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integridad=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anónimo”></script>

<script src= https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integridad=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anónimo”> </script>

<guión src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integridad=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anónimo”></script>

Tenga en cuenta que las funcionalidades de algunos componentes de JavaScript, como pestañas y menús desplegables, dependen de popper.js y jQuery. Por lo tanto, antes de cargar el archivo JavaScript Bootstrap, incluya jQuery y Popper CDN antes de cargar el archivo bootstrap.min.js .

Agregando Bootstrap 5 CDN a HTML

Bootstrap 5 ya no necesita jQuery como dependencia, ya que JavaScript puede proporcionar la misma funcionalidad. Para agregar Bootstrap 5 CDN a HTML:

  • Para CS

Copie este enlace de hoja de estilo a la etiqueta <head> del archivo HTML deseado.

<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css”rel=”nofollow” integridad=”sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I” crossorigin=”anónimo”>

  • Para JS

<script src=”https://cdn.jsdelivr.net/npm/ [email protected] /dist/umd/popper.min.js” integridad=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anónimo”> </script>

<guión src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js” integridad=”sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/” crossorigin=”anónimo”></script >

Tenga en cuenta que debe cargar Popper JS antes de cargar Bootstrap JS.

Método 2: Descargar archivos localmente

Otra forma de importar Bootstrap a HTML es descargar directamente los archivos localmente a la carpeta de su proyecto HTML. Los archivos se pueden descargar desde los siguientes enlaces:

Después de descargar los archivos de la versión Bootstrap deseada:

  • Para CSS :

Incluya un enlace al archivo bootstrap.min.css en la parte <head> de su archivo HTML. Hacer esto le permite usar los componentes CSS de Bootstrap según sus necesidades.

  • Para JS:

Agregue un enlace al archivo bootstrap.min.js antes del final de la parte <body> de su archivo HTML. Hacer esto le permite usar componentes de Bootstrap JS. 

Tenga en cuenta que los archivos jquery.min.js y popper.min.js deben incluirse antes de cargar bootstrap.min.js , incluso si ha descargado los archivos localmente.

Método 3: usar administradores de paquetes para importar Bootstrap a HTML

Los administradores de paquetes como npm e yarn pueden demostrar ser otra forma eficiente de agregar Bootstrap a HTML sin esfuerzo. Dado que npm es el administrador de paquetes más popular, el siguiente ejemplo muestra cómo se puede instalar Bootstrap e incorporarlo a cualquier proyecto que lo use. 

Escriba uno de los siguientes comandos en la carpeta del proyecto. Esto solo es válido si ha inicializado npm en el proyecto.

Ahora se descarga una copia local de la versión deseada de los archivos de Bootstrap en la carpeta ‘node_modules’ de su proyecto. Después de importar la versión de Bootstrap deseada:

  • Para CS:

Incluya el archivo bootstap.min.css en el <head> de su archivo HTML para usar los componentes CSS de Bootstrap. 

  • Para JS:

Use el archivo bootstrap.min.js antes del final de la parte <body> de su archivo HTML para usar los componentes de Bootstrap JS. 

Como se mencionó anteriormente, jquery.min.js y popper.min.js deben cargarse antes de cargar bootstrap.min.js.

Una vez que integre Bootstrap 4 o 5 CSS con HTML, simplemente puede usar los elementos de la clase Bootstrap y diseñar sus archivos HTML de la manera deseada. Puede consultar la documentación de Bootstrap de su versión deseada para comprender las clases que se pueden usar y las acciones que realizan las clases correspondientes. De manera similar, después de integrar Bootstrap JS a HTML, puede usar los componentes de Bootstrap JS usando atributos de datos JS directamente en el marcado HTML o usando jQuery. Consulte la documentación de Bootstrap para comprender cómo funcionan estos componentes y qué características ofrecen.

Ejemplos de Creative Tim

tablero de materiales

Material Dashboard es una plantilla de administración gratuita de Material Bootstrap 4 que ofrece un diseño genial, componentes fáciles de usar y complementos de terceros diseñados para funcionar perfectamente con otros elementos. Consulte aquí su página de descarga y vista previa en vivo.

Puede encontrar plantillas y temas de Bootstrap similares y fáciles de integrar de Creative Tim aquí . 

Conclusión

A menudo puede estar preocupado por la cuestión de cómo empezar con Bootstrap. Sin embargo, tenga la seguridad de que importar y agregar Bootstrap a HTML es un proceso bastante sencillo, y puede usar Bootstrap fácilmente para disfrutar de atributos y funciones adicionales además de sus archivos HTML en muy poco tiempo.

Además, si alguna vez te preguntaste: ¿Bootstrap está muerto en 2022? – Es una pregunta en la mente de muchos desarrolladores web frontend. Bueno, no lo es: millones de desarrolladores lo usan; Más de 40 000 empresas lo utilizan; tuvo un importante lavado de cara en 2020 y es un excelente primer marco para los nuevos desarrolladores de interfaz. ( Fuente )

En Estrategia Creativa tenemos toda la información que necesitas sobre el mundo de digital y en especial para tus emprendimiento Si quieres seguir leyendo información útil  ¡echa un vistazo a nuestros artículos!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Deja una respuesta