Inicio » Blog » Bootstrap

22 octubre, 2018

Integrar Bootstrap en una página web

Veremos como integrar fácilmente el framework Bootstrap en una página web HTML, Veremos dos formas mediante su CDN y por Descarga menos por NPM.

Suscríbete a nuestro canal en Youtube

Suscríbirse

Primero ¿Qué es Bootstrap?

Bootstrap es una librería de CSS y JavaScript, creado con el objetivo de facilitar la organización de contenido, la aplicación de estilos y el desarrollo de páginas web adaptables a dispositivos móviles. En este artículo se demostrará como usar insertar Bootstrap en una página web HTML.

Ahora si ¿Cómo implementar Bootstrap en una web HTML ?

Para esto puedes hacerlo de dos formas  o métodos distintos de integrar esta librería en tu página web:

  • Primera forma : por descarga
  • Segunda forma: por CDN

Primera forma: Descargar e instalar desde la web oficial de Bootstrap

En esta primera tenemos que entrar a la página misma de Bootstrap y descargar los archivos necesarios (bootstrap.css, Bootstrap.js ). La url oficial de Bootstrap es la siguiente: Bootstrap

Y luego de descargar los archivos procedes a importarlos a tu proyecto con las etiquetas html que sean necesarias. 

El archivo CSS lo pones en head de tu página web:

<link rel="stylesheet" href="css/bootstrap.min.css">

Y el archivo JS los pones antes de la etiqueta de cierre de body

<script src="js/bootstrap.min.js></script>

Recuerda que debes tener planeada una estructura de carpetas para tu proyecto, que debería verse mas o menos asi:

  • index.html
  • css/bootstrap.min.css
  • js/bootstrap.min.js.

 

Segunda forma es a través de la CDN de Bootstrap 

Otra forma que tenemos y la más conveniente sería el llamado a la misma página de los creadores, mediante la cual se hará una petición a sus servidores para usar los archivos CSS y JS necesarios, los cuales no estarán almacenados en su página web y aumenten el tamaño de este, como se sabe al estar dentro del proyecto hacen que ocupe un poco de espacio adicional en todo tu proyecto.

CDN links 

Referencia de los archivos que puedes cargar a tu página web:

Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js

 

Finalmente tu página web HTML debe de quedar  asi:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>>

Todo estos ejemplos y mas, si deseas extenderlo puedes visitar la pagina oficial del framework que te da pequeños tutoriales de como usar al 100% esta increibre herramienta.

Finalmente ¿Cuál forma de integrar Bootstrap conviene?

Pues, depende. Depende de que requerimientos tiene tu proyecto web, es decir si va a diseñar una página web sencilla lo más recomendable es usar la CDN de Bootstrap. Ahora si vas a personalizar el sitio web con diferentes colores, texto, etc sería recomendable implementar bootstrap en tu propio proyecto descargando los recursos en un directorio de tu sitio web. 

¿Qué significa personalizar Bootstrap?

Por default Bootstrap tiene una serie de reglas css que ya estan predeterminadas en cuanto a colores y diseño, pero son rigídas de alguna manera, es decir un desarrollador frontend si desea aplicar otro tipo de diseño, lo que hace normalmente si usa Bootstrap pues reescribe dichas reglas creando un nuevo archivo css, para lograr ello se agrega la terminación en cada regla !important, esto hará que se cumpla siempre la última regla.

Obviamente, esto no es una buena práctica puesto quew además de cargar el o los archivos css de Bootstrap tambien debemos crear reglas CSS que aumentarán el tamaño del sitio web, incluyendo nuevas peticiones, que jugarán en contra del posicionamiento del Sitio Web, esto debido a la lentitud que tomará. Por ello si vas a crear una web muy exquisita en diseño lo recomendable sería desarrollar tu hoja de estilos a medida. O usar otros soluciones como el reciente Tailwincss que tiene otro modo de desarrollo muy interesante.

Ahora existen páginas que te ayudan de alguna manera presentando cierta diversidad de colores, que podemos usar para nuestros proyectos. sigue la liga para poder ver y descargar los archivos css  en Bootstrap Personalizado. completamente gratuito solo elige y descarga el tema que se adecue a tus requerimientos.

Update

Instalar Bootstrap v5 por CDN

Bootstrap para diseño web responsive

La última versión de bootstrap ha cambiado, es decir no require de el viejo Jquery para usarlo pero si de sus propias librerías Javascript

Y la instalación por CDN es la siguiente:

La Hoja de estilos CSS

Copie y pegue la hoja de estilo <link> en su <head> antes de todas las demás hojas de estilo para cargar nuestro CSS.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Ahora los archivos de JS

Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren nuestros propios complementos de JavaScript y Popper. Coloque uno de los siguientes <script> s cerca del final de sus páginas, justo antes de la etiqueta </body> de cierre, para habilitarlos.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

Instalar Bootstrap v5 por descarga

Pues, a veces es confuso saber que debemos descargar, pues simplemente busquemos la opción de Compiled CSS and JS, el botón download hará la magía de poner los archivos en descargas de tu pc, ten en cuenta que se descargarán varios archivos, depende de ti incluirlos en tu proyecto a todos o no, por mi parte solo incluyo los tres principales.

Espero que sea de ayuda, el mejor consejo es practicar y practicar para obtener resultados.


Leido 81723 veces

Descarga el código fuente Bootstrap

Recurso descargado 779 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Diseño Web Responsive con Bootstrap Diseño Web Responsive con Bootstrap

Curso de Diseño Web con Bootstrap para una tienda de vestidos

Descarga del código fuente

USD 0.00

Aprende más sobre Bootstrap

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023