1
00:00:00,660 --> 00:00:05,550
Bienvenido de nuevo en esta lección vamos a construir un pequeño proyecto usando lo que hemos aprendido hasta

2
00:00:05,550 --> 00:00:06,740
ahora sobre el arranque.

3
00:00:06,770 --> 00:00:11,880
Incluirá muchos de los componentes de los que hemos estado hablando, incluso ahora incluye el jumbotron y

4
00:00:12,390 --> 00:00:13,590
el sistema de grillas.

5
00:00:13,920 --> 00:00:17,370
También lancé una o dos cosas nuevas, incluidos los íconos aquí.

6
00:00:17,370 --> 00:00:19,180
Todavía no hemos visto cómo hacer eso.

7
00:00:19,500 --> 00:00:25,590
Y también el hecho de que esta barra de navegación mientras la desplazo verá que permanece fija en la parte superior para que no

8
00:00:25,590 --> 00:00:30,360
se desplace de la misma forma que tenemos una barra de navegación fija que tampoco hemos visto todavía.

9
00:00:30,360 --> 00:00:34,800
Y finalmente, estamos cambiando algunos de los colores de los componentes predeterminados por arranque.

10
00:00:34,800 --> 00:00:37,290
Entonces este es en realidad un tono ligeramente diferente de gris.

11
00:00:37,380 --> 00:00:40,480
Esta es la sombra de azul y la barra de navegación tiene algunos colores diferentes.

12
00:00:40,560 --> 00:00:44,250
Así que les mostraré cómo hacer todo eso antes de comenzar a escribir cualquier código.

13
00:00:44,320 --> 00:00:49,420
Solo quiero tomar un momento para señalar el hecho de que estas imágenes en su mayoría

14
00:00:49,420 --> 00:00:52,620
provienen de un sitio web, un gran recurso llamado Splash.

15
00:00:52,920 --> 00:00:57,640
Así que Splash proporciona un montón de bonitas fotos en alta resolución para que puedas hacer lo que quieras.

16
00:00:57,750 --> 00:01:00,630
Puedes leer la licencia aquí, pero es prácticamente lo que quieras.

17
00:01:00,630 --> 00:01:05,610
Es una licencia Creative Commons, bla, bla, bla, estoy seguro de que realmente no me importa,

18
00:01:05,610 --> 00:01:09,390
pero las fotos son realmente increíbles y estoy usando muchas de estas ocho.

19
00:01:09,390 --> 00:01:11,450
De hecho en nuestra galería.

20
00:01:11,790 --> 00:01:17,280
Y eso deja una imagen, que es esta, aquí mismo, en la que realmente me hice cargo de tomar una clase

21
00:01:17,280 --> 00:01:21,090
de fotografía y esta es la primera cosa que he tomado que parece medio decente.

22
00:01:21,090 --> 00:01:24,780
Creo que a pesar de que estos no se ven tan calientes.

23
00:01:24,780 --> 00:01:28,650
De todos modos, si desea utilizar estas mismas imágenes exactas, que no es importante.

24
00:01:28,740 --> 00:01:30,430
Esto funcionará con cualquier imagen en absoluto.

25
00:01:30,450 --> 00:01:36,180
Pero si quieres exactamente los mismos, he incluido todos los enlaces en esta galería de archivos M. D que han subido junto con este video

26
00:01:36,210 --> 00:01:41,310
y también han incluido los dos colores que vamos a usar en azul oscuro

27
00:01:41,310 --> 00:01:42,570
y gris claro.

28
00:01:42,740 --> 00:01:42,990
DE ACUERDO.

29
00:01:42,990 --> 00:01:46,790
Entonces, con todo eso, comencemos el proyecto.

30
00:01:47,100 --> 00:01:48,740
Entonces tengo una galería de archivos vacía.

31
00:01:48,750 --> 00:01:49,620
H m l.

32
00:01:49,860 --> 00:01:56,400
l aquí y llamaremos a esta galería de imágenes y lo primero que debemos hacer es incluir bootstrap.

33
00:01:56,400 --> 00:01:58,670
Añadiré mi esqueleto h d m

34
00:01:58,800 --> 00:02:06,490
Y voy a copiar los extremos del CD de un proyecto anterior, así que lo haré ahora mismo.

35
00:02:06,900 --> 00:02:07,640
Aquí vamos.

36
00:02:07,710 --> 00:02:09,830
Me estoy vinculando al bootstrap CDN.

37
00:02:10,200 --> 00:02:18,300
Y mientras esté aquí, también agarraré la ciudad de bootstraps CSSA y Jay queery y lo hicimos en la lección de barra de navegación y pondremos las que están

38
00:02:18,300 --> 00:02:23,580
en la parte inferior aquí para que cuando agreguemos la barra de navegación no tengamos que ir a cazar.

39
00:02:23,580 --> 00:02:25,990
para estos archivos o para las etiquetas de script.

40
00:02:26,250 --> 00:02:30,250
Entonces, un salvamento y lo primero que podemos hacer es agregar nuestro Jumbotron.

41
00:02:30,510 --> 00:02:32,160
Eso es agradable y fácil.

42
00:02:32,400 --> 00:02:38,470
Entonces tendremos un div y esa clase será igual a Jumbotron.

43
00:02:38,880 --> 00:02:47,520
Y luego dentro del Jumbotron comenzará con un H1 que solo dice la galería de imágenes.

44
00:02:47,670 --> 00:02:51,420
Ahí vamos y ahorraremos y asegurémonos de que esto funcione.

45
00:02:51,720 --> 00:02:53,660
Por lo tanto, abrirá este archivo.

46
00:02:54,060 --> 00:02:55,330
Entonces tenemos a Boucek incluido.

47
00:02:55,350 --> 00:02:56,780
Estamos viendo el cambio de fuente.

48
00:02:56,820 --> 00:02:58,980
Estamos viendo este gris del Jumbotron.

49
00:02:58,980 --> 00:03:04,560
Asegurémonos ahora de que esté dentro de un contenedor como está aquí en lugar de lo que

50
00:03:04,560 --> 00:03:07,040
tenemos donde simplemente atraviesa toda la pantalla.

51
00:03:07,320 --> 00:03:12,850
Entonces haremos que la clase div sea igual a contenedor.

52
00:03:14,010 --> 00:03:21,900
Ahí vamos y hagámoslo de manera adecuada y actualizaremos, y volveremos.

53
00:03:21,900 --> 00:03:25,140
Muy bien, así que tenemos el Jumbotron, pero agrega en este párrafo.

54
00:03:25,140 --> 00:03:33,080
Ahora volveremos y haremos el ícono, pero eso es solo una etiqueta de párrafo debajo de la H-1 que guardaremos.

55
00:03:33,090 --> 00:03:38,040
Siéntase libre de poner el texto que desee allí y hemos terminado con el Jumbotron por el momento.

56
00:03:38,730 --> 00:03:43,950
ahora hagamos la barra de navegación y no voy a escribir suficiente barra desde cero por dos razones.

57
00:03:43,950 --> 00:03:45,190
Así que regresemos y

58
00:03:45,210 --> 00:03:46,970
Una es que es bastante código.

59
00:03:47,010 --> 00:03:48,000
Tomará un largo tiempo.

60
00:03:48,010 --> 00:03:48,840
Y este video

61
00:03:48,960 --> 00:03:52,870
Pero dos es el hecho de que casi nunca escribo Ackbar desde cero.

62
00:03:53,220 --> 00:03:58,800
Como mencioné en el video de NASCAR la mayor parte del tiempo, mi flujo de trabajo es que voy al sitio de

63
00:03:58,800 --> 00:04:02,580
arranque o a un sitio anterior que hice con una barra NAV y copio eso.

64
00:04:02,580 --> 00:04:04,990
Y acabo de comprobarlo y me deshago de las piezas que no quiero.

65
00:04:05,010 --> 00:04:06,530
Agrego algunas piezas nuevas en.

66
00:04:06,570 --> 00:04:08,020
Así que ahí es donde voy a hacer aquí.

67
00:04:08,160 --> 00:04:14,160
Ya tengo suficiente parte que hice en la barra de navegación, dijo cada aplicación HTML.

68
00:04:14,280 --> 00:04:19,570
Está justo aquí y voy a copiar eso y luego lo ajustaremos un poco.

69
00:04:19,620 --> 00:04:26,940
Así que copiemos y volveremos y lo pondremos en la parte superior del archivo así.

70
00:04:27,330 --> 00:04:32,770
Y veamos que lo que obtenemos es nuevo y tenemos la barra de navegación.

71
00:04:33,030 --> 00:04:34,010
Está cerca.

72
00:04:34,050 --> 00:04:36,410
Queremos cambiar la marca aquí.

73
00:04:36,420 --> 00:04:40,740
También queremos cambiar el color con el tiempo y queremos asegurarnos de que esté fijado en la parte

74
00:04:40,760 --> 00:04:43,020
superior, lo que no es ahora, pero lo conseguiremos.

75
00:04:43,290 --> 00:04:45,500
Regresemos y simplemente cambiemos la marca.

76
00:04:45,690 --> 00:04:49,980
Entonces, en lugar de café, llamé a las imágenes de las minas, puedes llamar esto como quieras.

77
00:04:49,980 --> 00:04:53,970
Por supuesto, asegúrese de que funcione bien.

78
00:04:54,250 --> 00:05:00,490
Lo próximo que le mostraré es un cambio rápido que podemos hacer para alterar el color donde aparece en lugar

79
00:05:00,490 --> 00:05:01,690
de siesta o predeterminado.

80
00:05:01,700 --> 00:05:06,880
Podemos hacer ahora si barra en verso y le mostraré cómo se ve.

81
00:05:06,880 --> 00:05:11,770
Ahora obtenemos una oscuridad por ahora o los colores se han invertido donde el texto es claro y obtenemos

82
00:05:11,770 --> 00:05:12,500
un fondo oscuro.

83
00:05:12,750 --> 00:05:15,660
Todavía no es el color azul por el que voy por aquí.

84
00:05:16,030 --> 00:05:19,740
Y la fuente tampoco es blanca, pero volveremos y arreglaremos eso.

85
00:05:19,750 --> 00:05:21,650
Esto es lo suficientemente cerca por ahora.

86
00:05:21,670 --> 00:05:26,100
Ahora podemos enfocarnos en la galería de imágenes real en esa grilla aquí.

87
00:05:26,350 --> 00:05:29,640
Y comencemos viendo cómo se comporta en la solución.

88
00:05:29,860 --> 00:05:39,160
tamaño, baja a dos y luego baja a dos y finalmente, en el tamaño pequeño, pasa a uno como se puede ver aquí.

89
00:05:39,160 --> 00:05:44,480
Entonces comienza con tres imágenes que se cruzan y luego, cuando cambio el

90
00:05:44,720 --> 00:05:47,110
Y tenemos una imagen que se cruza.

91
00:05:47,500 --> 00:05:52,780
Comencemos configurando la grilla para este gran tamaño donde tenemos tres cruzando.

92
00:05:52,780 --> 00:05:54,850
Recuerde que tenemos 12 unidades en total.

93
00:05:54,910 --> 00:05:59,730
Entonces, si queremos que tres se transmitan, vamos a designar a cada uno de ellos como cuatro unidades.

94
00:06:00,160 --> 00:06:04,420
Así que pongamos eso justo debajo de nuestro Jumbotron.

95
00:06:04,420 --> 00:06:13,900
Aún dentro del contenedor, solo haremos que la clase div sea igual a la fila y luego dentro de eso tendremos la clase

96
00:06:13,900 --> 00:06:17,680
div igual y queremos que sea de cuatro unidades.

97
00:06:17,770 --> 00:06:27,120
Así que haremos una columna con un gran guión 4 y presionaremos enter y podremos comenzar poniendo solo texto aquí y luego

98
00:06:27,120 --> 00:06:30,260
lo duplicaremos porque queremos tres de esos.

99
00:06:30,430 --> 00:06:35,170
Y no me preocuparé por arreglar la sangría todavía porque vamos a hacer un cambio más grande en solo

100
00:06:35,170 --> 00:06:35,770
un momento.

101
00:06:36,100 --> 00:06:40,170
Pero refresquémonos y atravesamos esas tres columnas.

102
00:06:40,180 --> 00:06:47,050
Entonces, lo próximo que queremos hacer es poner en marcha algunas imágenes y todo comienza, pero solo tomamos la L de

103
00:06:47,050 --> 00:06:52,860
mi foto de Golden Gate Bridge y vamos a agregar una etiqueta de imagen en lugar de texto.

104
00:06:52,910 --> 00:07:00,820
de la imagen es igual al Puente Golden Gate, estás enfermo y solo pegaré eso tres veces y lo guardaré.

105
00:07:01,210 --> 00:07:02,620
Así que la fuente

106
00:07:02,620 --> 00:07:09,430
Y si retrocedemos, tenemos un problema, que es que esa imagen es enorme, aunque tenemos esas

107
00:07:09,430 --> 00:07:10,310
tres columnas.

108
00:07:10,360 --> 00:07:14,010
Nuestra imagen no se queda dentro de nuestra columna, no se está reduciendo.

109
00:07:14,010 --> 00:07:19,010
Puedes ver lo que haremos para arreglar esto, es agregar agregar un poco más de arranque.

110
00:07:19,030 --> 00:07:24,670
Aún no te he mostrado que crees este pequeño y bonito borde alrededor y se llama miniatura.

111
00:07:24,700 --> 00:07:29,520
Todo lo que tenemos que hacer es escribir un div con una clase igual a la miniatura y luego

112
00:07:29,530 --> 00:07:33,250
cualquier imagen que pongamos dentro se reducirá para que quepa dentro de la columna.

113
00:07:33,250 --> 00:07:37,090
Y también tiene este pequeño borde aquí, que creo que se ve muy bien.

114
00:07:37,090 --> 00:07:43,720
Así que para hacer eso, en realidad voy a deshacerme de lo que tenemos con

115
00:07:43,720 --> 00:07:52,600
aquellos para simplemente volver a una sola imagen y agregar una clase div igual a la miniatura y hacerlo correctamente.

116
00:07:52,930 --> 00:07:57,880
Y envolvemos eso alrededor de la imagen y guardamos.

117
00:07:57,880 --> 00:08:00,350
Ahora si refrescamos.

118
00:08:01,150 --> 00:08:06,470
Verá si obtenemos una sola imagen que ocupa la cantidad adecuada de espacio dentro de esa cuadrícula.

119
00:08:06,730 --> 00:08:11,710
Esta es la columna y tiene un pequeño borde alrededor y la imagen no es gigantesca, lo cual es genial.

120
00:08:12,700 --> 00:08:15,980
Asegurémonos de que funcione si duplicamos esto.

121
00:08:16,060 --> 00:08:22,430
Así que esta es una imagen, hagámoslo tres veces y veamos qué ocurre con la actualización.

122
00:08:22,780 --> 00:08:23,610
Y ahí vamos.

123
00:08:23,710 --> 00:08:25,380
Tenemos tres imágenes.

124
00:08:25,380 --> 00:08:27,290
Continuaré y agregaré seis más.

125
00:08:27,360 --> 00:08:29,790
Entonces tenemos nueve en total como hacemos aquí.

126
00:08:30,490 --> 00:08:32,830
Y en realidad no tenemos que agregar filas separadas.

127
00:08:33,040 --> 00:08:35,110
Podemos simplemente ponerlos a todos en la misma fila.

128
00:08:35,200 --> 00:08:40,420
Así que copia los tres que tenemos hasta ahora para ahorrar.

129
00:08:40,480 --> 00:08:42,730
Eso nos dará nueve imágenes.

130
00:08:42,730 --> 00:08:46,950
Y si actualizo, verá que se ajustan automáticamente a la siguiente línea.

131
00:08:47,230 --> 00:08:52,390
Entonces solo tenemos que tener una fila y agregar esas columnas que conocemos médicamente.

132
00:08:52,480 --> 00:08:57,820
Si queremos que cada imagen ocupe cuatro unidades, eso significa tres por fila y luego necesitamos tres

133
00:08:57,820 --> 00:08:58,720
filas de imágenes.

134
00:08:58,780 --> 00:09:02,150
Regresaré y cambiaré todas estas imágenes de los elfos al final del video.

135
00:09:02,160 --> 00:09:03,600
No quiero obligarte a ver eso.

136
00:09:03,630 --> 00:09:08,580
Muy interesante solo copie y pegue, pero centrémonos en el resto de esta cuadrícula.

137
00:09:08,580 --> 00:09:16,360
Así que en este momento tan pronto como un medio de impacto vaya a una imagen a través de la cual no

138
00:09:16,360 --> 00:09:21,420
es lo que queremos, lo que estamos buscando es dos imágenes en ese punto intermedio.

139
00:09:21,700 --> 00:09:27,940
Y luego, después del punto de ruptura medio que está allí, llegamos a pequeño y aún queremos que permanezca en 2.

140
00:09:28,750 --> 00:09:34,690
Entonces, arregle eso en el nuestro o vaya a uno inmediatamente en el gran punto de quiebre o en el punto

141
00:09:35,110 --> 00:09:39,310
de quiebre mediano y luego en el pequeño y extra pequeño se queda en 1.

142
00:09:39,460 --> 00:09:48,430
Podemos volver aquí y cambiaremos todo lo que sepas seleccionar y presionar el comando d seleccionar todas las instancias de llamarlas grandes

143
00:09:48,880 --> 00:09:53,970
y luego presionaré la flecha izquierda o derecha para mover el cursor.

144
00:09:53,990 --> 00:09:55,840
Ahora puedo editarlos todos a la vez.

145
00:09:56,020 --> 00:10:04,240
Y lo que quiero hacer podría agregarse en la columna medio seis porque queremos Perrow y eso funcionará.

146
00:10:04,410 --> 00:10:10,690
Y si regreso y actualizo verá que se quedan en 3 por fila y luego llego al punto de ruptura mediano

147
00:10:10,720 --> 00:10:11,920
y van a 2.

148
00:10:12,280 --> 00:10:20,820
Pero luego pego pequeño y salta a uno y al nuestro cuando golpeamos pequeño la solución se queda en 2.

149
00:10:20,830 --> 00:10:31,830
Entonces, para arreglar eso, en lugar de hacer una columna de seis medios, podemos hacer una columna pequeña 6 y volver a

150
00:10:31,890 --> 00:10:33,390
actualizar esta versión.

151
00:10:33,730 --> 00:10:34,680
Golpeamos medio.

152
00:10:34,680 --> 00:10:35,590
Vamos a dos.

153
00:10:35,800 --> 00:10:36,750
Golpeamos pequeño

154
00:10:36,760 --> 00:10:43,530
Nos quedamos en 2 y luego vamos a extra pequeños y estamos en 1 1 imagen por fila.

155
00:10:43,810 --> 00:10:44,620
Perfecto.

156
00:10:44,910 --> 00:10:49,060
Así que eso es todo lo que tenemos que hacer para la grilla y hemos terminado con la mayor parte de la funcionalidad aquí.

157
00:10:49,170 --> 00:10:51,050
Muy, muy rápido para ponerlo en marcha.

158
00:10:51,220 --> 00:10:55,570
Lo que queremos enfocar ahora son algunos de los colores y también los íconos.

159
00:10:55,870 --> 00:10:58,890
Comenzaré mostrándote cómo agregamos íconos usando bootstrap.

160
00:10:59,080 --> 00:11:06,180
acceso a los componentes, hay iconos de glifos arriba y hay muchos para elegir.

161
00:11:06,180 --> 00:11:07,670
Entonces, si tienes

162
00:11:08,320 --> 00:11:11,840
Y encontraremos uno que queremos usar y el que estoy usando.

163
00:11:12,100 --> 00:11:14,710
Voy a hacer una búsqueda Creo que es la cámara.

164
00:11:14,710 --> 00:11:17,920
Entonces, hay una cámara aquí y no estoy usando esa cámara.

165
00:11:18,040 --> 00:11:19,310
Es un poco diferente.

166
00:11:19,330 --> 00:11:23,080
La que estoy usando es una cámara más retro y te mostraré cómo agregar eso.

167
00:11:23,080 --> 00:11:28,220
En realidad, no es parte de bootstrap. Comencemos con la cámara normal que viene con bootstrap.

168
00:11:28,810 --> 00:11:32,040
Así que escribimos a Clifford Kahn y luego vamos con la cámara del tablero de instrumentos.

169
00:11:32,160 --> 00:11:38,230
Y si te desplazas más abajo puedes ver dónde explican cómo usarlo para crear un tramo donde

170
00:11:38,230 --> 00:11:43,450
una clase es igual a Con y luego glifo puede marcar el ícono del glifo.

171
00:11:43,480 --> 00:11:49,600
Así que copiemos este lapso y comenzaremos haciéndolo dentro de la H-1.

172
00:11:49,600 --> 00:11:58,200
Simplemente colócalo al comienzo de la H-1 y queremos una cámara A-Kon rápida y guardaremos y actualizaremos.

173
00:11:58,600 --> 00:12:01,060
Y así puedes conseguir una cámara allí.

174
00:12:01,410 --> 00:12:07,350
Y si queremos espacio podemos hacerlo a través de relleno o simplemente podemos agregar un espacio allí.

175
00:12:08,260 --> 00:12:14,590
Y obtenemos un espacio en el que podemos hacer exactamente lo mismo para la barra de navegación y utilicé uno que recibe el nombre

176
00:12:15,050 --> 00:12:16,970
de Photo go double check up aquí.

177
00:12:16,980 --> 00:12:22,780
Puede hacer una búsqueda en esta página para obtener una foto.

178
00:12:22,890 --> 00:12:24,080
Ahí está.

179
00:12:24,260 --> 00:12:26,890
Puede ir si puede proyectar la imagen.

180
00:12:27,730 --> 00:12:32,890
Así que vamos a subir a la marca de barra de navegación aquí y pegar en ese lapso de nuevo.

181
00:12:33,120 --> 00:12:41,420
Y luego, dentro del tramo, la clase debe hacer clic en la imagen y agregaremos un espacio allí también.

182
00:12:41,460 --> 00:12:45,880
Volvemos a nuestro sitio son frescos y ahora tenemos una pequeña imagen allí.

183
00:12:46,360 --> 00:12:47,930
Y también tenemos la cámara.

184
00:12:48,150 --> 00:12:54,570
A continuación, abordemos la barra de navegación y comenzaremos por fijarla en la parte superior para que pueda ver en este momento.

185
00:12:54,790 --> 00:12:56,470
Eso siesta nuestros pergaminos de distancia.

186
00:12:56,950 --> 00:12:59,210
Pero en la solución permanece allí.

187
00:12:59,640 --> 00:13:04,460
Y para hacer eso, es una clase única que debemos agregar a nuestra barra de NAV.

188
00:13:04,480 --> 00:13:11,800
Así que hasta aquí queremos que la barra de navegación dash fije el tablero y guarde.

189
00:13:12,120 --> 00:13:16,570
Y si estamos frescos, verás que está fijado en la parte superior.

190
00:13:16,570 --> 00:13:23,080
Hay un pequeño problema: nuestro contenido ahora está un poco atrás y queremos que tenga el

191
00:13:23,230 --> 00:13:25,800
espacio normal por encima del Jumbotron.

192
00:13:25,810 --> 00:13:32,770
Lo que tenemos que hacer es agregar un poco de relleno a nuestro cuerpo y resulta ser 70 píxeles.

193
00:13:32,770 --> 00:13:37,720
Los documentos de arranque te dirán que si alguna vez olvidas 70 píxeles de relleno es lo que queremos que

194
00:13:37,710 --> 00:13:39,320
sea el ancho de los ahora cuatro.

195
00:13:39,490 --> 00:13:47,250
Así que vamos a ir aquí y crearemos una hoja de estilos ahora y la llamaré galería Dotsie

196
00:13:48,120 --> 00:13:58,300
SS y luego dentro de un espacio de cuerpo selecto superior a 70 píxeles y luego tenemos que agregar eso vinculado a esa

197
00:13:58,410 --> 00:14:01,850
hoja de estilo que es Gallery CS S.

198
00:14:01,920 --> 00:14:03,760
Ahora asegurémonos de que esté funcionando.

199
00:14:03,790 --> 00:14:04,330
Aquí vamos.

200
00:14:04,360 --> 00:14:10,860
Tenemos nuestro espaciamiento de vuelta y el NFR todavía está fijo en la parte superior, como se puede ver perfecto