*************************** Bootstrap - Template básico *************************** .. note:: ================= ==================================================== Fecha Autores ================= ==================================================== 14 Febrero 2017 * Wladimir Szczerban ================= ==================================================== ©2017 Wladimir Szczerban Excepto donde quede reflejado de otra manera, la presente documentación se halla bajo licencia: Creative Commons (Creative Commons - Attribution - Share Alike: http://creativecommons.org/licenses/by-sa/3.0/deed.es) Bootstrap - Template básico =========================== Crearemos una página Web que contiene un template básico de Bootstrap. Esta página contendrá una barra de navegación fija en la parte superior de la página. #. Crear una carpeta llamada *visor* dentro del directorio htdocs del Apache. :: C:\ms4w\Apache\htdocs\visor #. Crear el archivo *movil.html* dentro de la carpeta visor. En este archivo crearemos la estructura básica del nuestro html y cargaremos las librerías jQuery y Bootstrap. Para ello escribir los siguiente: :: visor reponsivo con Leaflet

Hola mundo, Bootstrap!

#. Agregar la barra de navegación (navbar). Justo debajo de donde comienza la etiqueta *body* escribir lo siguiente: :: #. Abrir el navegador y ver que se muestra la barra de navegación de nuestra aplicación. Podemos ver que el texto *Hola mundo, Bootstrap!* queda debajo de la barra de navegación. :: http://localhost:81/visor/movil.html #. Corregir el error de que el contenido de la página queda debajo de la barra de navegación. Para ello crearemos el elemento contenedor donde pondremos todo el contenido de nuestra Web. Debajo de donde termina la definición de la barra de navegación escribimos los siguiente: ::
#. Mover el elemento H1 con el texto *Hola mundo, Bootstrap!* dentro del contenedor #. Si recargamos la página en el navegador vemos que todavía sale el contenido debajo del navbar. Esto es debido a que falta definir el estilo del contenedor. Para esto escribimos lo siguiente justo antes de donde cerramos el *head* de la página. :: #. Ahora si recargamos la página veremos que el contenido aparece correctamente. .. |logo_template| image:: _images/template_basico.png :align: middle :alt: template básico de Bootstrap +-----------------+ | |logo_template| | +-----------------+