Bootstrap es un framework CSS popular para diseño de sitios web responsivos. Proporciona componentes como una rejilla de 12 columnas y tipografía estandarizada, además de facilitar el desarrollo mobile-first. Bootstrap es de código abierto, se descomprime en el sitio web y utiliza buenas prácticas que perduran en el tiempo como HTML5 y CSS3.

1. Emerson Garay
www.youtube.com/emergaray
http://www.slideshare.net/emergar
Sitio WEB (Bootstrap 3)

2. •Boostrap es un framework CSS, liberado por Twitter y muy popular hoy en día.
•Bootstrap Está pensado para hacer un desarrollo Mobile First (Primero para los dispositivos Mobiles)
•Bootstrap incluye un sistema de rejilla responsive de 12 columnas
¿Qué es Bootstrap?
http://www.slideshare.net/emergar

3. •Utiliza componentes y servicios creados por la comunidad web.
•Utiliza un conjunto de buenas prácticas que perdurarán en el tiempo.
•Utiliza HTML5 y CSS3
•Implementa un sistema de rejillas, que por defecto incluye 12 columnas.
•Hay una enorme comunidad detrás.
•Herramienta sencilla y ágil para construir sitios web e interfaces.
•Tiene un theme por defecto bastante optimizado y que puedes modificar fácilmente.
•Utiliza LESS, un preprocesador CSS. (Ahora también soporta Saas).
•Es OOCSS, osea CSS Orientado a Objetos: organizado por módulos independientes y reutilizables.
Ventajas
http://www.slideshare.net/emergar

4. “Responsive”
(Sensible o Adaptativo)
http://www.slideshare.net/emergar
col-lg-*
col-md-*
col-sm-*
col-xs-*

5. •Es necesario adaptarse a su forma de trabajo, si bien su curva de aprendizaje es liviana, deberás comprender y familiarizarte con su estructura y nomenclatura.
•Debes adaptar tu diseño a un grid de 12 columnas.
•Trae anchos y márgenes por defecto, que a veces son un poco tediosos de cambiar.
•Es complicado cambiar de versión si has realizado modificaciones profundas sobre el core.
•Si necesitas añadir componentes que no existen, debes hacerlos tú mismo en CSS y cuidar de que mantenga coherencia con tu diseño y cuidando el responsive.
•A veces hacer implementar un diseño impuesto, puede llegar a resultar bastante difícil, al menos si eres un perfeccionista.
Desventajas
http://www.slideshare.net/emergar

6. El sistema de rejilla de Bootstrap funciona así:
•Se deben colocar .row dentro de un .container (ancho fijo) o .container-fluid (ancho completo).
•Utilice .row para crear grupos horizontales.
•El contenido se debe colocar entre .row y deben de ser hijos inmediatos.
•Si hay más de 12 columnas en una .row, esta son desplazadas abajo.
Funcionamiento
http://www.slideshare.net/emergar

7. Descargar desde el sitio oficial: getbootstrap.com
http://www.slideshare.net/emergar

8. Código CSS con los comentarios de ayuda y texto formateado
Código CSS sin comentarios (versión comprimida para producción)
Estructura del paquete Bootstrap 3 v. 2
http://www.slideshare.net/emergar

9. 1.Se descomprime el paquete de Bootstrap
2.Pasar los dos archivos .css de versión compacta(.min) a la carpeta de las Hojas de Estilo en Cascada(css), es decir:
bootstrap.min.css y
bootstrap-theme.min.css
3.Copiar el archivo bootstrap.min.js a la carpeta JavaScript(js)
4.Pasar completamente la carpeta fonts a la del SitioWEB
http://www.slideshare.net/emergar
Descomprimir el paquete Bootstrap y pasarlos a la carpeta del Sitio WEB

10. http://www.slideshare.net/emergar
Estructura de Rejillas de Bootstrap

11. Código para mostrar tres columnas de 4 celdas
http://www.slideshare.net/emergar

12. Tipos y Tamaños de los Botones
http://www.slideshare.net/emergar

13. http://www.slideshare.net/emergar
Botones

14. http://www.slideshare.net/emergar
Código anterior 01

15. http://www.slideshare.net/emergar
Código anterior 02

16. Código anterior 03
http://www.slideshare.net/emergar

17. Ejemplo de una Página Principal usando Bootstrap
http://www.slideshare.net/emergar

18. Todos los Iconos disponibles
http://www.slideshare.net/emergar

19. Nombre de algunos Iconos disponibles
http://www.slideshare.net/emergar

20. •http://librosweb.es/bootstrap_3/
•http://www.taringa.net/posts/hazlo-tu- mismo/17337154/Bootstrap-3-Tutorial.html
•http://www.mediavida.com/foro/dev/tutorial- bootstrap-para-principantes-487865
•http://www.tutosytips.com/4-complementando- el-grid-de-bootstrap-3/
•http://asanzdiego.github.io/curso-interfaces- web-2014/05- bootstrap/slides/export/bootstrap.html
Cibergrafia
http://www.slideshare.net/emergar