Página básica
Last updated
Last updated
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:
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>:
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.
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:
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.