# 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:

```markup
<!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>`:

```markup
<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.

```markup
<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:

```markup
<!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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajgallego.gitbook.io/bootstrap-4/pagina-basica.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
