sitio web (bootstrap 3)
DESCRIPTION
Primeros pasos con el Framework CSS de Bootstrap 3 v. 3.2TRANSCRIPT
![Page 1: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/1.jpg)
Emerson Garay
www.youtube.com/emergaray
http://www.slideshare.net/emergar
Sitio WEB (Bootstrap 3)
![Page 2: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/2.jpg)
• 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
![Page 3: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/3.jpg)
• 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
![Page 4: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/4.jpg)
“Responsive” (Sensible o Adaptativo)
http://www.slideshare.net/emergar
col-lg-*
col-md-* col-sm-*
col-xs-*
![Page 5: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/5.jpg)
• 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
![Page 6: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/6.jpg)
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
![Page 7: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/7.jpg)
Descargar desde el sitio oficial: getbootstrap.com
http://www.slideshare.net/emergar
![Page 8: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/8.jpg)
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
![Page 9: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/9.jpg)
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
![Page 10: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/10.jpg)
http://www.slideshare.net/emergar
Estructura de Rejillas de Bootstrap
![Page 11: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/11.jpg)
Código para mostrar tres columnas de 4 celdas
http://www.slideshare.net/emergar
![Page 12: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/12.jpg)
Tipos y Tamaños de los Botones
http://www.slideshare.net/emergar
![Page 13: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/13.jpg)
http://www.slideshare.net/emergar
Botones
![Page 14: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/14.jpg)
http://www.slideshare.net/emergar
Código anterior 01
![Page 15: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/15.jpg)
http://www.slideshare.net/emergar
Código anterior 02
![Page 16: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/16.jpg)
Código anterior 03
http://www.slideshare.net/emergar
![Page 17: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/17.jpg)
Ejemplo de una Página Principal usando Bootstrap
http://www.slideshare.net/emergar
![Page 18: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/18.jpg)
Todos los Iconos disponibles
http://www.slideshare.net/emergar
![Page 19: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/19.jpg)
Nombre de algunos Iconos disponibles
http://www.slideshare.net/emergar
![Page 20: Sitio web (bootstrap 3)](https://reader034.vdocuments.site/reader034/viewer/2022051212/557b824fd8b42a2d298b5407/html5/thumbnails/20.jpg)
• 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