Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Sitio web (bootstrap 3)

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 20 Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Anuncio

Similares a Sitio web (bootstrap 3) (20)

Más de Emerson Garay (20)

Anuncio

Más reciente (20)

Sitio web (bootstrap 3)

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

×