1
00:00:00,242 --> 00:00:04,459
[MÚSICA]

2
00:00:04,459 --> 00:00:09,590
Hablemos ahora de un plugin muy útil en Bootstrap llamado como el Collapse.

3
00:00:09,590 --> 00:00:14,110
Hemos visto su aplicación en la barra de navegación anteriormente.

4
00:00:14,110 --> 00:00:19,050
Revisaremos ese código y le echaremos un vistazo rápido con más detalle.

5
00:00:19,050 --> 00:00:21,910
Un componente relacionado se llama como el Acordeón.

6
00:00:21,910 --> 00:00:26,310
El acordeón hace uso del plugin Collapse para su funcionamiento.

7
00:00:26,310 --> 00:00:30,100
Y lo veremos en detalle en el ejercicio que sigue.

8
00:00:31,740 --> 00:00:36,570
El plugin Contraer proporciona una manera fácil de revelar y

9
00:00:36,570 --> 00:00:38,487
ocultar contenido en su página web.

10
00:00:40,030 --> 00:00:45,307
Esta revelación y ocultación del contenido suele ser desencadenada

11
00:00:45,307 --> 00:00:50,186
por el usuario haciendo clic en un botón o un enlace en su página web.

12
00:00:50,186 --> 00:00:55,001
Ahora verá muchos lugares donde el tipo de

13
00:00:55,001 --> 00:01:00,006
comportamiento de Contraer está muy bien aprovechado para mostrar contenido.

14
00:01:00,006 --> 00:01:04,760
Volveremos a visitar nuestra barra de navegación para ver el plugin Collapse en acción, y

15
00:01:04,760 --> 00:01:07,590
luego también veremos un ejemplo de acordeón a continuación.

16
00:01:08,630 --> 00:01:14,381
Volviendo a nuestra página web, recordarás que cuando creamos la barra de navegación

17
00:01:14,381 --> 00:01:19,948
en nuestra página web para pantallas extra-pequeñas, la barra de navegación se colapsó y

18
00:01:19,948 --> 00:01:24,346
luego se reveló cuando hicimos clic en el botón aquí.

19
00:01:24,346 --> 00:01:29,670
Ahora bien, este es un ejemplo del uso del plugin Collapse aquí.

20
00:01:29,670 --> 00:01:34,890
Cuando miramos el código, veremos que realmente aplicamos el plugin Collapse

21
00:01:34,890 --> 00:01:38,440
al div que contiene esta barra de navegación.

22
00:01:39,530 --> 00:01:41,534
Echando un vistazo al código de

23
00:01:41,534 --> 00:01:46,320
nuestra barra de navegación que diseñamos anteriormente, vio que aquí,

24
00:01:46,320 --> 00:01:51,012
dentro del contenedor, creamos este botón que se muestra para

25
00:01:51,012 --> 00:01:56,850
los tamaños de pantalla extra pequeños utilizando la clase navbar-toggler.

26
00:01:56,850 --> 00:01:59,440
Mira el div que sigue a este botón aquí.

27
00:01:59,440 --> 00:02:02,600
Para el div que sigue a este botón, usamos la clase de colapso.

28
00:02:02,600 --> 00:02:06,495
Así que este es el uso del plugin Collapse en nuestra barra de navegación.

29
00:02:06,495 --> 00:02:10,627
Entonces, lo que esto crea es que este contenido en particular,

30
00:02:10,627 --> 00:02:15,095
nuestra barra de navegación que está encerrada dentro de este div, se colapsará para

31
00:02:15,095 --> 00:02:17,065
los tamaños de pantalla extra pequeños.

32
00:02:17,065 --> 00:02:22,080
Y luego junto con el plugin Collapse, este botón que aparece

33
00:02:22,080 --> 00:02:26,589
allí activará la visualización y ocultación de esta barra de navegación aquí.

34
00:02:26,589 --> 00:02:32,582
Es por eso que cuando mires el botón, verás eso justo ahí,

35
00:02:32,582 --> 00:02:38,171
proporcionamos el atributo de alternancia de datos con el colapso aquí,

36
00:02:38,171 --> 00:02:42,350
y luego el objetivo de datos como #Navbar aquí.

37
00:02:42,350 --> 00:02:47,960
Y observe que la identificación de este div que aplicamos aquí es Navbar.

38
00:02:47,960 --> 00:02:53,030
Así que estamos especificando esencialmente que este botón va a actuar como el

39
00:02:53,030 --> 00:02:59,460
mecanismo de activación para que este plugin Collapse funcione en este div aquí.

40
00:02:59,460 --> 00:03:03,387
Así que este es un uso del plugin Collapse en su página web.

41
00:03:04,590 --> 00:03:10,840
Además, veremos el otro componente, que es el acordeón en Bootstrap.

42
00:03:10,840 --> 00:03:12,410
¿ Cómo se comporta un acordeón?

43
00:03:12,410 --> 00:03:16,110
Así que este es un ejemplo de acordeón que vamos a construir en el ejercicio

44
00:03:16,110 --> 00:03:16,928
que sigue.

45
00:03:16,928 --> 00:03:21,520
Así que aquí, verás que he reemplazado la navegación con pestañas que

46
00:03:21,520 --> 00:03:25,846
hicimos en el ejercicio anterior usando un acordeón aquí.

47
00:03:25,846 --> 00:03:30,480
La forma en que funciona el Acordeón es que una pieza de contenido es revelada y

48
00:03:30,480 --> 00:03:32,020
las tres restantes están ocultas.

49
00:03:32,020 --> 00:03:35,640
Por lo tanto, esto usa el complemento Contraer para este propósito.

50
00:03:35,640 --> 00:03:41,920
Así que cuando haces clic en cualquiera de estos otros líderes corporativos,

51
00:03:41,920 --> 00:03:45,490
entonces los detalles de ese líder corporativo se revelan y

52
00:03:45,490 --> 00:03:47,280
los tres restantes se ocultan.

53
00:03:47,280 --> 00:03:50,270
Así que este es el comportamiento del acordeón aquí.

54
00:03:50,270 --> 00:03:52,700
Si está familiarizado con un acordeón,

55
00:03:52,700 --> 00:03:57,000
el instrumento musical, sabe cómo funciona el fuelle del acordeón.

56
00:03:57,000 --> 00:04:02,530
Así que esto es, en cierto sentido, comportarse como el fuelle del acordeón.

57
00:04:02,530 --> 00:04:08,996
Entonces, esa es la razón por la que este componente se conoce como un acordeón en Bootstrap.

58
00:04:08,996 --> 00:04:17,280
Un ejemplo más del plugin Collapse en uso es en su propio sitio web del curso.

59
00:04:17,280 --> 00:04:19,350
Así que si usted va a su sitio web del curso, y

60
00:04:19,350 --> 00:04:23,360
luego entra en el contenido de su sitio web del curso y

61
00:04:23,360 --> 00:04:28,730
comienza a ver el contenido aquí, usted notará que en el lado izquierdo,

62
00:04:28,730 --> 00:04:32,940
usted tiene una navegación que entra en la imagen en el lado izquierdo.

63
00:04:32,940 --> 00:04:35,390
Así que esta es la navegación allí.

64
00:04:35,390 --> 00:04:40,510
Así que cuando haces clic en cada uno de ellos, te das cuenta de cómo el contenido aquí

65
00:04:40,510 --> 00:04:45,980
está oculto y revelado haciendo clic en cada uno de estos enlaces allí.

66
00:04:45,980 --> 00:04:51,246
Así que esto es como el complemento Collapse que vimos en Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Aunque, por supuesto, la página de Coursera en realidad no usa Bootstrap.

68
00:04:57,780 --> 00:05:02,306
Pasaremos al siguiente ejercicio donde veremos cómo construimos

69
00:05:02,306 --> 00:05:07,010
el acordeón para mostrar nuestra información de liderazgo corporativo.

70
00:05:07,010 --> 00:05:13,120
[ MÚSICA]