Cuando vamos a iniciar un proyecto web, una de las primeras cosas que hago es crearme las carpetas necesarias.
Empiezo con el nombre de la carpeta principal donde va a ir todo el proyecto, imaginemos que le damos el nombre ProyectoRestaurante.
Dentro de esta carpeta tendremos que crearnos las carpetas necesarias, y en principio tenemos que crearnos una carpeta llamada "css" para nuestros archivos de estilos, otra con el nombre "jss" para nuestros archivos de javascript, y otra para las imágenes que la suelo llamar "img".
A continuación vamos implementar Bootstrap que hay dos formas de hacerlo:
- Primera. Nos iremos a la web de Bootstrap y accederemos a https://getbootstrap.com/. Pincharemos en Introduction y bajaremos hasta que nos ponga Starter template, que como el nombre nos indica es la plantilla. A continuación pincharemos en un botón a la derecha que nos pone copy para proceder a la copia de todo el código.
Continuaremos abriendo nuestro editor de código, en mi caso uti
lizo Sublime Text que es gratuito y la verdad que está muy bien, muchas veces se piensa que por ser gratis es peor, en este caso no es así.
Una vez abierto, procederemos a copiar nuestro código y guardaremos el archivo en la carpeta que creamos al principio llamada ProyectoRestaurante, y le daremos el nombre del index.html.
Código Copiado:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<a class="btn btn-primary">Pulsame</a>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>Y de esta forma ya podemos usar Bootstrap.
A continuación vamos a probar si funciona bootstrap, para ello crearemos un enlace, debajo del <h1>Hello, world!</h1>:
<a class="btn btn-primary">Pulsame</a>
Y tendremos que ver como el enlace es un botón que es de color azul, que esto nos lo da las clases de bootstrap introducidas.
La segunda forma la veremos en la próxima entrada.
