Effet accordéon Bootstrap
Effet accordion Bootstrap
-
Objectifs
- Connaitre l’effet accordéon Bootstrap 4
- Etre capable d’utiliser l’effet accordéon Bootstrap 4
-
Présentation
- L’accordion Bootstrap est un composant qui organise le contenu dans des éléments réductibles.
- L’accordion est un composant de l’interface. Elle est composée de plusieurs «
.card
» empilés verticalement. - Les accordions sont utiles lorsque vous avez une grande quantité de contenu et que vous ne voulez pas qu’ils soient tous affichés sur votre page, mais visibles lorsque vous cliquez sur un bouton ou un lien.
- Exemples d’utilisation de Bootstrap Accordéon:
- Page FAQ
- Présentation d’éléments multiples
- Tableaux de données
-
Utilisation
-
class="accordion"
-
class="card"
- Un
Card
est conteneur de contenu (content container) qui est structuré, flexible et extensible. - Il contient les classes telles que header, body.
-
class="card-header"
- En-tête de carte contenant une bascule pour masquer ou afficher les détails d’une carte
-
Entête(h5)
-
Exemple
- Ce qui nous donne:
-
Effet accordéon sur une liste groupée
- Ce qui nous donne:
-
Application
- Réaliser un effet Accordion Bootstrap 5 avec Icon animé
- Avant click
- Aprés click
