1.1. La primera plantilla Bootstrap (Bootstrap 4, el manual oficial)

Antes de utilizar Bootstrap, asegúrate de que tus páginas están preparadas para los estándares más recientes de HTML. Entre otras cosas, eso significa que deben utilizar el doctype de HTML5 e incluir una etiqueta <meta> para definir el viewport. En definitiva, la estructura básica de tus páginas debería ser:

<!doctype html>
<html lang="en">
  <head>
    <!-- Etiquetas <meta> obligatorias para Bootstrap -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Enlazando el CSS de Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>¡Hola Mundo!</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>

    <!-- Opcional: enlazando el JavaScript de Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Antes de comenzar a diseñar el layout o estructura de contenidos de las páginas, es necesario tener en cuenta algunas cosas importantes.

1.1.1. Se requiere el doctype de HTML5

Bootstrap utiliza algunos elementos HTML y algunas propiedades CSS que requieren el uso del doctype de HTML5. No olvides incluir este doctype en todas tus páginas con el siguiente código:

<!doctype html>
<html lang="en">
  ...
</html>

1.1.2. Diseño "responsive"

Bootstrap promueve el diseño de tipo "mobile first", en el que primero se diseñan los contenidos para que se vean bien en un móvil y luego se hacen los ajustes necesarios para que se vea bien en dispositivos más grandes como tablets y ordenadores de sobremesa.

Añade la siguiente etiqueta <meta> para que los contenidos se vean bien por defecto en los móviles y el zoom funcione como esperan los usuarios:

<head>
    <!-- ... -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

1.1.3. La propiedad `box-sizing`

Para que sea más fácil controlar con CSS la anchura/altura de los elementos, Bootstrap cambia el valor de la propiedad box-sizing para no usar el valor por defecto content-box y en su lugar usar border-box. Este cambio hace que la propiedad padding no afecte al tamaño final de los elementos, pero podría causar algunos pequeños errores con código de terceros como Google Maps o Google Custom Search Engine.

Si alguna vez tienes que cambiar este valor para algún elemento concreto, utiliza lo siguiente:

.selector-de-algun-elemento {
  box-sizing: content-box;
}

1.1.4. Normalización de estilos

Bootstrap utiliza la hoja de estilos Reboot para homogeneizar la forma en la que los diseños se ven en diferentes navegadores y para aplicar un estilo por defecto ligeramente diferente a algunos elementos HTML.

1.1. La primera plantilla Bootstrap

1.1.1. Se requiere el doctype de HTML5

1.1.2. Diseño "responsive"

1.1.3. La propiedad box-sizing

1.1.4. Normalización de estilos

1.1.3. La propiedad `box-sizing`