[BootStrap] MiniTutorial Parte 1

Introducción

Bueno amigos esta es la primera parte de algunas series que haré sobre bootstrap, en las cuales empezaremos explicando cosas basicas y al final crearemos nuestra plantilla.

¿Que es Bootstrap?

 

Bootstrap es una librería front-end que esta mantenida por dos desarrolladores que anteriormente trabajaban en twiter (Mark otto y Jacob Thornton). Que puede ser modificable para utilizarla en tus desarrollos webs, además de que es web responsive design.

Estructura de Bootstrap

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Esa es la estructura básica para usar bootstrap
Como puedes observar estos son los archivos mínimos necesarios para empezar a utilizar bootstrap...

Plantilla Básica HTML usando Bootstrap

Para empezar creando una plantilla basica usando bootstrap no es necesario, crear demasidado codigo, lo de aqui seria jugar con clases que vienen en los css, que veremos mas adelante...

Como puedes ver el resultado arriba ya esta aplicado los estilos a la cabecera que escribi... utilize los estilos comprimidos al igual el js comprimido... una cosa aqui es que si te das cuenta estoy guardando mi proyecto en mi localhost, lo cual no es necesario (lo hago por gusto) ya que como es front-end no es necesario utilizar un servidor web para poder probarlo.
Además es importante el uso de !DOCTYPE como etiqueta en este caso se requiere para usarlo en navegadores modernos.

Estilos globales y su importancia

Una de las cosas importantes es que en nuestros estilos podemos ver como bootstrap.css utiliza normalize.css que lo que hace es resetear nuestros html a 0, es decir, medidas a 0. Con esto se asegura de que la visibilidad sea la misma para todos los navegadores al aplicar nuestros estilos... y como les dije así aplicando Web responsive design.

Otras caracteristicas son que en el body no hay margen, el color del body es blanco, @baseFontFamily @baseFontSize @baseLineHeight  @linkColor son algunas variables que pueden ser personalizadas.

Sistema Cuadricula

Por defecto bootstrap contiene una sistema de cuadricula que contiene 12 columnas, esto es para que no de un tamaño de pantalla segun sea el dispositivo que nos este viendo, para ello claro tenemos que añadir nuestro archivo bootstrap-responsive.css, lo cual veremos mas adelante...

En la imagen anterior podemos darnos cuenta que en el código, existen dos clases la cuales son .row y .span[numero] siendo row nuestra fila y span nuestro numero de columnas...
Con el numero de columnas le damos un tamaño a nuestra fila... Ejemplo:

span12 - 940px
span11 - 860px
span10 - 780px
span9 - 700px
span8 - 620px
span7 - 540px
span6 - 460px
span5 - 380px
span4 -  300px
span3 - 220px
span2 - 140px
span1 - 60px

Entonces como mostramos el primer lorem ipsum tenemos 940px despues tenemos 620px 300px que dan como resultado  920px acercandose mucho a span12 pero con ello puedes ver como creamos nuestra fila con nuestro tamaño, te estaras preguntando ¿y esto para que lo hacemos?, pues muchas veces algunos diseñadores web utilizan cuadriculas en su diseños para que se vean fijos en las webs de manera que en todas las webs se vean igual...

Acomodar las columnas

Una cosa importante al utilizar las cuadriculas seria acomodar las columnas de manera que le demos un margen izquierdo... Si alguna ves vistes algo de CSS recordaras que el margen es lo de fuera del borde...

Para realizar esto en bootstrap utilizaremos la clase .offset la cual podemos ver todos sus tamaños en el archivo bootstrap.css

Entonces le daré un offset a nuestra columna span12 de 100px(offset1) que nos dara un margen izquierdo en el como puedes comparar la siguiente imagen con la de arriba (lo amarillo es lo que acabamos de aplicar offset1):

Anidación de columnas

A anidación me refiero que puede haber una columna dentro de otra...
Como en este ejemplo:

Todo esto lo hemos visto arriba lo único que estamos haciendo es poner una fila dentro de otra fila, algo que es algo interesante es que la clase .row agrega por defecto un margen izquierdo de -20px por lo cual tuve que ingresarle un .offset2 ala primera columna de la segunda fila ya que se hereda... en caso de que quisiéramos que todo quedara Fixed podriamos usar la clase .row-fluid en lugar de .row de manera que quedara tal y como debe ser.

Capas

Una de las muchas cosas utilizadas en el diseño web son las capas y esta seria una de las cosas mas importantes que veremos en esta parte con la cual podríamos usar la clase .container o .container-fluid con la cual centramos nuestro contenido y con container-fluid le damos un espacio por dentro...
Un buen ejemplo seria poner nuestra barra lateral y contenido, que cuando inicias un proyecto siempre divides tu web de manera que quede como tu lo decidistes...

Como puedes ver usamos todo lo visto hasta ahora y container-fluid, que es el de ahora mismo, y para que distinguieramos las cosas le agregue unos estilos aparte de los colores y un border y un margen arriba para que se viera con colores como es que estamos creando nuestras capas y dividiendolas usando solo las clases de bootstrap...

Responsive Web Design (Vista de diseño adaptable)

Esto se refiere que nuestro diseño se adapta al dispositivo donde lo estemos mirando para ello agregaremos nuestro CSS y una etiqueta meta...

Dentro del head agregamos lo siguiente:

Con esto nuestra pagina web se ira adaptando segun las escalas de los dispositivos que se esten usando en el momento....

Un ejemplo para ello es utilizar el inspector de elemento de firefox y utilizar el icono vista diseño adaptable para ir viendo como quedaria nuestro diseño en diferentes resoluciones...

Y hasta aqui la primera parte de este minitutorial espero traer la segunda parte pronto...

Sitio referencia:
http://getbootstrap.com