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

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. Y es por eso que aquí tenéis una guía paso a paso, donde se explican 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
Ver  24 mejores temas de WordPress para diferentes tipos de sitios web

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/ popper.js@1.16.0 /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.

  • Bootstrap 4: npm instalar bootstrap
  • Bootstrap 5: npm instalar bootstrap@next

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:
Ver  36 logos innovadores de startups para inspirarte

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 emplear y las acciones que realizan las clases correspondientes. De manera similar, después de integrar Bootstrap JS a HTML, puede utilizar 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 emplear 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 utilizar Bootstrap fácilmente para disfrutar de atributos y funciones adicionales, además de sus archivos HTML en muy poco tiempo.

Si le ha gustado este artículo, no olvide visitar nuestro blog. También puede visitar nuestra web y observar cómo trabajamos.

PÍDENOS PRESUPUESTO AHORA

Explícanos tu proyecto y te ayudaremos a ponerlo en marcha.

Somos la Agencia líder en diseño de páginas web, diseño de tiendas online, posicionamiento SEO, campañas SEM y redes sociales.

© 2022 · Diseño Web Barcelona · Todos los derechos reservados