1
00:00:03,670 --> 00:00:09,835
En este ejercicio, vamos a explorar la navegación basada en pestañas de Bootstrap, el

2
00:00:09,835 --> 00:00:11,920
soporte de Bootstrap para pestañas

3
00:00:11,920 --> 00:00:17,310
y cómo se pueden utilizar las pestañas para organizar el contenido en tu página web.

4
00:00:17,310 --> 00:00:21,165
Y cómo puede navegar de una pestaña a otra,

5
00:00:21,165 --> 00:00:26,235
y luego revelar el contenido en cada una de esas pestañas en la página web.

6
00:00:26,235 --> 00:00:30,115
Ahora, aquí me verá usando la clase de navegación,

7
00:00:30,115 --> 00:00:34,560
y luego calificarla aún más usando la clase de pestañas de navegación.

8
00:00:34,560 --> 00:00:38,065
El mismo enfoque también se puede utilizar con las píldoras de navegación

9
00:00:38,065 --> 00:00:42,740
que vimos en la conferencia anterior.

10
00:00:43,470 --> 00:00:46,440
Para comenzar con este ejercicio,

11
00:00:46,440 --> 00:00:49,200
iremos a la página aboutus.html.

12
00:00:49,200 --> 00:00:50,545
Y ahí mismo,

13
00:00:50,545 --> 00:00:53,690
donde tenemos el contenido de liderazgo corporativo allí,

14
00:00:53,690 --> 00:00:59,290
después del h2, voy a introducir la navegación con pestañas.

15
00:00:59,290 --> 00:01:07,960
Entonces, aquí es donde voy a hacer uso del ul con la clase nav nav-tabs.

16
00:01:07,960 --> 00:01:12,070
Por lo tanto, ha visto que antes cuando construimos la barra de navegación,

17
00:01:12,070 --> 00:01:17,215
también usamos el ul dentro de la barra de navegación para especificar los elementos de navegación allí.

18
00:01:17,215 --> 00:01:20,270
Un enfoque similar aquí, excepto que aquí vamos a

19
00:01:20,270 --> 00:01:24,235
usar el ul con el navegador y las pestañas de navegación aquí.

20
00:01:24,235 --> 00:01:26,120
Entonces, dentro de este ul,

21
00:01:26,120 --> 00:01:33,395
vamos a construir la estructura de navegación para esta navegación con pestañas aquí.

22
00:01:33,395 --> 00:01:41,850
Entonces, allí, usaré el elemento de la lista con la clase nav-item,

23
00:01:41,850 --> 00:01:48,965
y construiré la navegación alrededor de este elemento de la lista.

24
00:01:48,965 --> 00:01:53,770
Por lo tanto, esto introduce el primer elemento en mis pestañas de navegación.

25
00:01:53,770 --> 00:02:03,605
Inmediatamente después de eso, dentro de allí introduciré una a con la clase nav-link activo.

26
00:02:03,605 --> 00:02:05,960
Entonces, este, como ves,

27
00:02:05,960 --> 00:02:10,670
si recuerdas de la forma en que usamos el ul con el elemento de navegación y el enlace de navegación.

28
00:02:10,670 --> 00:02:12,995
En la barra de navegación,

29
00:02:12,995 --> 00:02:14,970
estamos viendo un enfoque similar aquí.

30
00:02:14,970 --> 00:02:19,150
Entonces, nav-item activo, y luego href.

31
00:02:19,970 --> 00:02:24,895
Por lo tanto, esta sería una referencia al panel de pestañas más adelante,

32
00:02:24,895 --> 00:02:28,695
que tendría el ID de peter allí,

33
00:02:28,695 --> 00:02:33,310
y el rol es la pestaña para este,

34
00:02:33,310 --> 00:02:39,560
y la pestaña de alternar datos.

35
00:02:39,560 --> 00:02:45,540
Por lo tanto, puede ver el componente javascript de Bootstrap entrando en la imagen aquí.

36
00:02:45,540 --> 00:02:49,500
Y luego diré Peter Pan,

37
00:02:49,700 --> 00:02:54,405
y luego cerraré la etiqueta a allí.

38
00:02:54,405 --> 00:03:01,435
Por lo tanto, esto completaría nuestra primera pestaña en nuestra navegación con pestañas.

39
00:03:01,435 --> 00:03:03,310
Déjame completar el resto del código,

40
00:03:03,310 --> 00:03:07,255
y luego volveremos y revisaremos el resto del código allí.

41
00:03:07,255 --> 00:03:13,630
Por lo tanto, aquí se puede ver que he completado esta estructura de navegación aquí.

42
00:03:13,630 --> 00:03:23,635
Del mismo modo, estoy definiendo los elementos de la lista para los líderes corporativos libres restantes aquí.

43
00:03:23,635 --> 00:03:26,305
Ahora esto, déjame guardar el cambio.

44
00:03:26,305 --> 00:03:30,160
Y luego vamos a echar un vistazo rápido a la página web.

45
00:03:30,840 --> 00:03:33,070
Al cambiar a la página web,

46
00:03:33,070 --> 00:03:37,260
ahora ves cómo usando las pestañas de navegación hemos creado

47
00:03:37,260 --> 00:03:42,400
esta estructura de navegación justo debajo del liderazgo corporativo aquí.

48
00:03:42,400 --> 00:03:47,110
Por lo tanto, esta estructura de navegación significa que debería ser capaz de navegar y

49
00:03:47,110 --> 00:03:51,815
ver cada uno de ellos con más detalle haciendo clic en esto.

50
00:03:51,815 --> 00:03:54,830
Entonces, así es como funciona la navegación con pestañas aquí.

51
00:03:54,830 --> 00:03:58,525
Ahora, obviamente, el contenido de cada uno de ellos debería

52
00:03:58,525 --> 00:04:02,700
mostrar apropiadamente sólo los detalles de esa persona aquí.

53
00:04:02,700 --> 00:04:06,145
Por lo tanto, aquí es donde

54
00:04:06,145 --> 00:04:10,630
entrará en vigor el uso de contenido con pestañas y las clases del panel de pestañas.

55
00:04:10,630 --> 00:04:13,925
Y vamos a adjuntar este contenido usando eso.

56
00:04:13,925 --> 00:04:17,200
Y luego vincula esto a esa navegación,

57
00:04:17,200 --> 00:04:18,660
navegación por pestañas aquí arriba, de

58
00:04:18,660 --> 00:04:22,580
modo que solo

59
00:04:22,580 --> 00:04:25,380
se muestre la información de un líder corporativo en la pantalla a la vez.

60
00:04:25,380 --> 00:04:28,910
Una vez que completemos la configuración de la navegación con pestañas,

61
00:04:28,910 --> 00:04:31,755
bajaremos al contenido real aquí.

62
00:04:31,755 --> 00:04:36,505
Y ahora, voy a reorganizar este contenido en cuatro paneles de pestañas separados,

63
00:04:36,505 --> 00:04:38,840
cada uno de los cuales se mostrará cuando

64
00:04:38,840 --> 00:04:44,010
se seleccione el panel de pestañas correspondiente en la navegación con pestañas.

65
00:04:44,010 --> 00:04:45,830
Así que, para empezar,

66
00:04:45,830 --> 00:04:50,755
lo primero que vamos a hacer es entrar y separar

67
00:04:50,755 --> 00:04:55,680
cada uno de estos cuatro líderes corporativos en las cuatro partes allí, para

68
00:04:55,680 --> 00:04:58,815
que sea fácil para mí ver lo que estoy haciendo.

69
00:04:58,815 --> 00:05:01,180
Así que, en el h3,

70
00:05:01,180 --> 00:05:04,355
los estoy cortando en cuatro partes diferentes,

71
00:05:04,355 --> 00:05:08,610
y luego podremos trabajar con ellas.

72
00:05:08,610 --> 00:05:13,395
Así que, ahora tengo uno, dos, tres, cuatro.

73
00:05:13,395 --> 00:05:19,055
Por lo tanto, este contenido ahora necesita estar encerrado dentro de un div

74
00:05:19,055 --> 00:05:28,540
con el contenido de tabulación de clase.

75
00:05:28,540 --> 00:05:32,845
Por lo tanto, todo este contenido que tenemos para

76
00:05:32,845 --> 00:05:40,055
los cuatro líderes corporativos diferentes debe estar encerrado dentro de un div de contenido de pestañas allí.

77
00:05:40,055 --> 00:05:44,455
Por lo tanto, ahora he incluido eso dentro de la pestaña de contacto.

78
00:05:44,455 --> 00:05:46,090
Ahora, para cada uno de ellos,

79
00:05:46,090 --> 00:05:52,235
necesito crear otro div con el panel de pestañas de clases y algunas clases adicionales.

80
00:05:52,235 --> 00:05:56,430
Y luego organice este contacto.

81
00:05:56,430 --> 00:05:58,680
Entonces, comencemos con el primero.

82
00:05:58,680 --> 00:06:02,215
Entonces, para el primer líder corporativo,

83
00:06:02,215 --> 00:06:07,955
voy a presentar un nuevo div con papel como tabpanel.

84
00:06:07,955 --> 00:06:12,250
Por lo tanto, esto sirve como el panel de pestañas que se mostrará

85
00:06:12,250 --> 00:06:17,235
cuando se seleccione la primera pestaña de navegación.

86
00:06:17,235 --> 00:06:22,440
Y la clase correspondiente que necesito aplicar es tab-panel.

87
00:06:22,440 --> 00:06:24,090
Por lo tanto, este es el panel de pestañas,

88
00:06:24,090 --> 00:06:26,430
el contenido real que está contenido allí.

89
00:06:26,430 --> 00:06:29,805
Y luego otra clase que aplico es fundido.

90
00:06:29,805 --> 00:06:32,920
Por lo tanto, la clase de fundido permite que este contenido se desvanezca.

91
00:06:32,920 --> 00:06:37,090
Por lo tanto, esta es una clase de animación que Bootstrap admite.

92
00:06:37,090 --> 00:06:40,340
Además, aplico esta clase llamada show.

93
00:06:40,340 --> 00:06:43,770
La clase show especifica esencialmente

94
00:06:43,770 --> 00:06:48,425
que este contenido en particular debe mostrarse cuando la página se renderiza por primera vez. Por

95
00:06:48,425 --> 00:06:52,870
lo tanto, aplicará la clase show solo al primer panel de pestañas,

96
00:06:52,870 --> 00:06:56,640
los paneles de pestañas restantes no tendrán aplicada la clase show.

97
00:06:56,640 --> 00:07:00,910
Y la última clase que voy a aplicar está activa porque este es

98
00:07:00,910 --> 00:07:07,190
el panel de pestañas que se mostrará en la página cuando la página se renderice por primera vez.

99
00:07:07,190 --> 00:07:10,095
Además, para que la navegación funcione,

100
00:07:10,095 --> 00:07:12,760
necesito darle a este ID

101
00:07:12,760 --> 00:07:19,340
y, como utilicé el hashtag Peter para el contenido de navegación de la pestaña,

102
00:07:19,340 --> 00:07:23,705
así que voy a aplicar el ID como Peter aquí.

103
00:07:23,705 --> 00:07:31,680
Y así, cuando esto se hace referencia en un enlace allí con el hashtag Peter,

104
00:07:31,680 --> 00:07:34,740
este es el panel correspondiente al que me refiero.

105
00:07:34,740 --> 00:07:39,885
Ahora, lo que voy a hacer es copiar este div desde allí.

106
00:07:39,885 --> 00:07:49,010
Y luego voy a aplicar este div a la información del segundo líder corporativo,

107
00:07:49,010 --> 00:07:55,255
excepto que para este solo debería aplicar el panel de pestañas y ajustar.

108
00:07:55,255 --> 00:07:58,730
El show y active no se deben aplicar para los tres restantes.

109
00:07:58,730 --> 00:08:03,820
Y la identificación aquí debería ser Danny para la segunda.

110
00:08:03,820 --> 00:08:08,190
Simplemente copiaré este código,

111
00:08:08,190 --> 00:08:13,460
y luego lo pegaré para el tercer líder corporativo aquí.

112
00:08:13,460 --> 00:08:20,955
Y entonces el panel de pestañas y el tercero es Agumbe.

113
00:08:20,955 --> 00:08:23,795
Y el último, de

114
00:08:23,795 --> 00:08:27,235
nuevo, lo pego,

115
00:08:27,235 --> 00:08:31,640
y luego la identificación debe cambiarse a Alberto,

116
00:08:31,640 --> 00:08:34,280
y cierre este div aquí.

117
00:08:34,280 --> 00:08:39,580
Por lo tanto, este div para el último debe cerrarse en ese punto.

118
00:08:39,580 --> 00:08:45,355
Y eso debería encargarse de los cuatro paneles de pestañas que necesito.

119
00:08:45,355 --> 00:08:50,725
Entrar y sangrar este contenido,

120
00:08:50,725 --> 00:08:53,490
para que esté satisfecho,

121
00:08:53,490 --> 00:08:56,245
mi obsesión está satisfecha allí.

122
00:08:56,245 --> 00:09:01,805
Vale, eso completa la organización del contenido de la pestaña.

123
00:09:01,805 --> 00:09:04,600
Ahora, guardemos el cambio y echemos

124
00:09:04,600 --> 00:09:09,030
un vistazo rápido a lo que parece la página web ahora. Al

125
00:09:09,330 --> 00:09:11,480
ir a nuestra página web,

126
00:09:11,480 --> 00:09:19,680
ahora ves que nuestra página web solo muestra el contenido correspondiente a su CEO.

127
00:09:19,680 --> 00:09:22,825
Si cambia a cualquiera de los otros,

128
00:09:22,825 --> 00:09:26,415
verá que se muestra la información correspondiente.

129
00:09:26,415 --> 00:09:32,290
Y observe cómo esta información se desvanece cuando selecciona ese usuario en particular.

130
00:09:32,290 --> 00:09:35,400
Pero, por supuesto, si estás contento con esto,

131
00:09:35,400 --> 00:09:37,890
entonces está bien, podemos detenernos en este punto.

132
00:09:37,890 --> 00:09:45,360
Pero me gustaría definir muy bien una pestaña real alrededor de esto.

133
00:09:45,360 --> 00:09:50,370
Entonces, aquí es donde voy a aplicar algunos atributos CSS,

134
00:09:50,370 --> 00:09:53,540
propiedades a esta pestaña en particular aquí, para

135
00:09:53,540 --> 00:09:55,660
que sea una

136
00:09:55,660 --> 00:09:58,290
estructura de pestañas agradable y limpia que se defina allí.

137
00:09:58,290 --> 00:10:03,590
Por lo tanto, vamos a crear algunas propiedades CSS para esto.

138
00:10:03,590 --> 00:10:06,855
El último paso, cambiar a styles.css.

139
00:10:06,855 --> 00:10:09,555
Después de la inversa de la barra de navegación,

140
00:10:09,555 --> 00:10:15,530
voy a introducir las clases CSS para el contenido de la pestaña,

141
00:10:15,530 --> 00:10:18,010
así que especifico para el contenido de la pestaña,

142
00:10:18,010 --> 00:10:29,565
border-left: DDD sólido 1px.

143
00:10:29,565 --> 00:10:48,195
Y voy a aplicar lo mismo para la frontera derecha y la parte inferior.

144
00:10:48,195 --> 00:10:51,310
No necesito aplicar a la parte superior porque la parte superior ya está regida

145
00:10:51,310 --> 00:10:55,585
por la navegación de pestañas.

146
00:10:55,585 --> 00:11:00,250
Y luego déjame dar un relleno de 10 píxeles por todas partes,

147
00:11:00,250 --> 00:11:02,990
y luego guardar los cambios.

148
00:11:02,990 --> 00:11:07,450
Vamos a echar un vistazo a nuestra página web después de esto.

149
00:11:07,450 --> 00:11:09,980
Volviendo a nuestra página,

150
00:11:09,980 --> 00:11:11,395
ahora ves una bonita y

151
00:11:11,395 --> 00:11:14,920
limpia estructura similar a una pestaña que se está creando. Para

152
00:11:14,920 --> 00:11:18,355
que cuando navegue a cada uno de ellos,

153
00:11:18,355 --> 00:11:24,695
esa información correspondiente se muestre apropiadamente en su propia pestaña.

154
00:11:24,695 --> 00:11:28,905
Esto completa este ejercicio en el que analizamos

155
00:11:28,905 --> 00:11:33,120
el uso de la navegación con pestañas para nuestra página web.

156
00:11:33,120 --> 00:11:39,435
Y luego vimos cómo podemos crear la navegación por pestañas y adjuntar otro contenido.

157
00:11:39,435 --> 00:11:46,200
Este es también un buen momento para que hagas un comentario de Git con las pestañas de mensajes.