Nous venons de terminer une discussion sur l'importance de fournir la navigation sur votre site Web.
Nous avons également examiné plusieurs façons de fournir la navigation sur un site Web.
Il est maintenant temps pour nous de regarder bootstrap et d'examiner les composants fournis par
bootstrap qui nous permettent d'ajouter de la navigation à nos sites Web.
Deux composants importants de bootstrap sont la Navbar et Breadcrumbs.
Nous allons examiner les deux dans cet exercice.
Commençons par ajouter une barre de navigation en haut de notre page Web.
Nous pouvons le faire en utilisant le composant Navbar qui fait partie de bootstrap.
Alors, comment on commence ?
Nous allons au corps de notre page HTML.
Donc ici, j'ai index.HTML ouvert.
Et en haut,
je vais ajouter un élément en utilisant cette balise HTML nav.
Maintenant, la balise HTML nav est destinée à fournir la navigation.
Donc, profitons de cette balise et construisons notre barre de navigation en utilisant la balise nav.
Donc maintenant, en haut,
je vais ajouter dans cette balise,
mettre le nav et construire la barre de navigation autour de cette balise de navigation.
Donc, une fois que nous ajoutons cette balise nav dans index.HTML,
alors nous pouvons aller de l'avant et ensuite appliquer les classes bootstraps à cette balise nav.
Donc, j'applique la barre de navigation de classe.
Ainsi, la classe navbar dans bootstrap me permet de créer une barre de navigation.
Il existe de nombreuses façons de personnaliser la barre de navigation, que
nous examinons comme des classes supplémentaires qui ajouteront à cette balise de navigation.
Avec la barre de navigation,
nous ajoutons également dans la classe suivante qui est navbar-dark.
Maintenant, je veux que ma barre de navigation soit de couleur foncée,
avec un fond plus sombre.
Parce que cela va très bien avec le site que je viens de concevoir.
Nous pouvons avoir navbar-light,
qui est une barre de navigation couleur plus claire.
Ainsi, vous pouvez choisir d'utiliser l'un d'eux dans votre page Web.
La classe suivante que je vais utiliser est la classe navbar-expand-sm.
Maintenant, et aussi, je vais spécifier la taille de l'écran en dessous de
laquelle le comportement basculant entre en existence.
Maintenant, quand je dis navbar-expand-sm,
cela signifie que pour les petits et les extra petits écrans,
ces barres de navigation deviendront une barre de navigation basculante. Ce
qui signifie que, il sera réduit dans ces tailles d'écran.
Vous apprendrez bientôt comment cela fonctionne,
quand nous regardons comment nous pouvons ajouter
le plugin collapsus à la barre de navigation pour activer ce genre de comportement.
Donc, avec une barre de navigation sm basculante,
je vais appliquer une couleur d'arrière-plan à la barre de navigation initialement,
qui serait bg-primaire.
Maintenant, bg-primary est la couleur primaire qui est définie dans votre bootstrap.
Par défaut, il s'agit d'une version de couleur bleue utilisée par les bootstraps.
Donc je vais commencer avec ça comme couleur primaire.
Plus tard, je vais personnaliser la couleur de ma barre de navigation en utilisant certaines classes CSS.
En outre, je vais également appliquer
une autre classe appelée le fixed-top à cette barre de navigation.
Ce que fixed-top fait, c'est qu'il fixe la barre de navigation en haut
de la fenêtre du navigateur où cette page Web est rendue.
Même lorsque vous faites défiler votre page humide,
la barre de navigation était jusqu'à rester en haut de la page.
Vous pouvez simplement utiliser le bas fixe pour fixer
la barre de navigation au bas de la fenêtre de votre navigateur ou vous pouvez dire, haut statique.
Et aussi, vous ne pouvez tout simplement pas utiliser cette classe.
Si vous ne l'utilisez pas,
votre barre de navigation défilera également lorsque votre page Web est déplacée vers le haut.
Dans mon site Web, je choisis de garder la barre de navigation fixe en haut de la page.
Il y a beaucoup d'autres options
disponibles que vous pouvez trouver dans la documentation des bootstraps.
C' est donc un exemple de l'utilisation de la barre de navigation.
Maintenant, en plus, à l'intérieur de la barre de navigation,
je vais inclure tout contenu
qui va être utilisé dans la barre de navigation à l'intérieur d'un conteneur.
Donc, c'est là que je vais utiliser un élément div ici
et appliquer la classe conteneur à cet élément div.
Donc, tout ce qui est enfermé à l'intérieur,
sera limité à la même largeur que le reste de ma page Web.
Comme vous vous souvenez, j'ai utilisé
la classe conteneur pour définir la largeur du contenu de ma page Web,
donc je vais appliquer la même chose à ma barre de navigation, de
sorte que les informations de ma barre de navigation soient
affichées dans la même largeur que le reste de ma page Web.
Vous pouvez choisir de ne pas utiliser la classe conteneur dans la barre de navigation. Dans ce cas,
le contenu de la barre de navigation s'étendra sur toute la largeur de votre écran.
À l'intérieur de la barre de navigation,
je vais ajouter une classe à une balise ici.
Cette classe que j'appelle en tant que marque navbar,
me permet d'afficher des informations comme une information de marque dans ma barre de navigation.
Donc, si vous avez une entreprise par exemple,
vous pouvez afficher le nom de votre entreprise ou
le logo de votre entreprise à l'aide de la marque navbar
afin qu'il soit bien visible dans votre barre de navigation.
Évidemment, lorsque vous visitez de nombreux sites Web,
vous verrez que le nom de la société est quelque part visible dans
la barre de navigation de ce site Web.
Alors, permettez-moi d'ajouter cette marque Navbar.
Cela peut également être lié à la page d'accueil de votre site Web.
Donc, je vais laisser ça là.
Dans les pages restantes de mon site,
je vais simplement ajouter le href pour me ramener à la page index.HTML,
qui est la page d'accueil.
Et ici, je vais ajouter le nom de mon restaurant.
Sauvegardons les modifications et allons jeter
un coup d'œil à l'état actuel de ma barre de navigation.
Aller à la page Web dans le navigateur,
vous pouvez maintenant voir où la barre de navigation est visible sur ma page Web dans le navigateur.
La barre de navigation est maintenant en haut de la page et vous
pouvez voir que lorsque je fais défiler ma page,
la barre de navigation reste toujours en haut parce que j'avais l'habitude de classe fixe.
Vous pouvez également voir
la marque navbar qui me permet d'y afficher le nom du restaurant.
Plus tard, je vais remplacer ça par le logo de ce restaurant.
Vous remarquez que la barre de navigation est partiellement couverte dans le Jumbotron.
Vous allez corriger cela un peu plus tard en utilisant une personnalisation CSS.
La prochaine chose que je vais faire est d'ajouter quelques liens à ma barre de navigation,
afin que ces liens me conduisent aux autres pages de mon site Web.
Alors comment on fait ça ?
Pour revenir à index.HTML,
je vais ajouter un ul ici,
dans lequel je vais déclarer
tous les différents liens qui vont être affichés dans ma boîte de navigation.
Donc, cet ul auquel je vais appliquer la classe comme navbar-nav.
Donc, c'est la classe qui m'aidera à définir
l'ensemble des liens qui seront inclus dans ma barre de navigation.
Et ces liens seront affichés horizontalement à l'intérieur de ma barre de navigation.
Le mr auto-class que j'ai également appliqué à l'ul,
est utilisé pour spécifier la bonne marge.
Donc, c'est une classe d'utilitaire qui est disponible
dans bootstrap qui me permet de spécifier la bonne marge.
Donc, si je dis, mr-auto,
ce que cela signifie, c'est que sur le côté droit,
la marge droite devrait être réglée autant que possible.
Donc, ce qui signifie que le contenu sera poussé aussi à gauche que
possible dans la barre de navigation.
Dans cette liste non ordonnée,
je peux utiliser des éléments de liste pour inclure
les différents liens qui feront partie de ma barre de navigation.
Donc, là-dedans, je vais ajouter quelques liens là-bas
et je vais commencer par spécifier le premier là-bas avec le lien.
À chaque élément de liste de votre barre de navigation,
vous allez appliquer la classe en tant qu'élément de navigation.
Cela permet à ces éléments de liste d'être affichés horizontalement sous forme de liens dans ma barre de navigation.
Et puis à l'intérieur ici,
je peux ensuite utiliser la balise a pour ajouter
le lien réel qui fera partie de ma barre de navigation.
Donc, à l'intérieur, j'utilise la balise a avec
la classe nav-link et cela me permet également d'utiliser le href.
Attribut pour définir le lien.
Et le premier que je vais inclure est Home.
Donc, cela inclurait un élément appelé Accueil dans cette barre de navigation.
Laisse-moi juste copier ça et puis coller ça.
Et puis nous allons éditer certains d'entre
eux parce que je veux ajouter quatre différents à ma barre de navigation.
Le premier est Home.
Le second serait A propos.
Le troisième serait Menu que je vais construire dans le cadre du prochain cours.
Et le dernier sera Contact.
Un site Web d'entreprise typique aurait des liens comme celui-ci dans sa barre de navigation.
Donc, en ajoutant ces deux,
maintenant ce que je peux faire est
que nous pouvons identifier explicitement l'un de ces liens comme le lien actif,
ce qui signifie que lorsque vous êtes sur cette page particulière,
ce lien particulier peut être mis en évidence.
Donc, pour ce faire, nous allons appliquer ici la classe appelée active à l'un de ces éléments de liste.
Dans ce cas, puisque c'est la page index.html,
j'applique la classe active au lien d'accueil là-bas.
Cela complète à peu près ma barre de navigation dans la page index.HTML.
Une petite chose que je voudrais corriger ici est que le lien À propos,
je veux le lier à la
page aboutus.HTML que nous avons déjà inclus dans notre site Web,
parce que c'est là que je veux qu'il mène.
Allons jeter un coup d'œil à notre barre de navigation de cette partie.
En revenant à notre barre de navigation,
vous pouvez immédiatement voir le résultat de l'inclusion de
ces articles dans la liste non ordonnée.
Donc, vous voyez le Accueil,
À propos, Menu et Contact,
et chacun d'eux est un lien mais il s'agit d'un élément de navigation ici.
Et notez comment la maison est mise en évidence ici en raison de l'utilisation de la classe active.
Donc, si je clique sur le À propos,
ça devrait m'emmener à l'About pitch.
Voici, nous sommes là.
Mais je me rends compte que je n'ai pas de moyen de revenir en arrière,
ce qui signifie que je dois aussi remettre cette barre de navigation à la page aboutus.HTML.
Nous y arriverons dans un court moment.
Pour l'instant, je vais naviguer rapidement en utilisant le bouton Précédent de
mon navigateur pour revenir à ma page index.HTML.
Une chose que je voulais également vous montrer était comment
cette barre de navigation va s'effondrer pour les petites et les très petites tailles d'écran.
Donc, allumons la vue en utilisant la vue Responsive,
puis laissez-moi aller au Galaxy S5.
Et j'ai remarqué que lorsque j'utilise le Galaxy S5 comme ça,
vous pouvez voir que cela est affiché plus tôt qu'il couvre déjà l'écran.
Ce n'est pas le comportement que je veux.
Je veux pouvoir cacher cela quand je regarde cela sur un petit et extra petit écran.
Et puis peut-être que j'ajoute un bouton ici que je peux utiliser
pour activer et désactiver l'affichage de ces liens.
Vous avez vu de telles choses sur les sites Web mobiles.
Comment pouvons-nous faire cela dans bootstrap ?
Passons à cette étape suivante.
Retournez à notre barre de navigation ici.
Permettez-moi d'ajouter un bouton là,
qui agira comme le bouton à bascule pour afficher et cacher
mes liens de ma barre de navigation lorsqu'il est affiché sur des écrans très intelligents et petits.
Donc, pour y ajouter,
permettez-moi d'ajouter un bouton et d'appliquer quelques classes à ce bouton.
Nous allons en discuter plus sur les boutons dans bootstrap dans la prochaine leçon.
Mais pour ajouter un bouton dans bootstrap,
vous appliqueriez la classe pour ce bouton particulier comme navbar-toggler.
Donc, c'est un navbar-toggler.
Donc, comme son nom l'indique,
vous commencez déjà à comprendre ce que ce bouton va faire dans ce cas.
Et puis j'ajouterais le type comme bouton pour indiquer que cela agit comme un bouton.
Et puis les données bascule comme effondrement.
Maintenant, cet attribut data-toggle que vous verrez ici est en fait
une utilisation du composant JavaScript dans bootstrap.
Nous allons regarder cette barre de traits d'union de données genre d'attributs plus dans le module suivant,
où nous allons examiner les composants JavaScript bootstraps.
La barre de navigation nécessite l'un de ces composants JavaScript pour pouvoir activer
et désactiver mes liens dans ma barre de navigation, Donc,
c'est la raison pour laquelle j'ai rapidement introduit ce concept ici,
mais nous reviendrons examiner
ces composants JavaScript bootstrap plus dans le module suivant.
Ainsi, les données bascule s'effondrent
, puis la cible de données comme #Navbar.
Maintenant, je vais introduire un autre div avec l'ID comme barre de navigation.
Donc, quand je spécifie une date ou une cible #Navbar,
cela fait référence à l'ID de cet autre élément qui va être
la cible de ce bouton particulier ici.
Donc, c'est la partie que j'ajoute en bas.
Et aussi, je veux que le bouton affiche quelque chose ici.
Et généralement, lorsque vous voyez ce genre de boutons dans les sites Web mobiles,
il contient des lignes libres là-bas,
ce qui est généralement appelé l'icône Navbar-bascule.
Donc, je vais inclure une icône spéciale qui
est incluse dans bootstrap, appelée icône navbar-toggler.
Donc, si j'applique cette classe à la balise span,
alors cela introduira une icône navbar-toggler à mon bouton ici.
Donc, cela introduit un bouton.
On va voir à quoi ça ressemble dans un court moment.
Maintenant, lorsque je clique sur ce bouton,
je veux pouvoir afficher et masquer ces liens.
Pour me permettre de faire cela,
ce que je vais faire est d'entourer cet ul d'un div ici.
Donc, je vais entrer et présenter un div autour de cet ul.
Et à cette div,
j'appliquerai la classe comme effondrement,
puis navbar-collapsus, et puis je lui donnerai un ID en tant que Navbar.
Maintenant, vous commencez à voir la corrélation entre
ces classes et l'ID et ce que j'ai déclaré dans le basculement de données et la cible de données.
Donc, ici la cible de données que je spécifie comme #Navbar et donc l'ID donné à cette div est navbar.
Et je spécifie le bascule de données comme effondrement.
Réduire est l'un des composants JavaScript bootstraps,
que nous examinerons plus en détail dans le module suivant.
Donc, enfermant cela à l'intérieur de la div pour les petits et extra petits écrans,
cela serait caché par défaut,
mais quand je clique sur
le bouton, le contenu de cette div sera révélé à l'écran.
Permettez-moi également d'ajouter un mr-auto à la marque navarbar-classe là pour que
j'introduise automatiquement une marge droite suffisante à cette marque navbar-.
Maintenant, allons jeter un oeil à cela dans notre navigateur.
Aller au navigateur, vous pouvez maintenant voir comment
ma barre de navigation est réduite sur les petites et extra petites tailles d'écran.
Et remarquez ce bouton sur le côté gauche.
Lorsque je clique sur le bouton,
les liens dans ma barre de navigation sont affichés et masqués.
C' est le comportement que je veux pour l'implémentation réactive de ma barre de navigation.
Si je passe à un
écran normal, plus grand, la barre de navigation est complètement affichée, y compris les liens.
Mais quand je vois la même chose sur un écran plus petit comme celui-ci,
alors les liens de la barre de navigation sont cachés derrière
ce bouton et seront ensuite activés et désactivés en cliquant sur ce bouton.
C' est donc le comportement réactif que vous pouvez
intégrer dans votre barre de navigation sur votre site Web.
Maintenant que nous avons terminé la barre de navigation sur ma page index.HTML,
je veux être en mesure d'introduire la même barre de navigation à la page aboutus.HTML.
Avant d'y arriver, allons au pied de page ici.
Et puis vous remarquez que dans le pied de page,
nous avons ces liens.
Je veux être en mesure de mettre à jour ce lien aussi pour pointer
vers aboutus.HTML de sorte que même en cliquant sur le lien dans mon pied de page,
j'irais toujours à la page à propos.
Maintenant, en revenant ici,
ce que je vais faire est simplement copier ce code de cette barre de navigation à partir d'ici.
Et puis, allez à la page aboutus.HTML, puis collez-le dans ma page aboutus.HTML.
Pas seulement cela, j'ai besoin de faire un ajustement à cela,
car c'est maintenant dans la page aboutus.HTML.
Donc, évidemment, il y a quelques choses que j'ai besoin de mettre à jour.
Tout d'abord, cette marque navbar qui devrait me ramener
à ma page d'accueil devrait maintenant être mise à jour comme index.HTML ici.
Et puis, l'élément de liste ici maintenant le second la page d'accueil à nouveau,
je veux mettre à jour
cela à index.HTML là, puis le deuxième lien vers le sujet, parce que
c'est la page aboutus.HTML, je vais le remettre à ce hachage là, puis je vais supprimer
la classe active de la première , puis appliquez la classe active au deuxième élément,
car il s'agit de la page A propos de la page et il devrait donc être celui qui est mis en surbrillance.
Encore une fois, aller au pied de page de la page À propos de la page.
Dans le pied de page, je vais faire les mêmes mises à jour aux liens ici afin que
la page d'accueil me ramène à index.HTML, puis me laisse enregistrer les modifications.
Donc maintenant ma page A propos est également mise à jour correctement.
Aller dans le navigateur,
vous pouvez maintenant voir que je suis sur ma page d'accueil et puis quand je clique sur la page à propos,
je vais aller à la page À propos.
Notez comment cette même barre de navigation est affichée dans A propos de la page,
donc vous avez à propos d'être mis en surbrillance parce
que j'ai appliqué la classe active à cela et puis je peux
revenir à ma page d'accueil soit en cliquant sur la marque narvar-ou sur la page d'accueil.
Donc, nous allons cliquer sur la marque narvar-et nous sommes de retour dans notre
page principale ou Accueil ou index.HTML.
Donc, maintenant la navigation est correctement configurée à la fois dans la page d'accueil et dans la page À propos.
Quelques choses supplémentaires que je vais faire est d'appliquer si vous voyez que
c'est la classe que je peux changer la couleur de ma barre de
navigation et aussi je voudrais ajouter une chapelure à cette page à propos et que la chapelure me donnera également une autre façon de revenir à ma page d'accueil et aussi indiquer
la hiérarchie dans mon site Web où je suis en ce moment.
Alors faisons ces deux étapes ensuite.
Revenir à cet éditeur dans styles.css.
Je vais ajouter quelques classes supplémentaires ici.
Tu as remarqué que ma barre de navigation cachait une partie du jumbotron.
Pour éviter cela,
ce que je vais faire est à mon corps,
je vais donner un rembourrage de 50 pixels sur
le dessus afin que ces 50 pixels soient laissés pour la barre de navigation à couvrir.
Chaque fois que vous utilisez une barre de navigation supérieure fixe, il est
conseillé de donner ce remplissage au corps de
votre page Web afin que la navigation ne couvre pas l'
élément le plus haut dans le corps de votre page Web.
Donc, les autres que je vais laisser comme
zéro pixels et aussi l'index z pour mon corps comme zéro.
D' après votre connaissance de CSS, vous comprenez ce que fait
l'index z et le prochain que je vais faire est que je vais
surcharger la classe navbar-dark en ajoutant une couleur de plus pour
la classe navbar et la couleur que je vais
choisir est 512DA8.
C' est une couleur pourpre foncé qui semble très bon dans mon site Web.
En effet, Si vous avez un intérêt où j'ai trouvé ces couleurs, vous pouvez visiter
www.android.com et ensuite chercher leur documentation pour la conception matérielle et là,
ils ont des suggestions pour la façon dont les couleurs peuvent être utilisées
dans votre application Android, mais la même chose s'applique même à un site Web,
donc c'est où je suis allé et sélectionné ces couleurs pour être utilisées sur mon site Web.
Donc, en appliquant ceci, maintenant quand je fais cela,
je dois retourner à ma page index.HTML,
puis de la barre de navigation je devrais supprimer ce bg-primary.
Sinon, la couleur que j'ai suggérée dans le CSS ne sera pas appliquée à cela.
De même, allez à la page aboutus.HTML, puis faites défiler jusqu'à
la barre de navigation, puis supprimez le bg-primary de cela également.
Maintenant, pendant que je suis dans la page aboutus.HTML,
permettez-moi d'introduire une chapelure dans mon conteneur,
la première rangée de mon conteneur là-bas.
Donc c'est là que le titre About Us était
là, donc je vais y aller et introduire un ol.
J' utilise juste la balise ol comme un moyen d'introduire la chapelure.
Vous pouvez utiliser même un div pour cela et cela fonctionnera toujours très bien.
Il se trouve juste que l'exemple sur la documentation de bootstraps a utilisé un ol donc,
je m'en tiens à ce que même un div simple fonctionnera aussi bien ici.
Donc, je dis ol classe col-12 chapelure.
Donc, les classes de chapelure appliquées et
non le col-12 signifiant qui étirait l'écran entier.
Et à l'intérieur, je vais entrer et ajouter deux éléments de la liste.
Maintenant, vous voyez pourquoi l'utilisation de ol est utile ici,
parce que je peux utiliser les éléments de la liste pour décrire l'élément de la chapelure.
Donc, article de chapelure ici,
donc j'inclus un élément de chapelure et puis à l'intérieur je vais utiliser
la balise A pour définir un lien vers ma page d'accueil.
Donc, je dis, « A » et puis à ce A,
je donne le href comme index.HTML et ensuite l'
inclure dans ma première chapelure et puis après cela,
le suivant que je vais inclure est un autre élément de liste et
le deuxième élément de liste j'appliquerai la classe en tant qu'élément de chapelure et actif.
Donc, notez l'utilisation de la classe active ici et puis à l'intérieur je vais dire « à propos de
nous » Je n'ai pas besoin d'un lien ici parce que je suis déjà sur la page
donc cela n'a pas besoin d'être inclus pour cet élément de liste.
Sauvegardons les modifications,
afin que vous puissiez voir comment la chapelure a été introduite dans cette
page particulière À propos de nous ici.
Allons jeter un oeil à la page Web qui en résulte.
Aller à ma page Web, vous pouvez maintenant voir que la couleur de la barre de navigation
a maintenant changé pour le violet foncé qui sont introduits
à travers le CSS et cela semble bien sur l'écran ici.
Pourpre foncé, suivi d'un violet plus clair, puis
en bas encore plus clair violet pour mon pied de page.
Eh bien, je ne suis pas designer,
mais c'est le meilleur que je pourrais trouver en termes d'ajout à proximité de sites Web.
Comme vous le savez de l'histoire, les hommes sont aveugles.
Donc, nous avons un très mauvais goût dans les couleurs.
Si vous êtes marié, votre femme vous le rappellera.
Allons à la page À propos et voyons à quoi elle ressemble.
Donc, voici la page A propos et dans la page A propos, vous pouvez
voir la barre de navigation avec la bonne couleur
là-bas et noter la chapelure inclus dans le À propos de nous ici.
Ainsi, vous pouvez voir le Accueil qui vous ramène à la page d'index
, puis À propos de nous comme vous l'avez vu, nous avons appliqué le lien
actif, la classe active à celui-ci.
C' est ainsi que l'affichage du À propos de nous et de la page d'accueil.
Donc, c'est le style de navigation par défaut utilisé
dans bootstrap et si je clique sur la page d'accueil, je retournerai à ma page d'accueil.
Avec cela, nous complétons cet exercice sur navbar et chapelure.
C' est le bon moment pour vous de faire un commit git avec le message « navbar et breadcumbs ».