Download - Sitio web (bootstrap 3)
Emerson Garay
www.youtube.com/emergaray
http://www.slideshare.net/emergar
Sitio WEB (Bootstrap 3)
• 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
• 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
“Responsive” (Sensible o Adaptativo)
http://www.slideshare.net/emergar
col-lg-*
col-md-* col-sm-*
col-xs-*
• 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
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
Descargar desde el sitio oficial: getbootstrap.com
http://www.slideshare.net/emergar
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
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
http://www.slideshare.net/emergar
Estructura de Rejillas de Bootstrap
Código para mostrar tres columnas de 4 celdas
http://www.slideshare.net/emergar
Tipos y Tamaños de los Botones
http://www.slideshare.net/emergar
http://www.slideshare.net/emergar
Botones
http://www.slideshare.net/emergar
Código anterior 01
http://www.slideshare.net/emergar
Código anterior 02
Código anterior 03
http://www.slideshare.net/emergar
Ejemplo de una Página Principal usando Bootstrap
http://www.slideshare.net/emergar
Todos los Iconos disponibles
http://www.slideshare.net/emergar
Nombre de algunos Iconos disponibles
http://www.slideshare.net/emergar
• 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