Bootstrap es el framework más popular del mundo para crear sitios WEB con gran capacidad de respuesta y preparados para dispositivos móviles.
El frameword esta compuesto por una hoja de estilo CSS que incluye todos los componentes. Los componentes requieren el uso de JavaScript para que puedan funcionar, en concreto, requieren JQuery, Popper.js y los elementos propios del framework.
CSS
Copia y pega la hoja de estilo dentro del elemento HTML <head> y antes del resto del css que tengas, puedes utilizar bootstrapCDN que es proporcionado gratuitamente,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
O puedes descargar el css e incluirlo en tu proyecto,
<link href="/css/ bootstrap.min.css" rel="stylesheet" type="text/css" />
JavaScript
Incluye los siguientes <script> dentro del elemento HTML <body> y justo antes de la etiqueta de cierre </body>. El orden es importante, primero el JavaScript de JQuery, luego el de Popper y por último el propio de Bootstrap.
Como en el caso del CSS, puedes utilizar BootstrapCDN para la carga externa y no tenerlos alojados en tu espacio.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
O puedes descargarlos e incluirlos en tu proyecto de la siguiente manera.
<script src="/js/jquery-3.2.1.slim.min.js " type="text/javascript"></script>
<script src="/js/popper.min.js " type="text/javascript"></script>
<script src="/js/bootstrap.min.js " type="text/javascript"></script>
El archivo de JQuery que usa en el framework es la versión reducida, sim embargo se puede usar también la versión completa.
Témplate de ejemplo
Este template HTML incluye algunos de los últimos estándares de diseño y desarrollo de página WEB. Eso significa usar un tipo de documento HTML5 e incluir una meta etiqueta de vista para visualización adecuada en dispositivos móviles como smartphones, tabletas, etc.
Descargar gratis Bootstrap, JQuery y Popper
Versión con carga externa.
<!doctype html>
<html lang="es">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hola, mundo</title>
</head>
<body>
<h1>Hola, mundo</h1>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Versión archivos en local.
Crea los directorios css y js, descarga y descomprime, copia el archivo bootstrap.min.css al directorio css y los archivos jquery-3.2.1.slim.min.js, popper.min.js y bootstrap.min.js al directorio js.
<!doctype html>
<html lang="es">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>Hola, mundo</title>
</head>
<body>
<h1>Hola, mundo</h1>
<script src="/js/jquery-3.2.1.slim.min.js " type="text/javascript"></script>
<script src="/js/popper.min.js " type="text/javascript"></script>
<script src="/js/bootstrap.min.js " type="text/javascript"></script>
</body>
</html>
