Dans cet exercice, nous allons explorer la navigation basée sur des onglets de Bootstrap, la prise en
charge par Bootstrap pour les onglets
et la façon dont les onglets peuvent être utilisés pour organiser le contenu de votre page Web.
Et comment vous pouvez naviguer d'un onglet à un autre,
puis révéler le contenu de chacun de ces onglets dans la page Web.
Maintenant, vous me verrez ici en utilisant la classe nav,
puis la qualifier en utilisant la classe nav tabs.
La même approche peut également être utilisée avec les pilules de navigation
que nous avons examinées dans la conférence précédente.
Pour commencer avec cet exercice,
nous allons dans la page aboutus.html.
Et puis juste là,
où nous avons le contenu de leadership de l'entreprise là-bas,
après le h2, je vais introduire la navigation à onglets.
Donc, c'est là que je vais utiliser l'ul avec les onglets de navigation de classe.
Donc, vous avez vu que plus tôt lorsque nous avons construit la barre de navigation,
nous avons également utilisé l'ul à l'intérieur de la barre de navigation pour spécifier les éléments de navigation là-bas.
Une approche similaire ici, sauf qu'ici nous allons
utiliser l'ul avec le nav et les onglets nav ici.
Donc, à l'intérieur de cet ul,
nous allons construire la structure de navigation pour cette navigation à onglets ici.
Donc, là, je vais utiliser l'élément de liste avec la classe nav-item,
et construire la navigation autour de cet élément de liste.
Donc, cela introduit le premier élément dans mes onglets de navigation.
Juste après cela, à l'intérieur, je vais introduire un a avec la classe nav-link active.
Donc, celui-ci, comme vous le voyez,
si vous vous souvenez de la façon dont nous utilisons l'ul avec l'élément de navigation et le lien de navigation.
Dans la barre de navigation,
nous voyons une approche similaire ici.
Donc, nav-item actif, puis href.
Donc, ce serait une référence au volet d'onglets plus tard,
qui aurait l'ID de peter là,
et le rôle est l'onglet pour celui-ci,
et l'onglet bascule de données.
Ainsi, vous pouvez voir le composant javascript de Bootstrap venir en image ici.
Et puis je dirai Peter Pan,
et puis fermez l'étiquette a là-bas.
Donc, cela compléterait notre premier onglet dans notre navigation à onglets.
Laissez-moi compléter le reste du code,
et puis nous reviendrons et examinerons le reste du code là-bas.
Donc, ici vous pouvez voir que j'ai terminé cette structure de navigation ici.
De même, je suis en train de définir les éléments de liste pour les leaders d'entreprise libres restants ici.
Maintenant ça, laisse-moi sauver le changement.
Et puis allons-y jeter un coup d'œil à la page web. En
passant à la page Web,
vous voyez maintenant comment en utilisant les onglets nav nous avons créé
cette structure de navigation juste en dessous de la direction de l'entreprise ici.
Donc, cette structure de navigation signifie que je devrais être capable de naviguer et de
voir chacun d'entre eux plus en détail en cliquant dessus.
Donc, c'est ainsi que fonctionne la navigation par onglets ici.
Maintenant, évidemment, le contenu de chacun d'eux devrait
juste montrer que les détails de cette personne ici.
Donc, c'est là que l'utilisation du contenu à onglets
et les classes du volet d'onglets entrera en vigueur.
Et nous allons joindre ce contenu en utilisant cela.
Et puis associez cela à ces navigation,
navigation par onglet ici, de
sorte qu'une seule information de leader d'entreprise
est affichée à l'écran à la fois.
Une fois que nous avons terminé la configuration de cette navigation par onglets,
nous allons descendre dans le contenu réel ici.
Et puis maintenant, je vais réorganiser ce contenu en quatre volets distincts,
dont chacun sera affiché lorsque
le volet d'onglets correspondant est sélectionné dans la navigation à onglets.
Donc, pour commencer,
la première chose que nous allons faire est d'aller et de séparer
chacun de ces quatre chefs d'entreprise en quatre parties, de
sorte qu'il me soit facile de voir ce que je fais.
Donc, au h3,
je les découpe en quatre parties différentes,
et ensuite on pourra travailler avec ça.
Donc, maintenant j'en ai un, deux, trois, quatre.
Donc, ce contenu doit maintenant être enfermé dans un div
avec le contenu de l'onglet de classe.
Donc, tout ce contenu que nous avons pour
les quatre leaders d'entreprise différents devrait être inclus dans une div de contenu d'onglets là-bas.
Donc, maintenant j'ai inclus cela à l'intérieur du contact de l'onglet.
Maintenant, pour chacun d'eux,
j'ai besoin de créer un autre div avec le volet d'onglet des classes et quelques classes supplémentaires.
Et puis organisez ce contact.
Alors, commençons par le premier.
Donc, pour le premier chef d'entreprise,
je vais présenter une nouvelle div avec le rôle de tabpanel.
Ainsi, cela sert de panneau à onglets qui sera affiché
lorsque la première navigation à l'onglet est sélectionnée.
Et la classe correspondante que je dois appliquer est un volet à onglets.
Donc, il s'agit du volet d'onglets,
le contenu réel qui y est contenu.
Et puis une autre classe que j'applique est fondu.
Ainsi, la classe fondu permet à ce contenu de s'estomper.
Donc, il s'agit d'une classe d'animation que Bootstrap prend en charge.
En outre, j'applique cette classe appelée show.
La classe show spécifie essentiellement
que ce contenu particulier doit être affiché lors du premier rendu de la page.
Ainsi, il appliquera la classe show uniquement au premier volet d'onglets,
les volets d'onglets restants n'auront pas la classe show appliquée.
Et la dernière classe que je vais appliquer est active car c'est
le volet d'onglets qui va être affiché dans la page lorsque la page est rendue pour la première fois.
En outre, pour que la navigation fonctionne,
je dois donner à ceci un et ID,
et puisque j'ai utilisé le hashtag Peter pour le contenu de navigation de l'onglet,
donc je vais appliquer l'ID comme Peter ici.
Et donc, quand cela est fait référence dans un lien là-bas avec le hashtag Peter,
c'est le volet correspondant auquel je fais référence.
Maintenant, ce que je vais faire, c'est que je vais copier cette div à partir de là.
Et puis je vais appliquer cette div aux informations du deuxième leader d'entreprise,
sauf que pour celui-ci, je ne devrais appliquer que le volet d'onglet et adapter.
Le spectacle et actif ne doivent pas être appliqués pour les trois autres.
Et la carte d'identité ici devrait être Danny pour la seconde.
Je vais simplement copier ce code,
puis le coller pour le troisième leader d'entreprise ici.
Et puis le panneau de tabulation et le troisième est Agumbe.
Et le dernier,
encore une fois, je colle ça,
et puis l'ID devrait être changé en Alberto,
et fermer cette div ici.
Donc, ce div pour le dernier devrait être fermé à ce stade.
Et cela devrait prendre soin des quatre panneaux d'onglet dont j'ai besoin.
En entrant et en indentant ce contenu,
pour que je sois satisfait,
mon obsession y est satisfaite.
Ok, ça complète l'organisation du contenu de l'onglet.
Maintenant, sauvegardons le changement et allons jeter
un oeil rapide à ce que la page Web ressemble maintenant.
En accédant à notre page web,
vous voyez maintenant que notre page Web affiche uniquement le contenu correspondant à leur PDG.
Si vous passez à l'un des autres,
vous verrez que les informations correspondantes sont affichées.
Et remarquez comment ces informations s'estompent lorsque vous sélectionnez cet utilisateur particulier.
Mais, bien sûr, si vous êtes satisfait de cela,
alors c'est bon, nous pouvons nous arrêter à ce stade.
Mais je voudrais bien définir un véritable onglet autour de cela.
Donc, c'est là que je vais appliquer quelques attributs CSS,
propriétés à cet onglet particulier ici, de
sorte que c'est une
structure d'onglets agréable et propre qui est définie là.
Donc, créons quelques propriétés CSS pour cela.
La dernière étape, passer à styles.css.
Après l'inverse de la barre de navigation,
je vais introduire les classes CSS pour le contenu de l'onglet,
donc je spécifie pour le contenu de l'onglet,
border-gauche : 1px solide DDD.
Et je vais appliquer la même chose pour la frontière droite et inférieure.
Je n'ai pas besoin de m'appliquer en haut parce que le haut est
déjà régi par la navigation par onglet.
Et puis laissez-moi donner un rembourrage de 10 pixels tout autour,
puis enregistrer les changements.
Allons jeter un oeil à notre page web après cela.
Revenir à notre page,
maintenant vous voyez une belle
structure de type onglets propre en cours de création.
De sorte que lorsque vous naviguez vers chacun d'eux,
ces informations correspondantes sont correctement affichées dans son propre onglet.
Ceci complète cet exercice où nous avons examiné
l'utilisation de la navigation par onglets pour notre page Web.
Et puis nous avons vu comment nous pouvons créer la navigation par onglet et inclure d'autres contenus.
C' est aussi un bon moment pour vous de faire un commentaire Git avec les onglets de message.