Nuestra primera página con Bootstrap

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.

Contenedores

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>