Este documento proporciona una introducción a Bootstrap, el popular framework de código abierto para el desarrollo de sitios web y aplicaciones web. Explica los principios básicos de Bootstrap, incluida su rejilla de 12 columnas y enfoque "mobile-first". También describe varios componentes clave como etiquetas, desplegables, barras de navegación y formularios que se pueden utilizar para crear interfaces adaptables. Finalmente, cubre temas como la personalización de Bootstrap y el uso del preprocesador CSS subyacente Less.

1. Tecnologías Web de Cliente
Bootstrap

2. Profesores
Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211
2
Carlos A. Iglesias

3. 1.
Principios Para qué vale
3

4. Framework
HTML CSS y JS
Componentes para realizar webs
multidispositivo de forma rápida y con calidad
4

5. ‘’
5
“[A] super small group of
developers and I got together
to design and build a new
internal tool and saw an
opportunity to do something
more. Through that process,
we saw ourselves build
something much more
substantial than another
internal tool. Months later, we
ended up with an early
version of Bootstrap as a way
to document and share
common design patterns and
assets within the company”
Mark Otto, 2011, Creador de Bootstrap

6. ‘’
6
Bootstrap:
the most popular HTML, CSS,
and JS framework for
developing responsive,
mobile first projects on the
web.

7. 7

8. Bootstrap
8

9. Alternativas a Bootstrap
9
Foundation Semantic UI
http://foundation.zurb.com http://semantic-ui.com/

10. 10
¿Qué incluye Bootstrap?
CSS
Iconos
(fonts)
JavaScript
sobre
jQuery

11. Cosas que hay que saber de Bootstrap
Framework
Bootstrap ha sido
desarrollado por Twitter y
liberado con licencia MIT
Grid
Bootstrap se basa en una
rejilla (grid) de 12 columnas
Primero móvi
Bootstrap sigue el enfoque
“mobile-first design”:
diseñamos para móviles y
mejoramos para escritorio
Framework
Un framework nos da una
base que extendemos para
construir aplicaciones.
Bootstrap proporciona CSS,
JS, iconos y componentes
Less
El fuente de Bootstrap usa
Less, un lenguaje de estilos
dinámico (con variables o
mixins), que se puede
compilar a CSS
Referencias
Hay disponibles temas y
herramientas visuales para
personalizar o crear interfaces
con bootstrap
11

12. Degradación Gradual y
Mejora progresiva
12

13. Degradación Gradual y
Mejora progresiva
13

14. Degradación Gradual y
Mejora progresiva
14

15. Diseño adaptable
15
http://brettjankord.com/2013/01/30/you-keep-using-that-word-i-do-not-think-it-
means-what-you-think-it-means/

16. 2.
Primeros pasos
Cómo instalar
BS3, plantillas y
ejemplos
16

17. 17

18. Versión compilada
18
▣ bootstrap.css
□ obligatorio - BS3 listo
para usar
▣ bootstrap-theme.css
□ opcional, añade
efecto 3D
▣ *.map
□ para depurar en
Chrome y enlazar less
y css
▣ *.min.css
□ versión comprimida

19. Versión fuente
▣ incluye less
▣ al compilarlo
generamos css
19

20. Versión CDN (sin descarga)
20

21. Plantilla básica
21
HTML5

22. Ojo: usa viewport
22
Fuente: http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/

23. Plantillas del framework
23
http://getbootstrap.com/getting-started/

24. Plantillas con barras de navegación
24
http://getbootstrap.com/getting-started/

25. Componentes
25

26. Componentes
26

27. container y container-fluid
27
▣ Necesitamos envolver la rejilla en elemento
□ .container: contenedor fijo y adaptable
□ .container-fluid: contenedor fluid y adaptable

28. 28

29. Resultado
29

30. 3.
Diseño basado
en rejilla
Qué es y cómo
usar la rejilla
(grid) en diseño
30

31. ¿Qué web te parece mejor?
31

32. 32

33. Diseño basado en rejilla
33
Qué es
▣ Esqueleto de la
página web
▣ Permite organizar
los elementos
(textos, gráficos, ….)
▣ Son las líneas
invisibles en que
colocamos los
elementos
Tipos de grid
▣ Manuscrito
▣ Columna
▣ Modular
▣ Jerárquico
▣ Adaptable
(responsive)

34. Tipos de grid (I)
Manuscrito Columna
34Fuente: http://www.vanseodesign.com/web-design/grid-types/

35. Tipos de grid (II)
Modular Jerárquico
35

36. Anatomía de una rejilla (grid)
36
Margen (margin) Medianil (gutter)
(para filas o columnas)
Columna Rejilla o retícula (grid)

37. Ejemplo: Mondrian
37Fuente: http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/

38. Ejemplo: galería
38

39. Ejemplo: elementos destacados
39

40. 4.
La rejilla de
Bootstrap 3
Qué es y cómo
usar la rejilla de
Bootstrap 3
40

41. Rejilla BS3
41
▣ Dentro de etiqueta
container o
container-fluid
▣ Ponemos filas (row)
y dentro columnas
(col-xx-size)
▣ 1 fila, 12 columnas
▣ “Mobile-first” - el
dispositivo por
defecto es el más
pequeño (xs)
▣ Medianiles (gutter)
con padding
▣ Las clases de la
rejilla se aplican a
los dispositivos de
mayor tamaño si no
se sobreescriben
□ Ej. si defino col-md-
X se aplica a lg si no
defino col-lg-X
▣ Si defino más de 12
columnas, las que
no caben pasan a la
siguiente fila

42. Dispositivos de BS3
42

43. 43

44. Plantilla básica con xs (por defecto)
44

45. Resultado: misma rejilla para todos
45

46. Apilado xs; horizontal resto (sm, …)
46

47. Rejillas BS3
47

48. Ejemplo Punto ruptura
48
Fuente: http://fearlessflyer.com/exploring-the-bootstrap-3-0-grid-system/

49. .col-xs-*
49
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained

50. .col-sm-*
50
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained

51. .col-md-*
51
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained

52. .col-lg-*
52
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained

53. Mezcla
53
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained
.col-xs-6 .col-sm-8 .
col-md-5 .col-lg-2
.col-xs-6 .col-sm-4 .
col-md-7 .col-lg-10

54. Mezcla apilada
54
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained
.col-xs-9 .col-sm-12
.col-md-4 .col-lg-5
.col-xs-6 .col-sm-6 .
col-md-9 .col-lg-7

55. Mezcla anidado
55
Fuente: http://www.zeninvader.
com/css/bootstrap-3-grid-
system-explained

56. Anidar columnas
56

57. Desplazar columnas (offset)
57

58. Reordenar columnas de forma manual
58
Push 3 (mover 3 a la dcha)
Pull 3 (mover 3 a la izda)

59. 5.
Estilos CSS base
Estilos CSS
básicos que nos
da BS3
59

60. Tipografía
60

61. Ej. estilos predefinidos
61

62. Tablas
62

63. Formularios
63

64. Imágenes
64

65. Botones
65

66. 6.
Componentes
Componentes
reutilizables
66

67. Labels
67

68. 68
Dropdown, Button groups,
Button dropdown
Fuente: http://bootstrapuikit.com/
Documentación: http://getbootstrap.com/components/

69. Glyphicons
69

70. Nav (Tabs, Pills), Breadcrumb, Badges,
List group, NavBar
70

71. Input groups
71

72. Jumbotron
72

73. Pagination, Progress bar
73

74. Thumbnail
74

75. Media object
75
Fuente: http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_MediaObjects.php

76. Panel, Well
76

77. Alerts
77

78. Ejemplo
78
Prueba
bs3-template:html5
bs3-container
bs3-page-header
bs3-panel:heading
lorem20
bs3-panel:footer

79. 7.
Componentes
JS
Componentes
jQuery ya
integrados en
BS3
79

80. Componentes JS
▣ Tenemos que definir un marcado HTML y…
▣ .. activarlos con jQuery o con marcado HTML
(atributos data-)
▣ Tenemos
□ ventanas modales
□ carrusel de imágenes
□ menús
□ …
□ Más en http://getbootstrap.com/javascript/
80

81. Ejemplo: desplegable (dropdown)
81

82. Opción 1. Marcado HTML
82
▣ data-target: hace que
los enlaces no cambien
de página
▣ data-toggle: evento
desplegar menú

83. Opción 1 con “flechita” (caret)
83

84. Opción 1 con glyphicon
84

85. Opción 2. Uso de jQuery
85

86. JavaScript
86
Con jQuery podemos controlar eventos de BS3.

87. 8.
Cómo
personalizarlo
Cómo
seleccionar
nodos HTML en
las reglas CSS
87

88. Cómo extender bootstrap
▣ Técnica sobreescribir propiedades css
□ ¡Nunca modificar bootstrap.css!
▣ Opción 1: usar la versión compilada de BS3
□ Modificamos el CSS
▣ Opción 2: usar la versión fuente de BS3
□ Hacer cambios en less o CSS
□ Si tocamos el less, se compila
□ Puede ser difícil
▣ En ambos casos, también podemos partir de
una plantilla o tema prediseñado o de las
plantillas de BS3
88

89. Generar bootstrap personalizado
▣ Podemos bajar fuente de bootstrap,
cambiarlo con less, y generar la versión o…
▣ Asistente en http://getbootstrap.
com/customize/
▣ Podemos
□ Importar una configuración previa
□ Adaptar cada variable
□ Descargar nuestro bootstrap
89

90. Incluir estilo propio
▣ Nunca modificad directamente bootstrap
90http://bootstrapbay.com/blog/customize-bootstrap/

91. 9.
Extensiones y
temas
Cómo aplicar
CSS y HTML
para realizar
una web
91

92. Temas y Plantillas
▣ Plantillas
□ Nuevos tipos de páginas: comercio, administración,
...
▣ Temas
□ Nuevo diseño con plantilla y componentes de
Bootstrap
▣ Plantilla y Tema
□ Nuevos tipos con nuevos diseños
92

93. BootFlat
93
http://bootflat.github.io/

94. Sitios para temas y plantillas
▣ Gratuitos:
□ http://bootswatch.com/
□ http://bootstrapzero.com/
□ http://startbootstrap.com/
▣ Comerciales
□ https://wrapbootstrap.com
94

95. 10.
Less
Preprocesador
de CSS
95

96. 96
Transpilador
Compilator de fuente a
fuente
http://en.wikipedia.org/wiki/Source-to-source_compiler

97. Less
▣ Preprocesador de CSS
▣ Permite definir
□ variables con operaciones
□ mixins, funciones, reglas anidadas
□ espacios de nombres e importar, ...
▣ Página: http://lesscss.org
▣ Compilador en línea
□ http://winless.org/online-less-compiler
▣ Chrome DevTools permite trabajar con
preprocesadores
□ https://developer.chrome.
com/devtools/docs/css-preprocessors
97
¡Fuera del temario!

98. Less variables
98
lessc

99. Less mixins
99

100. Less mixins paramétricos (I)
100

101. Less mixins paramétricos (II)
101

102. Less. Reglas anidadas
102

103. Less. Funciones
103

104. Less
104
▣ Instalar less
□ sudo apt-get install node-less
▣ Ejecutar lessc
□ lessc styles.less > styles.css

105. Less en phpStorm
105

106. 11.
Conclusiones
Qué hemos
aprendido
106

107. 107
BS3 simplifica la creación de interfaces adaptables y
fácilmente mantenibles con nuevos temas

108. Fallos habituales
108
▣ Usar marcado HTML diferente para
dispositivos diferentes con hidden-sm o
visible-sm.
□ Se incrementa el tamaño global de la página HTML
□ Mejor usar la rejilla para redimensionar.
▣ Usar BS3 para aplicaciones móviles hechas
con tecnologías web. Mejor usar otros
frameworks más ligeros como Ratchet (de los
desarrolladores de BS3)
□ http://goratchet.com/

109. ¡Gracias!
¿Alguna pregunta?
cif@gsi.dit.upm.es
109

110. Referencias
▣ Jump Start Bootstrap
□ http://proquest.safaribooksonline.
com/book/web-design-and-
development/9781457174346
▣ Learning Bootstrap
□ http://proquest.safaribooksonline.
com/book/web-development/9781782161844
110

111. Recursos
▣ Bootstrap 3
□ http://getbootstrap.com/
▣ Bootstrap Resources
□ http://startbootstrap.com/bootstrap-resources/
▣ Showcases
□ http://builtwithbootstrap.com/
▣ Temas gratuitos
□ http://startbootstrap.com/bootstrap-
resources/#free-themes
111

112. Créditos
Gracias a todos los que han publicado estos
recursos de forma gratuita:
▣ Minicons de Webalys
▣ Plantilla de la presentación de SlidesCarnival
▣ Fotos de Unsplash y Wix
112