1
00:00:00,230 --> 00:00:03,290
Saber todo lo que necesitamos enfocarnos son los colores.

2
00:00:03,300 --> 00:00:05,160
Comencemos con un jumbotron.

3
00:00:05,460 --> 00:00:11,070
Así que todo lo que hay dentro del JumboTron es de un tono azul

4
00:00:11,070 --> 00:00:23,370
diferente y ese tono de azul que tengo en este documento para ver 3 5 0 irá a nuestra hoja de estilos y podemos simplemente seleccionar el jumbotron y darle un

5
00:00:23,370 --> 00:00:31,860
color y todo dentro de todo ese color así como está fresco y puedes ver que todo ha cambiado para ser

6
00:00:32,250 --> 00:00:37,880
azul, incluido el acantilado A-Kon, el ícono del glifo simplemente se trata como texto.

7
00:00:37,980 --> 00:00:43,010
En realidad, es una fuente, por lo que puede cambiar el color con la propiedad de color.

8
00:00:43,020 --> 00:00:45,950
Ahora abordemos la barra de navegación, que es un poco más complicada.

9
00:00:46,110 --> 00:00:47,730
El color de fondo no está mal.

10
00:00:47,740 --> 00:00:53,280
Todo lo que tenemos que hacer es seleccionar nav bar Inv. o podríamos hacer

11
00:00:53,340 --> 00:00:59,730
Ahora si estamos encendidos después de nuestra parada de reparación, pero voy a hacer la barra de navegación

12
00:01:01,650 --> 00:01:08,210
inversa y luego le doy un color de fondo de ese fondo azul y lo pego y lo actualizo.

13
00:01:08,210 --> 00:01:09,830
Y puedes ver que cambia para ser azul.

14
00:01:10,020 --> 00:01:15,900
Pero para cambiar el color aquí, quiero que sean blancos en lugar de grises.

15
00:01:15,900 --> 00:01:21,720
Si acabo de diseñar todas las etiquetas de tinta que son para que las etiquetas de anclaje de estilo

16
00:01:21,720 --> 00:01:22,800
sean blancas, no funcionarán.

17
00:01:22,800 --> 00:01:23,980
Entonces te mostraré lo que quiero decir.

18
00:01:24,030 --> 00:01:28,070
Etiqueta de anclaje color blanco.

19
00:01:28,150 --> 00:01:29,630
Regresa.

20
00:01:29,910 --> 00:01:35,430
No tiene efecto y este es un gran uso para el inspector si lo inspeccionamos.

21
00:01:35,610 --> 00:01:36,880
Echa un vistazo a lo que está sucediendo.

22
00:01:37,260 --> 00:01:43,080
Entonces podemos ver que nuestro color blanco está tachado y el color está siendo asignado aquí.

23
00:01:43,410 --> 00:01:49,350
Este color de línea es este gris y si lo deseleccionamos vuelven a ser el blanco que queremos

24
00:01:49,350 --> 00:01:50,050
que sean.

25
00:01:50,490 --> 00:01:53,280
Y eso es porque este es un selector más específico.

26
00:01:53,460 --> 00:01:56,290
Si puedes recordar la lección que hice sobre la especificidad.

27
00:01:56,520 --> 00:02:03,180
Esto se calcula para tener un número más alto o un índice de especificidad más alto que el que teníamos aquí, que

28
00:02:03,180 --> 00:02:06,530
es solo para una pequeña etiqueta de anclaje versus esto aquí.

29
00:02:06,630 --> 00:02:08,190
Son múltiples clases.

30
00:02:08,190 --> 00:02:12,330
Recuerde que cada uno de ellos es diez veces más específico que solo una etiqueta de anclaje.

31
00:02:12,900 --> 00:02:18,480
Entonces, lo que queremos hacer es escribir un selector que sea tan específico y podamos

32
00:02:18,480 --> 00:02:19,540
robarlo aquí mismo.

33
00:02:20,280 --> 00:02:25,910
Entonces vamos a entrar aquí y pegar eso y luego cambiar el color para que sea blanco.

34
00:02:25,950 --> 00:02:29,560
Así que vamos a anular exactamente el mismo schlechter que tenía el bootstrap.

35
00:02:29,610 --> 00:02:35,790
Y es importante que nuestros estilos se produzcan después del arranque para que podamos anularlo y, si estamos frescos,

36
00:02:36,000 --> 00:02:37,370
ahora obtenemos enlaces blancos.

37
00:02:37,650 --> 00:02:41,050
Por último, haremos lo mismo con la marca de barra de navegación.

38
00:02:41,670 --> 00:02:45,490
Entonces, como pueden ver, está dentro de la marca de barra de navegación.

39
00:02:45,960 --> 00:02:57,360
Si seleccionamos ese Daut ahora para nuestra marca y le damos un color blanco y lo guardamos y volvemos, todavía no funciona

40
00:02:57,360 --> 00:02:59,800
y tenemos el mismo problema.

41
00:02:59,820 --> 00:03:06,120
Entonces, si lo inspeccionamos, verán que está tachado de nuestros estilos aquí donde nos

42
00:03:06,450 --> 00:03:11,700
volvemos blancos y que los colores han cambiado por esta línea.

43
00:03:11,700 --> 00:03:17,770
Ahora si la marca Bar dentro de la barra de navegación Inv. entonces también podemos robar eso y sobrescribirlo.

44
00:03:17,970 --> 00:03:21,500
Entonces solo necesitamos esa barra de navegación inv. Ahora para nuestra marca

45
00:03:21,930 --> 00:03:23,220
Básicamente, estamos escribiendo estilos que

46
00:03:23,280 --> 00:03:28,500
van a chocar cabeza a cabeza en una batalla de estilos entre bootstrap y nuestros estilos, y son idénticos en los selectores.

47
00:03:28,500 --> 00:03:32,580
Entonces, como el nuestro es el segundo, van a estar en la cima.

48
00:03:32,700 --> 00:03:36,280
Van a ganar, vuelve a refrescarte y nunca te vayas.

49
00:03:36,300 --> 00:03:41,100
Tenemos la mayoría de los estilos hechos.

50
00:03:41,100 --> 00:03:42,530
Hay una cosa realmente menor

51
00:03:42,630 --> 00:03:48,000
que probablemente no notará en el molde de la pantalla: el color gris en el JumboTron es ligeramente diferente.

52
00:03:48,000 --> 00:03:51,600
Así que tengo ese color aquí. Simplemente lo copiaré y luego

53
00:03:52,740 --> 00:04:00,120
iré a RC SS y simplemente cambiaremos el fondo del Jumbotron para que sea de color gris y prestaremos mucha atención como actualización.

54
00:04:00,600 --> 00:04:05,510
Espero que puedas verlo cambiar.

55
00:04:05,520 --> 00:04:07,000
Simplemente cambió.

56
00:04:07,110 --> 00:04:08,200
Es un gris ligeramente más azul.

57
00:04:08,200 --> 00:04:10,990
Así que probemos todo.

58
00:04:11,040 --> 00:04:12,500
Vamos a cambiar el tamaño de nuestro trabajo de barra de NAV.

59
00:04:12,720 --> 00:04:16,080
El Javascript funciona bien.

60
00:04:16,170 --> 00:04:18,720
Aquí vamos.

61
00:04:18,720 --> 00:04:19,740
Todo se ve bien.

62
00:04:19,830 --> 00:04:21,400
Lo último que le mostraré es cómo podemos usar un ícono diferente aquí.

63
00:04:21,420 --> 00:04:24,870
El que estoy usando proviene de una biblioteca llamada

64
00:04:25,140 --> 00:04:30,510
fun awesome fun awesome es una biblioteca simple que incluye muchos iconos diferentes.

65
00:04:30,570 --> 00:04:31,860
Mucho más que el Bootstrap incorporado con íconos para que puedas acceder a él en Funt awesome.

66
00:04:31,860 --> 00:04:37,520
No la atrapes.

67
00:04:37,610 --> 00:04:38,390
Sé que estoy en la página de inicio aquí.

68
00:04:38,430 --> 00:04:40,890
Y si hacemos clic en los iconos hay más de 580 íconos diferentes, puedes verlos todos aquí.

69
00:04:41,280 --> 00:04:47,220
Y una de las buenas características que puede buscar a través de ellos

70
00:04:47,550 --> 00:04:52,470
que realmente no puede hacer en Pucelle con mucha facilidad.

71
00:04:52,470 --> 00:04:53,580
Entonces podemos buscar una foto y obtenemos la cámara y la cámara retro, que es lo que usé.

72
00:04:53,670 --> 00:05:01,870
Pero antes de que podamos usar cualquiera de ellos, necesitamos instalarlo.

73
00:05:02,100 --> 00:05:05,180
Entonces, si vas a empezar.

74
00:05:05,400 --> 00:05:07,750
Tienen un buen CDN que puedes copiar y simplemente ponerlo dentro de tu aplicación.

75
00:05:07,800 --> 00:05:14,160
Así que haremos eso arriba paga súbita.

76
00:05:14,160 --> 00:05:18,650
Y ahora podemos usar divertidos iconos increíbles y es realmente muy fácil.

77
00:05:19,140 --> 00:05:24,190
En realidad, si haces clic en el ícono que te gusta y digas que quiero

78
00:05:24,330 --> 00:05:31,320
usar el signo de la paz, puedo hacer clic en él y te dan un poquito de código que puedes copiar.

79
00:05:31,320 --> 00:05:35,100
Entonces es un ícono con clase igual a f por diversión.

80
00:05:35,100 --> 00:05:38,300
Increíble.

81
00:05:38,310 --> 00:05:38,660
Y luego F. A. apunte el nombre del ícono.

82
00:05:38,670 --> 00:05:42,010
Reemplacemos el ícono de la cámara con esto para que tenga un gran signo de paz que se guardará y actualizará.

83
00:05:42,990 --> 00:05:51,240
Y tenemos un signo de paz.

84
00:05:52,380 --> 00:05:53,640
Tan divertido es increíble.

85
00:05:53,850 --> 00:05:55,820
Es realmente popular

86
00:05:55,830 --> 00:05:57,110
Un montón de iconos geniales, ya que puedes ver prácticamente cualquier ícono que necesites.

87
00:05:57,120 --> 00:06:01,970
Tienen un montón de los estándar.

88
00:06:01,980 --> 00:06:03,620
Pausa el botón de reproducción.

89
00:06:03,690 --> 00:06:04,940
Adelante hacia atrás diferentes iconos para la tecnología y diferentes iconos de Internet.

90
00:06:04,950 --> 00:06:09,400
Pero también tienen algunos más divertidos, como los signos de paz.

91
00:06:09,480 --> 00:06:12,260
Y creo que también tienen una mano de Spock. Sí, vamos.

92
00:06:12,320 --> 00:06:16,090
Entonces puede usar cualquiera de estos como si usara cualquier otra fuente.

93
00:06:16,380 --> 00:06:19,460
Entonces, si desea cambiar el color, simplemente cambie la propiedad del color si desea cambiar el tamaño.

94
00:06:19,500 --> 00:06:23,970
En realidad, cambias el tamaño de la fuente.

95
00:06:24,360 --> 00:06:26,510
Así que voy a utilizar esa búsqueda de

96
00:06:26,880 --> 00:06:35,730
cámara retro para eso otra vez, que es cámara retro, así que tengo que hacer un guion retro de la cámara dash y guardar la actualización y obtenemos esa cámara retro.

97
00:06:35,730 --> 00:06:44,880
Muy bien, así que terminamos con la galería.

98
00:06:44,880 --> 00:06:46,710
Además de cambiar realmente la imagen, eres lo que haré tan pronto como termine este resumen.

99
00:06:46,710 --> 00:06:52,370
Probablemente no quiera mirar de todos modos, pero en caso de que lo haga, lo incluiré al final.

100
00:06:52,380 --> 00:06:56,310
Así que tenemos suficiente Bartra aquí hizo un pequeño cambio que era

101
00:06:56,310 --> 00:07:02,340
el que usamos ahora muy inverso, que es cómo obtuvimos la barra de navegación en blanco y negro.

102
00:07:02,340 --> 00:07:04,110
Pero luego cambiamos los colores de todos modos, así que realmente no importaba.

103
00:07:04,230 --> 00:07:07,650
Y luego también utilizamos la barra fija de navegación fija, que es cómo se mantiene arriba en la parte superior.

104
00:07:07,650 --> 00:07:12,380
Usamos un sistema de cuadrícula aquí abajo y luego usamos un jumbotron.

105
00:07:12,480 --> 00:07:16,100
Introduje glyph en un concepto creado en los íconos de Bootstrap que son relativamente limitados.

106
00:07:16,100 --> 00:07:20,960
Hay la mayoría de las cosas que usarías, pero de vez en cuando

107
00:07:21,000 --> 00:07:26,160
no tendrán algo o, a veces, prefieres que los divertidos íconos se vean divertidos.

108
00:07:26,160 --> 00:07:29,000
Awesome es definitivamente más popular que el show de comida con

109
00:07:29,010 --> 00:07:33,630
pacanas y la otra novedad que te mostré es la clase de miniatura que puedes colocar alrededor de

110
00:07:33,630 --> 00:07:38,550
una imagen y que limitará esa imagen a una cuadrícula y agregará este lindo y pequeño borde aquí.

111
00:07:38,550 --> 00:07:41,700
Y finalmente, hablamos sobre la especificidad y cómo teníamos que

112
00:07:41,700 --> 00:07:46,080
luchar contra los estilos de arranque si queríamos cambiar el color del color de fondo.

113
00:07:46,080 --> 00:07:48,520
Desea cambiar el color de fondo de Nav. o el color de fuente para los enlaces y también el color del Nev.

114
00:07:48,620 --> 00:07:54,180
marca aquí.

115
00:07:54,210 --> 00:07:55,450
OK, así que eso es todo en el próximo video.

116
00:07:55,620 --> 00:07:57,410
Voy a mostrarte cómo podemos hacer una página de inicio con bootstrap.

117
00:07:57,420 --> 00:08:00,230
Y como prometí, ahora voy a copiar

118
00:08:00,300 --> 00:08:05,160
y pegar esos enlaces de imagen para hacer nueve imágenes diferentes aquí.

119
00:08:05,160 --> 00:08:05,590
Entonces, si eso es algo que quieres ver, espera el próximo minuto o dos.

120
00:08:05,760 --> 00:08:09,160
DE ACUERDO.

121
00:08:09,660 --> 00:08:13,380
Así que voy a dividir esta pantalla y

122
00:08:15,510 --> 00:08:23,790
copiaré algunos de estos sobre este primero y voy a reemplazar este aquí y luego haré el siguiente.

123
00:08:23,790 --> 00:08:28,760
Antiguo lugar.

124
00:08:29,140 --> 00:08:29,580
Este de aquí.

125
00:08:29,580 --> 00:08:31,360
Y luego, el próximo,

126
00:08:32,610 --> 00:08:37,110
estoy seguro de que esto es fascinante y seguiré adelante así.

127
00:08:39,710 --> 00:08:47,350
De acuerdo, hemos llegado a la mitad.

128
00:08:47,350 --> 00:08:48,660
imágenes diferentes.

129
00:08:48,660 --> 00:08:49,650
Nos acercamos

130
00:08:59,220 --> 00:09:10,470
y creo que lo hicimos, digamos asegúrate de que todo se ve bien o fresco y tenemos nueve

131
00:09:10,470 --> 00:09:11,440
Increíble.

132
00:09:11,700 --> 00:09:12,360
Todo bien.

133
00:09:12,660 --> 00:09:12,960
Así que ahora he terminado hecho.

134
00:09:12,960 --> 00:09:14,120
Afortunadamente disfruté haciendo esa galería de imágenes.

135
00:09:14,190 --> 00:09:16,020
Te veré en el próximo video.

136
00:09:16,050 --> 00:09:17,060