Página básica

Bootstrap utiliza ciertos elementos HTML y propiedades CSS que requieren el uso del doctype de HTML 5 para que funcionen, por lo que es importante añadirlo a todas nuestras páginas:

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

Además para asegurar que se muestra correctamente en dispositivos móviles y que permite la utilización del zoom al arrastrar tenemos que añadir la siguiente etiqueta meta dentro de la cabecera <head>:

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

La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles como width=600 o con un valor especial como device-width que es el equivalente al ancho de la pantalla en píxeles del dispositivo que cargue la web. El atributo shrink-to-fit="no" configura este mismo comportamiento para los navegadores Safari anteriores a la versión 9.

La propiedad initial-scale del viewport controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades maximum-scale, minimum-scale, y user-scalable controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página. Si añadimos a la etiqueta meta del _viewport _el atributo user-scalable=no (como se puede ver en el ejemplo inferior) podemos deshabilitar el zoom para dispositivos móviles. De esta forma los usuarios únicamente podrán usar el scroll de la aplicación, haciendo tu web más similar a una aplicación nativa. Sin embargo, hay que usar esta característica con cuidado ya que no es recomendable para todos los sitios.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no", 
                               maximum-scale=1, user-scalable=no">

A continuación se incluye la plantilla HTML base para cualquier proyecto con Bootstrap, a partir de la cual se tendrán que ir añadiendo el resto de elementos:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required 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-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Como se puede ver hemos añadido la etiqueta meta de cabecera y hemos cargado la hoja de estilo de Bootstrap y las librerías Javascript que vamos a necesitar (JQuery, Bootstrap y Popper). También hemos añadido la etiqueta h1 con "Hello world! dentro del cuerpo de la web, que será donde podremos empezar a escribir el contenido de nuestro sitio web responsive.

PreviousProbando el responsiveNextSistema de rejilla

Last updated