Diapositivas del framework de desarrollo web frontend Bootstrap

1. BOOTSTRAP
●
Contexto
●
¿Qué es?
●
¿Por qué?
●
Conclusión
●
Preguntas
Por J. Alberto Casero

2. CONTEXTO

3. ¿QUÉ ES BOOTSTRAP?
●
Framework Front-End orientado a CSS y Javascript (jQuery)

4. ¿QUÉ ES BOOTSTRAP?
●
Creado por Mark Otto y Jacbod Thornton de
●
Lanzado en Agosto 2011
●
Dos versiones clave: 2.0 (2012) y 3.0 (Dic. 2013)
●
Proyecto en Github

5. ¿QUÉ ES BOOTSTRAP?

6. ¿QUÉ ES BOOTSTRAP?

7. ¿QUÉ ES BOOTSTRAP?

8. ¿POR QUÉ BOOTSTRAP?
●
Usabilidad
●
Bien Estructurado
●
Completo
●
Siempre a la Moda
●
Multidispositivo
●
Gran Comunidad

9. USABILIDAD
●
Fácil de Instalar
–
Descargar CSS, JS y fuentes.
–
CDN
–
Código fuente LESS y JS

10. USABILIDAD
●
Soporte en navegadores
–
Excepciones
●
●
IE8
IE7-
respond.js
No merece la pena

11. USABILIDAD
●
Fácil de Integrar
–
Independiente de Backend
–
Gestores de Contenido
–
E-Commerce

12. USABILIDAD
●
Personalizable
Resultado
Normal
Hover

13. BIEN ESTRUCTURADO
●
LESS, JS y Glyphicons
●
Uso de preprocesador CSS
●
Marcan el camino a la hora de estructurar un CSS
–
Clases
–
Selectores

14. BIEN ESTRUCTURADO

15. COMPLETO
●
Sistema de Grid
●
Tabs
●
Tablas
●
Popovers
●
Formularios
●
Collapse
●
Botones
●
Carousel
●
Imágenes
●
Y muchos más...
●
Navegación
●
Contenedores
●
Listas
●
Ventanas Modales

16. COMPLETO
●
Sistema de Grid
–
Filas de 12 columnas

17. COMPLETO
●
Sistema de Grid
–
Valores Responsive: xs, sm, md y lg
–
Anidamiento
–
Offseting

18. COMPLETO
●
Tablas
–
Básica
–
Striped

19. COMPLETO
●
Tablas
–
Con bordes
–
Hover
–
Condensada
–
Con colores
–
Responsive

20. COMPLETO
●
Formularios

21. COMPLETO
●
Formularios
–
Inline
–
Horizontal

22. COMPLETO
●
Formularios
–
Tipo de Inputs

23. COMPLETO
●
Formularios
–
Tamaños de Inputs

24. COMPLETO
●
Formularios
–
Estados de Inputs

25. COMPLETO
●
Formularios
–
Grupos de Inputs

26. COMPLETO
●
Botones: Tipos

27. COMPLETO
●
Botones: Tamaños

28. COMPLETO
●
Botones: Estados
Activo
Desactivado

29. COMPLETO
●
Imágenes
–
Responsive

30. COMPLETO
●
Navegación
–
Tabs/Pestañas
–
Pills

31. COMPLETO
●
Navegación
–
Barra de Navegación
–
Static vs Fixed
–
Responsive

32. COMPLETO
●
Contenedores
–
Container
–
Jumbotron

33. COMPLETO
●
Contenedores
–
Panels
–
Wells

34. COMPLETO
●
Listas
–
Grupo

35. COMPLETO
●
Listas
–
Thumbnails

36. COMPLETO
●
Listas
–
Media

37. COMPLETO
●
Ventanas Modales

38. COMPLETO
●
Tabs

39. COMPLETO
●
Popovers

40. COMPLETO
●
Collapse

41. COMPLETO
●
Carousel

42. COMPLETO
●
Otros elementos
–
Tipografía
–
Iconos
–
Breadcrumbs
–
Paginación
–
Etiquetas
–
Barras de progreso
–
Alertas
–
Scrollspy
–
Tooltips

43. SIEMPRE A LA MODA
●
Marca tendencia en diseño (Twitter)
●
Versión 3.0
–
Diseño Plano
–
Bien enfocado a móvil

44. SIEMPRE A LA MODA
●
Versión 2.3.3 Disponible

45. MULTIDISPOSITIVO

46. MULTIDISPOSITIVO
●
HTML
●
CSS

47. MULTIDISPOSITIVO
●
HTML
●
Sistema de Grid (xs, sm, md, lg)
●
Visible / Oculto
●
Particularidades de elementos

48. MULTIDISPOSITIVO

49. MULTIDISPOSITIVO
●
Visible / Oculto

50. MULTIDISPOSITIVO
●
Mostly Fluid

51. MULTIDISPOSITIVO
●
Column Drop

52. MULTIDISPOSITIVO
●
Layout Shifter

53. MULTIDISPOSITIVO
●
Tiny Tweaks

54. MULTIDISPOSITIVO
●
Off Canvas

55. GRAN COMUNIDAD
●
Gran comunidad = Muchos recursos
–
Página oficial
–
Bootply
–
Bootswatch
–
Bootsnipp
–
Font Awesome
–
Bootstrap Gallery
–
Páginas hechas con Bootstrap

56. CONCLUSIONES
●
Bootstrap facilita el manejo de estilos tanto a desarrolladores
orientados a diseño como, sobre todo, a los que no quieren
preocuparse de ello
●
Ahorra mucho tiempo a la hora de generar estilos
●
Es superior a otros frameworks como Foundation o Gumby