BOOTSTRAP a fondo.

La versión rápida que dimos no explicaba apenas nada. Sólo te daba una forma rápida de acceso al código.
Ahora intentaremos explicar un poco más detenidamente el funcionamiento de este framework.

BOOTSTRAP a fondo.
http://getbootstrap.com/2.3.2/index.html
Dentro de la web podemos encontrar las prestaciones,
http://getbootstrap.com/2.3.2/getting-started.html#file-structure

Scaffolding. "Estilos Globales"
Base CSS "Estilos para HTML, tipos, codigo, tablas, formulario, iconos..."
Components "Componentes como pestañas, píldoras, nabar, alertas, encabezados..."
JavaScript plugins."Componentes interactivos  sobre herramientas, modals..."

Button groups
Button dropdowns
Navigational tabs, pills, and lists
Navbar
Labels
Badges
Page headers and hero unit
Thumbnails
Alerts
Progress bars
Modals
Dropdowns
Tooltips
Popovers
Accordion
Carousel
Typeahead

Para desarrollar a partir de este framework, tan solo deberás modificar tu CSS y/o archivos JS

¿Qué tenemos que tener en cuenta con Bootstrap?
Funciona en base a Html5.
Tiene tipografías y efectos visuales básicos ya predefinidos al igual que colores y tipografías.


¿Cómo funciona?
Bootstrap divide el diseño en 12 columnas. Dotando de un ancho concreto que cumple con los
estándares para trabajar de manera "responsive" (La adaptación responsive no viene incluida por defecto)
(Para activarla incluir


leer más abajo)
Podemos cuadricular eligiendo entre esas 12 columnas cuantas de ellas ocupará cada una de nuestas filas o "span".
Ejemplo:

<div class="row"> <!--Este div delimitará cada una de las columnas-->
<div class="span1"></div>  <!--Este div delimitará cada una de las filas-->
<div class="span11"></div>
</div>

SPAN:
Como decimos partimos de una división de 12. Sí queremos dotar de una columna izquierda el span(a) de "dos partes de la columna" (a) será sustituido por el número 2 y el siguiente span debería tener un 10 para ocupar el ancho total.

span6 / span6
span3 / span 9... 

Una forma muy sencilla de trabajar y normalizar un frontend para grupos de trabajo.

Offset:
Al configurar span4 tendremos otras 8 divisiones libres por la derecha si cerramos con </row>

Del mismo modo que los span no llamados dejan "huecos" los offset pueden ocupar parte de nuestro espacio el cual no queremos rellenar con contenido por la izquierda.

La forma con la que trabajaremos será:

<div class="row"> <!--Este div delimitará cada una de las columnas-->
<div class="span4"></div>  <!--Este div delimitará cada una de las filas-->
<div class="span3 offser2"></div>
</div>

 En este caso concreto dejaremos dos espacios "en blanco" por la izquierda tres partes de la columna ocupadas por el span y el resto hasta 12 libres por la derecha.

Anidando columnas:
Anidar columnas es tan facil como incluir una "row" con sus "span" dentro de otra row.

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

Algo similar a esto.

Sistema de rejilla fluida.
El sistema usa % para los anchos de las columnas. Con lo que los valores tendrán propiedades "responsives". Para dotar una columna de capacidad "responsive" usar.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

La forma de trabajar será igual a la anteriormente descrita, row, span*, offset* en proporciones *=número 1-12.

Anidar de manera fluida.
A la hora de anidar de manera fluida se trabajará con algunas diferencias.
<div class="row-fluid">

  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

En este caso crearemos un "row-fluid"  un "span12" que ocupe el total y dentro de esta fila una "row-fluid"

Sí necesitásemos una capa ajustada fluida o no fluida fuera de nuestra grid.
Podríamos crear un <div class="container"> que trabajaría con independencia de lo descrito anteriormente.

Por la misma necesidad disponemos también de la posibilidad de aumentar las prestaciones del "container"
de forma fluida con <div class="container-fluid">

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">

      <!--Sidebar content-->

    </div>

    <div class="span10">

      <!--Body content-->

    </div>

  </div>

</div>

Para activar la característica "responsive" debemos incluir al principio de nuestro código:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Con la primera definimos que en la vista el ancho incial esté escalado a 1.0 e incluimos nuestro código css generado en valores % que nos permitirá disfrutar de nuestro contenido en cualquier dispositivo.

Las Media Queries permiten customizar nuesto CSS basado en condiciones, ratios, anchos... pero se centran  sobre todo en "min-width" y "max-width" (Un ancho mínimo y un máximo).

Modificando el ancho de la columna en nuestra rejilla (Grid), haciendo "flotantes" nuestros elementos y re dimensionando nuestras cabeceras. h1, h2, h3....

Los principales medios usados por bootstrap son:

Dispositivos	Ancho total	Ancho columna	Ancho
Pantallas de escritorio	1200px u superior	70px	30px
Por defecto	980px y superior	60px	20px
Portátiles y tablet	768px  y superior	42px	20px
Tablet y teléfonos	767px y menos tamaño	Columna fluida
Teléfonos	480px y menos tamaño	Columna fluida

Vendrán implementados en el CSS como:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Se generan "class"  utiles para un diseño "responsive" adaptado a móviles.
Todas ellas se deberán encontrar en "responsive.less" (Archivo incluido en la descarga inicial)

Class	Teléfono767px  y menor	Tablets979px  a  768px	EscritorioDefault
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden