1
00:00:03,460 --> 00:00:11,430
Los acordeones son uno de esos instrumentos molestos que algunos de ustedes pueden haber visto ya.

2
00:00:11,430 --> 00:00:16,020
Tiene uno de esos fuelles con un teclado

3
00:00:16,020 --> 00:00:20,940
abajo y luego sopla y luego toca la música con las teclas allí.

4
00:00:20,940 --> 00:00:23,645
Y no todo el mundo lo disfruta.

5
00:00:23,645 --> 00:00:28,740
Estoy bastante seguro. Pero sin ofender a los acordeones.

6
00:00:28,740 --> 00:00:34,650
Los acordeones en bootstrap son muy interesantes con seguridad.

7
00:00:34,650 --> 00:00:39,380
En este

8
00:00:39,380 --> 00:00:44,580
ejercicio veremos cómo aplicamos acordeones para poder revelar y ocultar contenido en nuestra página web.

9
00:00:44,580 --> 00:00:51,300
Volviendo a About Us en la página HTML donde teníamos la información de liderazgo corporativo.

10
00:00:51,300 --> 00:00:56,960
Ahora, voy a reemplazar la navegación superior con una navegación basada en acordeón.

11
00:00:56,960 --> 00:01:03,175
Voy a eliminar este UL que define el término navegación por completo.

12
00:01:03,175 --> 00:01:08,320
Y luego vamos a diseñar el acordeón alrededor del contenido que ya tenemos.

13
00:01:08,320 --> 00:01:13,700
Por lo tanto, vamos a eliminar este UL que contiene la navegación de pestañas para que se dejen

14
00:01:13,700 --> 00:01:20,160
con sólo esta parte que está encerrada dentro del panel superior y el contenido superior.

15
00:01:20,160 --> 00:01:22,115
Por lo tanto, vamos a ir a modificar esto.

16
00:01:22,115 --> 00:01:23,740
Yendo a este div aquí,

17
00:01:23,740 --> 00:01:33,225
voy a eliminar esta clase de allí y luego aplico la identificación como acordeón.

18
00:01:33,225 --> 00:01:40,060
Necesitamos esta identificación más adelante para poder crear el acordeón que div,

19
00:01:40,060 --> 00:01:43,175
que contiene este contenido todavía está en su lugar.

20
00:01:43,175 --> 00:01:46,545
Por lo tanto, el contenido superior ahora se cambia a acordeón.

21
00:01:46,545 --> 00:01:49,745
Ahora, cada uno de estos contenidos aquí,

22
00:01:49,745 --> 00:01:53,460
vamos a convertir eso en una

23
00:01:53,460 --> 00:01:59,080
estructura basada en tarjetas allí para que puedan revelar el contenido de

24
00:01:59,080 --> 00:02:02,360
cada una de esas cartas para que me vean usando la tarjeta y las

25
00:02:02,360 --> 00:02:09,220
clases de cuerpo de la tarjeta allí para adjuntar este contenido.

26
00:02:09,220 --> 00:02:12,595
Ahora, entrando en el contenido real aquí,

27
00:02:12,595 --> 00:02:16,905
voy a empezar a aplicar la clase de tarjeta aquí con el div allí.

28
00:02:16,905 --> 00:02:21,900
Entonces, diremos, «tarjeta de clase div» y

29
00:02:21,900 --> 00:02:29,890
luego cerraremos el div allí y luego este contenido entra en el div allí.

30
00:02:29,890 --> 00:02:34,110
Ahora, aquí, vamos a entrar y crear

31
00:02:34,110 --> 00:02:41,610
un div con la clase «cabecera de tarjeta».

32
00:02:42,030 --> 00:02:45,280
Voy a mostrarles por uno de ellos y luego vamos a

33
00:02:45,280 --> 00:02:48,425
repetir este proceso para los tres restantes también.

34
00:02:48,425 --> 00:02:57,480
Por lo tanto, diremos, «pestaña de rollo de encabezado de tarjeta» y luego «id peterhead».

35
00:02:57,480 --> 00:03:04,335
Voy a tomar este h3 desde abajo aquí abajo,

36
00:03:04,335 --> 00:03:10,265
cortarlo y luego pegarlo en el panel de tarjetas.

37
00:03:10,265 --> 00:03:14,815
Por lo tanto, este h3 que define el nombre de

38
00:03:14,815 --> 00:03:18,945
la persona de liderazgo corporativo se corta desde

39
00:03:18,945 --> 00:03:24,310
el interior del panel de pestañas y luego se mueve a la cabecera de la tarjeta aquí.

40
00:03:24,310 --> 00:03:29,060
Esto va a actuar como mi ayuda a la navegación.

41
00:03:29,060 --> 00:03:35,425
Ahora, a este h3, voy a aplicar una clase llamada mb-0.

42
00:03:35,425 --> 00:03:37,920
Por lo tanto, esto es mb-0 aquí.

43
00:03:37,920 --> 00:03:41,260
Ahora, este nombre en sí,

44
00:03:41,260 --> 00:03:44,840
voy a encerrar esto dentro y una a,

45
00:03:44,840 --> 00:03:49,300
así que voy a ir a la siguiente línea y luego decir,

46
00:03:49,300 --> 00:03:56,650
«un conmutador de datos» y

47
00:03:56,650 --> 00:04:00,845
el interruptor de datos dirá, «colapso».

48
00:04:00,845 --> 00:04:06,025
Así que, ahora, ves que estás usando el plugin de colapso.

49
00:04:06,025 --> 00:04:09,440
Por lo tanto, tenemos este cierre h3 allí.

50
00:04:09,440 --> 00:04:12,630
Así que, voy a cambiarlo a la siguiente línea

51
00:04:12,630 --> 00:04:17,400
aquí y luego voy a cerrar la etiqueta A justo allí.

52
00:04:17,400 --> 00:04:25,265
Así que, con esto la etiqueta A ahora encierra el nombre del CEO aquí.

53
00:04:25,265 --> 00:04:31,285
Y luego la etiqueta h3, por supuesto, cierra el h3 en la parte superior y luego esto está

54
00:04:31,285 --> 00:04:37,525
dentro del div que es el encabezado de la tarjeta de clase.

55
00:04:37,525 --> 00:04:43,950
Entonces, esto forma la estructura de encabezado para mi div acordeón.

56
00:04:43,950 --> 00:04:46,915
Yendo ahora al panel de pestañas a continuación,

57
00:04:46,915 --> 00:04:54,050
voy a cambiar esta clase de desvanecimiento del panel de pestañas a contraer.

58
00:04:54,050 --> 00:05:01,455
Así que este sería un plugin de colapso que será útil para nuestro acordeón

59
00:05:01,455 --> 00:05:05,680
y también eliminaré esta clase activa

60
00:05:05,680 --> 00:05:10,075
para esto y la identificación se dejará como peter para esto.

61
00:05:10,075 --> 00:05:18,375
Y luego dirás, «padre de datos» y especificarías acordeón.

62
00:05:18,375 --> 00:05:24,960
Usted ve por qué le dimos el id de acordeón al div que encierra todo este contenido.

63
00:05:24,960 --> 00:05:28,010
Por lo tanto, esta es la forma de especificar que esto va a

64
00:05:28,010 --> 00:05:31,720
formar parte del acordeón que usted está construyendo allí.

65
00:05:31,720 --> 00:05:34,420
Entonces, es por eso que acordeón padre datos.

66
00:05:34,420 --> 00:05:37,930
Ahora, el contenido dentro de este panel de pestañas,

67
00:05:37,930 --> 00:05:42,340
voy a encerrarlo dentro del div con

68
00:05:42,340 --> 00:05:48,460
el cuerpo de la tarjeta de clase

69
00:05:48,920 --> 00:05:54,125
y cerrar ese div aquí,

70
00:05:54,125 --> 00:05:57,790
y luego sangrar este contenido allí.

71
00:05:57,790 --> 00:06:03,440
Vamos a guardar los cambios y luego ir y echar un vistazo a nuestra página web en este momento. Al

72
00:06:03,440 --> 00:06:08,735
ir a nuestra página web, ahora nota que en el liderazgo corporativo,

73
00:06:08,735 --> 00:06:16,550
el nombre del CEO se destaca aquí en la cabecera de la tarjeta aquí.

74
00:06:16,550 --> 00:06:19,150
Y luego el contenido está abajo aquí abajo.

75
00:06:19,150 --> 00:06:25,830
Ahora, crearemos los tres restantes abajo y luego los encerraremos todos allí.

76
00:06:25,830 --> 00:06:30,485
Voy a repetir la misma estructura para los restantes.

77
00:06:30,485 --> 00:06:34,405
Por lo tanto, tendré la tarjeta con el encabezado de

78
00:06:34,405 --> 00:06:39,075
la tarjeta, y el encabezado de la tarjeta incluirá el nombre de la persona así.

79
00:06:39,075 --> 00:06:40,730
Por lo tanto, prácticamente seguirá

80
00:06:40,730 --> 00:06:45,060
la misma estructura para las tres piezas restantes de contenido.

81
00:06:45,060 --> 00:06:49,190
Entonces, hagamos los cambios y luego regresaremos y revisaremos el código.

82
00:06:49,190 --> 00:06:51,185
Volviendo al código,

83
00:06:51,185 --> 00:06:54,405
ahora ves que para los tres restantes,

84
00:06:54,405 --> 00:06:57,880
te das cuenta de que todavía estoy usando la tarjeta aquí

85
00:06:57,880 --> 00:07:01,535
con el encabezado de la tarjeta y h3 con el mb-0.

86
00:07:01,535 --> 00:07:07,590
Esto está dentro de la clase de encabezado de la tarjeta div allí y luego abajo de

87
00:07:07,590 --> 00:07:10,790
la clase solo como colapso y luego con la identificación

88
00:07:10,790 --> 00:07:14,445
y luego el cuerpo de la tarjeta que encierra la P allí.

89
00:07:14,445 --> 00:07:18,745
Lo mismo con los dos restantes también.

90
00:07:18,745 --> 00:07:20,700
Por lo tanto, con este cambio,

91
00:07:20,700 --> 00:07:26,030
estos tres líderes corporativos restantes información se

92
00:07:26,030 --> 00:07:29,675
derrumbará, pero la información escarpada de Peter Pan

93
00:07:29,675 --> 00:07:33,445
será revelada cuando el primer renderice la página web.

94
00:07:33,445 --> 00:07:36,050
Por lo tanto, con este cambio, ahora,

95
00:07:36,050 --> 00:07:39,710
este fragmento de código está obviamente disponible en

96
00:07:39,710 --> 00:07:44,090
las instrucciones que siguen aquí, así que no hay necesidad de preocuparse demasiado.

97
00:07:44,090 --> 00:07:49,865
Siempre puede referirse a eso para asegurarse de que lo ha hecho correctamente.

98
00:07:49,865 --> 00:07:52,495
Por lo tanto, vamos a guardar los cambios.

99
00:07:52,495 --> 00:07:54,740
Volviendo a nuestra página web,

100
00:07:54,740 --> 00:07:57,430
ahora ves el acordeón construido aquí.

101
00:07:57,430 --> 00:08:03,125
Por lo tanto, verá que la primera información de líderes corporativos se muestra aquí.

102
00:08:03,125 --> 00:08:06,190
Los tres restantes se derrumbaron en este momento. Por

103
00:08:06,190 --> 00:08:11,790
lo tanto, esa es la razón del uso del plugin de colapso y también la razón para cambiar

104
00:08:11,790 --> 00:08:18,275
el nombre del líder corporativo al título de la tarjeta.

105
00:08:18,275 --> 00:08:21,035
Veo que viste que se mostrará así ahí dentro.

106
00:08:21,035 --> 00:08:25,150
Ahora, haciendo clic en cualquiera de ellos ahora nota que al hacer clic en

107
00:08:25,150 --> 00:08:29,785
ese contenido se revelará pero los tres restantes están ocultos.

108
00:08:29,785 --> 00:08:32,315
Entonces, este es el comportamiento del acordeón aquí.

109
00:08:32,315 --> 00:08:36,245
Así que con esto, completamos este ejercicio.

110
00:08:36,245 --> 00:08:42,630
Este es un buen momento para que hagas un git commit con el acordeón de mensaje..