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.