Anteriormente implementamos bootstrap4 para realizar un proyecto web insertando el enlace CDN de bootstrap, esta vez lo que vamos a realizar es descargar desde la web oficial de Bootstrap el framework. Esta vez lo utilizaremos en local.
Por supuesto seguiremos en nuestro proyecto con la arquitectura de nuestras carpetas. En nuestro proyecto que le daremos el nombre que queramos, le creamos en su interior nuestra carpeta css para nuestros archivos de estilos, js para nuestros archivos de javascript, también suelo incluir una carpeta img para nuestras imágenes.
Primero nos vamos a ir a su web oficial siendo el siguiente enlace:
https://getbootstrap.com/
Actualmente, nos encontramos con la versión 5 pero en versión beta, por lo que vamos a descargar la versión 4.6, primero pincharemos en v4.6.docs.
Una vez en esta web pulsamos sobre Download...
Posteriormente observamos en la parte izquierda el enlace Download, y pincharemos en dicho lugar.
Como vemos en esta página, abajo existe un enlace con un botón que nos pone Download.
Al pinchar en dicho enlace nos descargará Bootstrap 4.6, por supuesto comprimido, por lo que tendremos que tener alguna aplicación para poder descomprimirla, normalmente utilizo una gratuita llamada BreeZip que se encuentra en la tienda de windows.
Al descromprimir, nos saldrán dos carpetas, una css y otra js.
En la carpeta css encontramos varios archivos, observamos el archivo de bootstrap.css que es un archivo que contiene todos los estilos del framework css, este archivo no esta comprimido y nos ocupa un tamaño de 195 kb, normalmente este archivo no se usa, se usa la versión comprimida que es bootstrap.min.css que nos ocupa 158 kb, por lo que este archivo lo copiaremos dentro de nuestra carpeta css que hemos creado en nuestro proyecto.
A continuación nos iremos a nuestro proyecto para implementar bootstrap, abriremos nuestro archivo index.html
En este archivo, debajo de los meta, primero introduciremos un comentario :
<!--Bootstrap-->
A continuación escribiremos lo siguiente:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Y con esta linea ya hemos hecho referencia al archivo de bootstrap que se encuentra en la carpeta css.
Y para comprobar hemos introducido la primera linea en el interior del body
<h1 class="bg-primary">Mi Primera Web</h1>
Como vamos a observar la clasee bg-primary nos dará un color azul.
A continuación pondremos las librerias javascript, primero tendremos que implementar jquery, para ello nos iremos a la web https://jquery.com/
Seguiremos pulsando en el enlace que nos sale a la drecha que nos pone Download jQuery.
Una vez en la en la web de los enlaces para bajar jquery, pincharemos en el enlace de la versión no comprimida, ya que la otra versión da algún tipo de problema.
Pincharemos en dicho enlace con el botón derecho del ratón y pulsaremos guardar enlace como, y lo guardaresmo en nuestra carpeta jss de nuestro proyecto web.
A continuación vamos a cargar dicho archivo en nuestro index.html.
Y antes del cierre del body, escribiremos la siguiente linea
<script src="js/jquery-3.6.0.js"></script>
Y con esto ya tenemos jquery.
A continuación tenemos que cargar otro archivo que es Pooper, ya que tanto jquery como Popper lo utliza bootstrap, lo haremos será ir a la siguien dirección web:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
Que es donde se encuentra alojada dicha libreria, una vez en dicha web, haremos click con el botón derecho y le daremos guardar como y lo alojaremos en nuestra carpeta js de nuestro proyecto.
Ahora lo que vamos a realizar es relacionarlo con nuestro index, para ello debajo del script de jquery pondremos la siguiente linea:
<script src="js/popper.min.js"></script>.
Ahora lo que nos queda es el archivo javascript de Bootstrap, que lo tenemos en la carpteta que descargamos al principio, que se encuentra en la carpeta js y se llama el archivo:
bootstrap.min.js
Que lo copiaremos en la carpeta js de nuestro proyecto web, llamaremos a dicho archivo desde nuestro index.html, escribiendo la siguiente línea debajo del Popper
<script src="js/bootstrap.min.js"></script>
El archivo index.html nos ha quedado con el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootsrap-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Plantilla Bootstrap</title>
</head>
<body>
<h1 class="bg-primary">Mi Primera Web</h1>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
No hay comentarios:
Publicar un comentario
Gracias por participar en esta página.