[MÚSICA]
Hablemos ahora de un plugin muy útil en Bootstrap llamado como el Collapse.
Hemos visto su aplicación en la barra de navegación anteriormente.
Revisaremos ese código y le echaremos un vistazo rápido con más detalle.
Un componente relacionado se llama como el Acordeón.
El acordeón hace uso del plugin Collapse para su funcionamiento.
Y lo veremos en detalle en el ejercicio que sigue.
El plugin Contraer proporciona una manera fácil de revelar y
ocultar contenido en su página web.
Esta revelación y ocultación del contenido suele ser desencadenada
por el usuario haciendo clic en un botón o un enlace en su página web.
Ahora verá muchos lugares donde el tipo de
comportamiento de Contraer está muy bien aprovechado para mostrar contenido.
Volveremos a visitar nuestra barra de navegación para ver el plugin Collapse en acción, y
luego también veremos un ejemplo de acordeón a continuación.
Volviendo a nuestra página web, recordarás que cuando creamos la barra de navegación
en nuestra página web para pantallas extra-pequeñas, la barra de navegación se colapsó y
luego se reveló cuando hicimos clic en el botón aquí.
Ahora bien, este es un ejemplo del uso del plugin Collapse aquí.
Cuando miramos el código, veremos que realmente aplicamos el plugin Collapse
al div que contiene esta barra de navegación.
Echando un vistazo al código de
nuestra barra de navegación que diseñamos anteriormente, vio que aquí,
dentro del contenedor, creamos este botón que se muestra para
los tamaños de pantalla extra pequeños utilizando la clase navbar-toggler.
Mira el div que sigue a este botón aquí.
Para el div que sigue a este botón, usamos la clase de colapso.
Así que este es el uso del plugin Collapse en nuestra barra de navegación.
Entonces, lo que esto crea es que este contenido en particular,
nuestra barra de navegación que está encerrada dentro de este div, se colapsará para
los tamaños de pantalla extra pequeños.
Y luego junto con el plugin Collapse, este botón que aparece
allí activará la visualización y ocultación de esta barra de navegación aquí.
Es por eso que cuando mires el botón, verás eso justo ahí,
proporcionamos el atributo de alternancia de datos con el colapso aquí,
y luego el objetivo de datos como #Navbar aquí.
Y observe que la identificación de este div que aplicamos aquí es Navbar.
Así que estamos especificando esencialmente que este botón va a actuar como el
mecanismo de activación para que este plugin Collapse funcione en este div aquí.
Así que este es un uso del plugin Collapse en su página web.
Además, veremos el otro componente, que es el acordeón en Bootstrap.
¿ Cómo se comporta un acordeón?
Así que este es un ejemplo de acordeón que vamos a construir en el ejercicio
que sigue.
Así que aquí, verás que he reemplazado la navegación con pestañas que
hicimos en el ejercicio anterior usando un acordeón aquí.
La forma en que funciona el Acordeón es que una pieza de contenido es revelada y
las tres restantes están ocultas.
Por lo tanto, esto usa el complemento Contraer para este propósito.
Así que cuando haces clic en cualquiera de estos otros líderes corporativos,
entonces los detalles de ese líder corporativo se revelan y
los tres restantes se ocultan.
Así que este es el comportamiento del acordeón aquí.
Si está familiarizado con un acordeón,
el instrumento musical, sabe cómo funciona el fuelle del acordeón.
Así que esto es, en cierto sentido, comportarse como el fuelle del acordeón.
Entonces, esa es la razón por la que este componente se conoce como un acordeón en Bootstrap.
Un ejemplo más del plugin Collapse en uso es en su propio sitio web del curso.
Así que si usted va a su sitio web del curso, y
luego entra en el contenido de su sitio web del curso y
comienza a ver el contenido aquí, usted notará que en el lado izquierdo,
usted tiene una navegación que entra en la imagen en el lado izquierdo.
Así que esta es la navegación allí.
Así que cuando haces clic en cada uno de ellos, te das cuenta de cómo el contenido aquí
está oculto y revelado haciendo clic en cada uno de estos enlaces allí.
Así que esto es como el complemento Collapse que vimos en Bootstrap.
Aunque, por supuesto, la página de Coursera en realidad no usa Bootstrap.
Pasaremos al siguiente ejercicio donde veremos cómo construimos
el acordeón para mostrar nuestra información de liderazgo corporativo.
[ MÚSICA]