Homemade Goods

This Year's Best

See all

kitchen

woodwork

gifts

antiques

Conectarse a Bootstrap

Antes que nada, tal como con un archivo CSS, se debe hacer una conexion a Bootstrap para que funcione, por lo cual es necesario agregar el siguiente codigo en el head del HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

On the Grid

Una de las cosas más utiles de Bootstrap es que permite el uso de un Grid con el cual se puede personalizar mejor la pagina web.

Bootstrap Grid

Header/Navigation

Esta pagina tiene varios cambios que hacen que se vea diferente, para empezar tiene un header que sigue el siguiente codigo:

<header class="container"> <div class="row"> <h1 class="col-sm-4">Heading <nav class="col-sm-8 text-right"> <p>nav item 1</p> <p>nav item 2</p> <p>nav item 3</p> </nav> </div> </header>

The jumbotron

Esta es un area grande, bajo el header que se utiliza para poner informacion, entre la informacion que se puede colocar hay, por ejemplo, imagenes. El codigo se puede ver en la seccion de HTML justo bajo el header

Supporting Content

Es la manera de colocar contenido usando Bootstrap, con esto se puede mejorar la interfaz y acomodar a la manera deseada. Para esto se usa el tag container, el cual permite acomodar el contenido de diferentes maneras.

Footers

Esta es la parte mas baja de la pagina web, donde se ven elementos como la informacion legal o datos importantes de la empresa o del dueño de la pagina web.

Se usa el tag footer para separar esta seccion, pero igualmente va dentro del body