[MUSIC]
Parlons maintenant d'un plugin très utile dans Bootstrap appelé le Réduire.
Nous avons vu son application dans la barre de navigation plus tôt.
Nous allons revoir ce code et y jeter un coup d'œil plus en détail.
Un composant connexe est appelé l'Accordéon.
L' Accordéon utilise le plugin Collapse pour son fonctionnement.
Et nous verrons cela en détail dans l'exercice qui suit.
Le plugin Réduire fournit un moyen facile de révéler et de
masquer le contenu sur votre page Web.
Cette révélation et masquage du contenu est généralement déclenchée
par l'utilisateur en cliquant sur un bouton ou un lien dans votre page web.
Maintenant, vous verrez de nombreux endroits où le type de
comportement Réduire est très bien exploité pour afficher le contenu.
Nous allons revoir notre barre de navigation pour regarder le plugin Réduire en action,
puis nous verrons également un exemple d'Accordéon ensuite.
Pour revenir à notre page web, vous vous souviendrez que lorsque nous avons créé la barre de navigation
dans notre page Web pour les écrans extra-petits, la barre de navigation a été réduite et
puis elle a été révélée lorsque nous avons cliqué sur le bouton ici.
Maintenant, c'est un exemple de l'utilisation du plugin Réduire ici.
Lorsque nous regardons le code, nous verrons que nous appliquons réellement le plugin Réduire à
la div qui contient cette barre de navigation. En
regardant le code de
notre barre de navigation que nous avons conçu précédemment, vous avez vu qu'ici,
à l'intérieur du conteneur, nous avons créé ce bouton qui est affiché pour
les tailles d'écran extra-petites en utilisant la classe navbar-toggler.
Regardez la div qui suit ce bouton ici.
Pour le div qui suit ce bouton, nous avons utilisé la classe d'effondrement.
C' est donc l'utilisation du plugin Collapse dans notre barre de navigation.
Donc, ce que cela crée est que ce contenu particulier,
notre barre de navigation qui est enfermé dans ce div, sera réduit pour
les tailles d'écran extra-petites.
Et puis, avec le plugin Réduire, ce bouton qui apparaît
là déclenchera l'affichage et le masquage de cette barre de navigation ici.
C' est pourquoi lorsque vous regardez le bouton, vous verrez que juste là,
nous fournissons l'attribut data-toggle avec l'effondrement ici,
puis la data target comme #Navbar ici.
Et notez que l'identifiant de ce div que nous avons appliqué ici est Navbar.
Donc, nous spécifions essentiellement que ce bouton va agir comme le
mécanisme de déclenchement pour ce plugin Collapse pour travailler sur cette div ici.
Il s'agit donc d'une utilisation du plugin Réduire dans votre page Web.
En outre, nous allons regarder l'autre composant, qui est l'Accordéon dans Bootstrap.
Comment se comporte un accordéon ?
C' est donc un exemple d'accordéon que nous allons construire dans l'exercice
qui suit.
Donc ici, vous verrez que j'ai remplacé la navigation à onglets que nous
avons faite dans l'exercice précédent en utilisant un accordéon ici.
La façon dont fonctionne l'Accordéon est qu'une partie du contenu est révélée et que
les trois autres sont cachés.
Donc, cela utilise le plugin Collapse à cette fin.
Donc, lorsque vous cliquez sur le nom de l'un de ces autres dirigeants d'entreprise,
alors les détails de ce chef d'entreprise sont révélés et
les trois autres sont cachés.
Donc c'est le comportement de l'accordéon ici.
Si vous êtes familier avec un accordéon,
l'instrument de musique, vous savez comment fonctionnent le soufflet de l'accordéon.
Donc, c'est, dans un certain sens, se comporter comme le soufflet de l'accordéon.
C' est la raison pour laquelle ce composant est appelé accordéon dans Bootstrap.
Un autre exemple du plugin Collapse en cours d'utilisation est sur votre propre site de cours.
Donc, si vous allez sur le site Web de votre cours,
puis vous allez dans le contenu de votre site Web de cours et
commencez à afficher le contenu ici, vous remarquerez que sur le côté gauche,
vous avez une navigation qui entre dans l'image sur le côté gauche.
Donc c'est la navigation là-bas.
Ainsi, lorsque vous cliquez sur chacun d'eux, vous remarquez comment le contenu ici
est caché et révélé en cliquant sur chacun de ces liens là.
Donc, c'est comme le plugin Collapse que nous avons vu dans Bootstrap.
Bien que, bien sûr, la page Coursera n'utilise pas Bootstrap.
Nous passerons à l'exercice suivant où nous verrons comment nous construisons
l'Accordéon pour montrer l'information sur le leadership de notre entreprise.
[ MUSIQUE]