Los acordeones son uno de esos instrumentos molestos que algunos de ustedes pueden haber visto ya.
Tiene uno de esos fuelles con un teclado
abajo y luego sopla y luego toca la música con las teclas allí.
Y no todo el mundo lo disfruta.
Estoy bastante seguro. Pero sin ofender a los acordeones.
Los acordeones en bootstrap son muy interesantes con seguridad.
En este
ejercicio veremos cómo aplicamos acordeones para poder revelar y ocultar contenido en nuestra página web.
Volviendo a About Us en la página HTML donde teníamos la información de liderazgo corporativo.
Ahora, voy a reemplazar la navegación superior con una navegación basada en acordeón.
Voy a eliminar este UL que define el término navegación por completo.
Y luego vamos a diseñar el acordeón alrededor del contenido que ya tenemos.
Por lo tanto, vamos a eliminar este UL que contiene la navegación de pestañas para que se dejen
con sólo esta parte que está encerrada dentro del panel superior y el contenido superior.
Por lo tanto, vamos a ir a modificar esto.
Yendo a este div aquí,
voy a eliminar esta clase de allí y luego aplico la identificación como acordeón.
Necesitamos esta identificación más adelante para poder crear el acordeón que div,
que contiene este contenido todavía está en su lugar.
Por lo tanto, el contenido superior ahora se cambia a acordeón.
Ahora, cada uno de estos contenidos aquí,
vamos a convertir eso en una
estructura basada en tarjetas allí para que puedan revelar el contenido de
cada una de esas cartas para que me vean usando la tarjeta y las
clases de cuerpo de la tarjeta allí para adjuntar este contenido.
Ahora, entrando en el contenido real aquí,
voy a empezar a aplicar la clase de tarjeta aquí con el div allí.
Entonces, diremos, «tarjeta de clase div» y
luego cerraremos el div allí y luego este contenido entra en el div allí.
Ahora, aquí, vamos a entrar y crear
un div con la clase «cabecera de tarjeta».
Voy a mostrarles por uno de ellos y luego vamos a
repetir este proceso para los tres restantes también.
Por lo tanto, diremos, «pestaña de rollo de encabezado de tarjeta» y luego «id peterhead».
Voy a tomar este h3 desde abajo aquí abajo,
cortarlo y luego pegarlo en el panel de tarjetas.
Por lo tanto, este h3 que define el nombre de
la persona de liderazgo corporativo se corta desde
el interior del panel de pestañas y luego se mueve a la cabecera de la tarjeta aquí.
Esto va a actuar como mi ayuda a la navegación.
Ahora, a este h3, voy a aplicar una clase llamada mb-0.
Por lo tanto, esto es mb-0 aquí.
Ahora, este nombre en sí,
voy a encerrar esto dentro y una a,
así que voy a ir a la siguiente línea y luego decir,
«un conmutador de datos» y
el interruptor de datos dirá, «colapso».
Así que, ahora, ves que estás usando el plugin de colapso.
Por lo tanto, tenemos este cierre h3 allí.
Así que, voy a cambiarlo a la siguiente línea
aquí y luego voy a cerrar la etiqueta A justo allí.
Así que, con esto la etiqueta A ahora encierra el nombre del CEO aquí.
Y luego la etiqueta h3, por supuesto, cierra el h3 en la parte superior y luego esto está
dentro del div que es el encabezado de la tarjeta de clase.
Entonces, esto forma la estructura de encabezado para mi div acordeón.
Yendo ahora al panel de pestañas a continuación,
voy a cambiar esta clase de desvanecimiento del panel de pestañas a contraer.
Así que este sería un plugin de colapso que será útil para nuestro acordeón
y también eliminaré esta clase activa
para esto y la identificación se dejará como peter para esto.
Y luego dirás, «padre de datos» y especificarías acordeón.
Usted ve por qué le dimos el id de acordeón al div que encierra todo este contenido.
Por lo tanto, esta es la forma de especificar que esto va a
formar parte del acordeón que usted está construyendo allí.
Entonces, es por eso que acordeón padre datos.
Ahora, el contenido dentro de este panel de pestañas,
voy a encerrarlo dentro del div con
el cuerpo de la tarjeta de clase
y cerrar ese div aquí,
y luego sangrar este contenido allí.
Vamos a guardar los cambios y luego ir y echar un vistazo a nuestra página web en este momento. Al
ir a nuestra página web, ahora nota que en el liderazgo corporativo,
el nombre del CEO se destaca aquí en la cabecera de la tarjeta aquí.
Y luego el contenido está abajo aquí abajo.
Ahora, crearemos los tres restantes abajo y luego los encerraremos todos allí.
Voy a repetir la misma estructura para los restantes.
Por lo tanto, tendré la tarjeta con el encabezado de
la tarjeta, y el encabezado de la tarjeta incluirá el nombre de la persona así.
Por lo tanto, prácticamente seguirá
la misma estructura para las tres piezas restantes de contenido.
Entonces, hagamos los cambios y luego regresaremos y revisaremos el código.
Volviendo al código,
ahora ves que para los tres restantes,
te das cuenta de que todavía estoy usando la tarjeta aquí
con el encabezado de la tarjeta y h3 con el mb-0.
Esto está dentro de la clase de encabezado de la tarjeta div allí y luego abajo de
la clase solo como colapso y luego con la identificación
y luego el cuerpo de la tarjeta que encierra la P allí.
Lo mismo con los dos restantes también.
Por lo tanto, con este cambio,
estos tres líderes corporativos restantes información se
derrumbará, pero la información escarpada de Peter Pan
será revelada cuando el primer renderice la página web.
Por lo tanto, con este cambio, ahora,
este fragmento de código está obviamente disponible en
las instrucciones que siguen aquí, así que no hay necesidad de preocuparse demasiado.
Siempre puede referirse a eso para asegurarse de que lo ha hecho correctamente.
Por lo tanto, vamos a guardar los cambios.
Volviendo a nuestra página web,
ahora ves el acordeón construido aquí.
Por lo tanto, verá que la primera información de líderes corporativos se muestra aquí.
Los tres restantes se derrumbaron en este momento. Por
lo tanto, esa es la razón del uso del plugin de colapso y también la razón para cambiar
el nombre del líder corporativo al título de la tarjeta.
Veo que viste que se mostrará así ahí dentro.
Ahora, haciendo clic en cualquiera de ellos ahora nota que al hacer clic en
ese contenido se revelará pero los tres restantes están ocultos.
Entonces, este es el comportamiento del acordeón aquí.
Así que con esto, completamos este ejercicio.
Este es un buen momento para que hagas un git commit con el acordeón de mensaje..