Vamos a comenzar a utilizar Bootstrap trabajando en nuestra primera página. Comencemos.
Añadir el doctype HTML5
Bootstrap usa elementos HTML y propiedades CSS, los cuales requieren que se incluya el tipo de documento doctype HTML5, el cual le va a indicar al navegador que se trata de una página web HTML5.
Siempre incluir el doctype HTML5 al principio de la página, veamos el código que tenemos que incluir.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
</html>
Bootstrap 4 es mobile-first
Bootstrap 4 está diseñado para ser responsive en todo tipo de móviles. Los estilos mobile-first son parte del núcleo del framework. Para garantizar que esto se cumpla, dentro de nuestra etiqueta meta añadiremos la siguiente sintaxis.
<meta name="viewport" content="width=device-width, initial-scale=1">
La parte width=device-width establece el ancho de la página para seguir el ancho de la pantalla del dispositivo (que variará según el dispositivo). La parte initial-scale=1 establece el nivel de zoom inicial cuando el navegador carga por primera vez la página.
Contenedores
Bootstrap 4 también requiere un elemento de contenedor para envolver el contenido del sitio, para ello encontramos dos clases de contenedor, que son:
- .container: esta clase proporciona un contenedor de ancho fijo sensible.
- .container.fluid: esta clase proporciona un contenedor de ancho completo, que abarca todo el ancho de la pantalla.
2 páginas Bootstrap 4 básicas
El siguiente ejm muestra el código para una página básica Bootstrap (con el modelo .container).
<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap 4, Ejemplo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Mi primera página Bootstrap</h1>
<p>Este puede ser cualquier párrafo</p>
</div>
</body>
</html>
Ahora, el siguiente ejm utilizará la clase .container.fluid.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap 4, Ejemplo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Mi primera página Bootstrap</h1>
<p>Parrafo donde podría lo que necesitara</p>
</div>
</body>
</html>