Bootstrap

Bootstrap

Es un framework de diseño web que le da estilo a nuestros elementos de HTML. Aunque seamos de los desarrolladores que no conocemos a fondo CSS y el diseño no sea lo nuestro, Bootstrap nos la pone fácil; con solo ponerle una clase, nuestro elemento ya toma el estilo que le da Bootstrap y también nosotros podemos personalizarlo a nuestro gusto con CSS.

Bootstrap también incluye componentes de Javascript como animaciones en carrousel, los cuales 

podemos aplicar dentro de nuestro proyecto y adapartarlos a nuestros gustos.

Formas de integrar Bootstrap a nuestras páginas web:

1. Bootstrap CDN: solo se agregan unas líneas en el HEAD de nuestro HTML. Estos links hacen referencia los archivos CSS y JS de Bootstrap en algún servidor, por lo que necesitamos internet en todo momento con este método.
   
   

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   



2. Bootstrap Compiled & Minified: son los archivos CSS y JS de Bootstrap ya compilados, tenemos que poner estos archivos en nuestro proyecto, y en el HEAD hacer referencia a estos.
3. Boostrap Source Code: se aplica de la misma manera que el anterior, la diferencia es que estos archivos no vienen compilados (pesa más que el anterior) e incluyen unos ejemplos.

Grid System

Bootstrap utiliza un sistema de cuadrículas responsive lo que significa que esto ayuda a que nuestro sitio se adapte a cualquier resolución de pantalla (desde teléfonos móviles hasta grandes pantallas).

El Grid System funciona como si el body de nuestro página fuera una "gran tabla de 12 columnas". Esto quiere decir que nuestra pagina está organizada horizontalmente en 12 partes, y nosotros indicamos cuantas columnas queremos que utilice cada parte de nuestra página.

En la imagen de arriba tenemos una página que, en la parte de arriba tenemos un banner que abarca todo el ancho de la página, al lado izquierdo tenemos una barra de navegación de menus, en el centro está el contenido de nuestra página, y al lado derecho tenemos un formulario.

Esta maquetación se puede lograr con Boostrap de esta manera: literalmente tenemos 2 filas; en una fila se encuentra unicamente el banner y en la segunda fila se encuentra la barra de navegación, el contenido y el formulario.

¿Recuerdas que te dije Bootstrap crea una especie de "tabla con 12 columnas"?, el banner se encuentra en la primer fila y está tomando todo el ancho, lo que quiere decir que toma 12 columnas. 

En la segunda fila, nuestra barra de navegación está tomando 2 columnas, el contenido está tomando 7 columnas y el formulario está tomando 3 columnas, lo que nos da un total 12 columnas. 

¿Cómo se le aplica Boostrap a nuestros elementos HTML?

Después de que ya tenemos maquetada nuestra página, darle estilo a nuestros componentes es lo más sencillo. Basta con añadirles una clase como atributo a nuestro elemento y voilà!

Ejemplo: si le quisieramos dar estilo a un botón que tenemos en HTML, lo haríamos algo así: 

<button type="button" class="btn btn-default">Botón con Bootstrap</button>

Ejemplos: