Bootstrap es un framework que nos puede facilitar mucho la vida a la hora de hacer que nuestra web tenga un diseño responsive, y por lo tanto que la misma se adapte a las distintas y variadas resoluciones de pantalla que encontramos actualmente.
Nos ofrece soluciones sobre todo para el CSS de nuestro proyecto, ya que nos da el diseño previo de muchos componentes típicos, como pueden ser: botones, tablas, labels, enlaces… Existen muchos otros frameworks parecidos a Bootstrap que ofrecen soluciones similares, como pueden ser: [line_list]
[/line_list]
La ventaja que nos ofrece Bootstrap, sin entrar en aspectos técnicos, es su documentación, gráfica e intuitiva. Nos aporta ya de entrada ejemplos de lo que podemos hacer y solo con incluir los archivos necesarios y cambiar las clases de nuestros elementos html ya le estaremos dando el estilo definido por Bootstrap.
Lo primero que debemos hacer es incluir los archivos de Boostrap en nuestro proyecto, los mismo los encontramos
aquí.
En está ocasión vamos a descargar la versión compilada. Está sería la opción ideal para un entorno de desarrollo. Son archivos comprimidos que ocuparán menos espacio y cargarán más rápido. La estructura de la carpeta es la siguiente:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff[divider] [/divider]
Vamos ahora hacer un pequeño ejemplo, donde incluiremos Bootstrap en nuestro proyecto:
<!doctype html> <!--css de bootstrap-->
Table of contents
Hola Mundo!
Como verás simplemente he añadido las clases css que nos proporciona Bootstrap y listo.
Vamos ahora a hacer una pequeña aproximación al verdadero potencial de Bootstrap; su sistema de 12 de columnas. Y vamos a hcer algo sencillo, pero que a todos los desarrolladores web nos ha dado alguna vez algún que otro dolor de cabeza cuando lo vamos a hacer…centrar un elemento:
<!doctype html> <!--css de bootstrap-->
Hola Mundo! Soy un div completamentamente centrado ;)
Resultado:
Hemos conseguido centrar nuestro texto metiendolo simplemente dentro de un div con la clase container, sencillo no? Pero Bootstrap podemos ir mucho más allá, y podemos especificar como queremos que se vean nuestros elementos en un móvil, en una tablet, pantallas de tamaño medio…
<!doctype html> <!--css de bootstrap-->
Hola Mundo! Soy un div completamentamente centrado ;)
Soy un texto que me adaptaré a las distintas resoluciones
Yo me ocultaré en dispositivos móviles
El resultado:
Como verás el texto se irá adaptando de la forma que le hemos especificado a las distitas resoluciones. Para un pantalla grande se colocarán uno al lado del otro, el primero ocupara el espacio de 4 columnas y el segundo el de 6…vemos que no es complicado, solo dependerá de nuestra imaginación. Luego a medida que vayamos redimensionando se colocarán uno debajo del otro, y no de cualquier manera, sino como se lo hemos especificado en el sistema de columnas. Y por último al llegar a la resolución móvil, el segundo texto se ocultará y el primero cogerá todo el ancho de la pantalla.
Para trabajar con el sistema de columnas de Bootstrap solo tienes que tener en cuenta que la pantalla se dividirá en un máximo de 12 columnas, a partir de ahí podrás disponerlas como quieras.
Por último en este tutorial de introducción a Bootstrap vamos a incluir un botón, como muestra de los componentes que tendremos a nuestra disposición:
<!doctype html> <!--css de bootstrap-->
El resultado:
Como vemos Bootstrap no dará facilidades para nuestros desarrollos tanto para programadores que odian el diseño, como a los diseñadores que lo aman.
