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