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.
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/ 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:
- Bootstrap 4: https://getbootstrap.com/docs/4.3/getting-started/download/
- Bootstrap 5: https://v5.getbootstrap.com/docs/5.0/getting-started/download/
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:
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
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.
Preguntas frecuentes (FAQs)
-
¿Qué es Bootstrap y por qué es popular?
Bootstrap es un marco de CSS, HTML y JavaScript utilizado para crear sitios web y aplicaciones web responsivas y móviles. Es popular debido a su facilidad de uso, diseño consistente y amplio conjunto de componentes predefinidos.
-
¿Cómo puedo agregar Bootstrap a mi archivo HTML usando CDN?
Puedes agregar Bootstrap a tu archivo HTML utilizando la red de entrega de contenido (CDN). Para Bootstrap 4, agrega los enlaces CSS y JS proporcionados a las etiquetas <head> y antes del cierre de la etiqueta <body>. Para Bootstrap 5, agrega los enlaces correspondientes ya que no requiere jQuery.
-
¿Cómo descargo y uso los archivos de Bootstrap localmente en mi proyecto HTML?
Descarga los archivos de Bootstrap desde sus enlaces oficiales. Luego, incluye un enlace al archivo bootstrap.min.css en la etiqueta <head> y bootstrap.min.js antes del cierre de la etiqueta <body> en tu archivo HTML.
-
¿Cómo puedo usar administradores de paquetes como npm para integrar Bootstrap en mi proyecto?
Inicializa npm en tu proyecto y utiliza el comando npm install bootstrap para Bootstrap 4 o npm install bootstrap@next para Bootstrap 5. Luego, incluye los archivos bootstrap.min.css y bootstrap.min.js en tu archivo HTML como se indica en los métodos anteriores.
-
¿Cuál es la diferencia entre Bootstrap 4 y Bootstrap 5?
La principal diferencia es que Bootstrap 5 ya no requiere jQuery como dependencia y tiene mejoras en la usabilidad y el rendimiento. Bootstrap 5 también incluye nuevas clases y componentes actualizados.
-
¿Dónde puedo encontrar más información y ejemplos de uso de Bootstrap?
Puedes encontrar más información y documentación detallada en el sitio web oficial de Bootstrap. También puedes explorar ejemplos y plantillas en sitios como Creative Tim, que ofrecen recursos gratuitos y de pago para Bootstrap.
