1
00:00:03,650 --> 00:00:11,190
Nous venons de terminer une discussion sur l'importance de fournir la navigation sur votre site Web.

2
00:00:11,190 --> 00:00:15,920
Nous avons également examiné plusieurs façons de fournir la navigation sur un site Web.

3
00:00:15,920 --> 00:00:21,229
Il est maintenant temps pour nous de regarder bootstrap et d'examiner les composants fournis par

4
00:00:21,229 --> 00:00:26,269
bootstrap qui nous permettent d'ajouter de la navigation à nos sites Web.

5
00:00:26,269 --> 00:00:32,815
Deux composants importants de bootstrap sont la Navbar et Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
Nous allons examiner les deux dans cet exercice.

7
00:00:37,610 --> 00:00:44,745
Commençons par ajouter une barre de navigation en haut de notre page Web.

8
00:00:44,745 --> 00:00:50,065
Nous pouvons le faire en utilisant le composant Navbar qui fait partie de bootstrap.

9
00:00:50,065 --> 00:00:51,605
Alors, comment on commence ?

10
00:00:51,605 --> 00:00:56,260
Nous allons au corps de notre page HTML.

11
00:00:56,260 --> 00:00:58,760
Donc ici, j'ai index.HTML ouvert.

12
00:00:58,760 --> 00:01:00,495
Et en haut,

13
00:01:00,495 --> 00:01:06,090
je vais ajouter un élément en utilisant cette balise HTML nav.

14
00:01:06,090 --> 00:01:10,330
Maintenant, la balise HTML nav est destinée à fournir la navigation.

15
00:01:10,330 --> 00:01:17,880
Donc, profitons de cette balise et construisons notre barre de navigation en utilisant la balise nav.

16
00:01:17,880 --> 00:01:19,645
Donc maintenant, en haut,

17
00:01:19,645 --> 00:01:22,055
je vais ajouter dans cette balise,

18
00:01:22,055 --> 00:01:30,040
mettre le nav et construire la barre de navigation autour de cette balise de navigation.

19
00:01:30,040 --> 00:01:33,910
Donc, une fois que nous ajoutons cette balise nav dans index.HTML,

20
00:01:33,910 --> 00:01:39,590
alors nous pouvons aller de l'avant et ensuite appliquer les classes bootstraps à cette balise nav.

21
00:01:39,590 --> 00:01:42,700
Donc, j'applique la barre de navigation de classe.

22
00:01:42,700 --> 00:01:47,485
Ainsi, la classe navbar dans bootstrap me permet de créer une barre de navigation.

23
00:01:47,485 --> 00:01:50,730
Il existe de nombreuses façons de personnaliser la barre de navigation, que

24
00:01:50,730 --> 00:01:56,600
nous examinons comme des classes supplémentaires qui ajouteront à cette balise de navigation.

25
00:01:56,600 --> 00:01:58,770
Avec la barre de navigation,

26
00:01:58,770 --> 00:02:02,880
nous ajoutons également dans la classe suivante qui est navbar-dark.

27
00:02:02,880 --> 00:02:08,480
Maintenant, je veux que ma barre de navigation soit de couleur foncée,

28
00:02:08,480 --> 00:02:09,985
avec un fond plus sombre.

29
00:02:09,985 --> 00:02:13,920
Parce que cela va très bien avec le site que je viens de concevoir.

30
00:02:13,920 --> 00:02:16,150
Nous pouvons avoir navbar-light,

31
00:02:16,150 --> 00:02:18,950
qui est une barre de navigation couleur plus claire.

32
00:02:18,950 --> 00:02:23,775
Ainsi, vous pouvez choisir d'utiliser l'un d'eux dans votre page Web.

33
00:02:23,775 --> 00:02:32,620
La classe suivante que je vais utiliser est la classe navbar-expand-sm.

34
00:02:32,620 --> 00:02:36,870
Maintenant, et aussi, je vais spécifier la taille de l'écran en dessous de

35
00:02:36,870 --> 00:02:42,064
laquelle le comportement basculant entre en existence.

36
00:02:42,064 --> 00:02:45,165
Maintenant, quand je dis navbar-expand-sm,

37
00:02:45,165 --> 00:02:48,480
cela signifie que pour les petits et les extra petits écrans,

38
00:02:48,480 --> 00:02:51,370
ces barres de navigation deviendront une barre de navigation basculante. Ce

39
00:02:51,370 --> 00:02:57,080
qui signifie que, il sera réduit dans ces tailles d'écran.

40
00:02:57,080 --> 00:03:00,520
Vous apprendrez bientôt comment cela fonctionne,

41
00:03:00,520 --> 00:03:02,930
quand nous regardons comment nous pouvons ajouter

42
00:03:02,930 --> 00:03:07,460
le plugin collapsus à la barre de navigation pour activer ce genre de comportement.

43
00:03:07,460 --> 00:03:10,970
Donc, avec une barre de navigation sm basculante,

44
00:03:10,970 --> 00:03:15,240
je vais appliquer une couleur d'arrière-plan à la barre de navigation initialement,

45
00:03:15,240 --> 00:03:18,570
qui serait bg-primaire.

46
00:03:18,570 --> 00:03:25,909
Maintenant, bg-primary est la couleur primaire qui est définie dans votre bootstrap.

47
00:03:25,909 --> 00:03:33,350
Par défaut, il s'agit d'une version de couleur bleue utilisée par les bootstraps.

48
00:03:33,350 --> 00:03:35,910
Donc je vais commencer avec ça comme couleur primaire.

49
00:03:35,910 --> 00:03:42,350
Plus tard, je vais personnaliser la couleur de ma barre de navigation en utilisant certaines classes CSS.

50
00:03:42,350 --> 00:03:45,155
En outre, je vais également appliquer

51
00:03:45,155 --> 00:03:50,255
une autre classe appelée le fixed-top à cette barre de navigation.

52
00:03:50,255 --> 00:03:55,210
Ce que fixed-top fait, c'est qu'il fixe la barre de navigation en haut

53
00:03:55,210 --> 00:04:00,330
de la fenêtre du navigateur où cette page Web est rendue.

54
00:04:00,330 --> 00:04:03,830
Même lorsque vous faites défiler votre page humide,

55
00:04:03,830 --> 00:04:07,870
la barre de navigation était jusqu'à rester en haut de la page.

56
00:04:07,870 --> 00:04:12,250
Vous pouvez simplement utiliser le bas fixe pour fixer

57
00:04:12,250 --> 00:04:18,235
la barre de navigation au bas de la fenêtre de votre navigateur ou vous pouvez dire, haut statique.

58
00:04:18,235 --> 00:04:21,810
Et aussi, vous ne pouvez tout simplement pas utiliser cette classe.

59
00:04:21,810 --> 00:04:23,140
Si vous ne l'utilisez pas,

60
00:04:23,140 --> 00:04:29,325
votre barre de navigation défilera également lorsque votre page Web est déplacée vers le haut.

61
00:04:29,325 --> 00:04:36,670
Dans mon site Web, je choisis de garder la barre de navigation fixe en haut de la page.

62
00:04:36,670 --> 00:04:38,600
Il y a beaucoup d'autres options

63
00:04:38,600 --> 00:04:43,920
disponibles que vous pouvez trouver dans la documentation des bootstraps.

64
00:04:43,920 --> 00:04:48,495
C' est donc un exemple de l'utilisation de la barre de navigation.

65
00:04:48,495 --> 00:04:51,645
Maintenant, en plus, à l'intérieur de la barre de navigation,

66
00:04:51,645 --> 00:04:54,545
je vais inclure tout contenu

67
00:04:54,545 --> 00:04:57,450
qui va être utilisé dans la barre de navigation à l'intérieur d'un conteneur.

68
00:04:57,450 --> 00:05:02,880
Donc, c'est là que je vais utiliser un élément div ici

69
00:05:02,880 --> 00:05:10,125
et appliquer la classe conteneur à cet élément div.

70
00:05:10,125 --> 00:05:12,520
Donc, tout ce qui est enfermé à l'intérieur,

71
00:05:12,520 --> 00:05:17,375
sera limité à la même largeur que le reste de ma page Web.

72
00:05:17,375 --> 00:05:20,575
Comme vous vous souvenez, j'ai utilisé

73
00:05:20,575 --> 00:05:24,870
la classe conteneur pour définir la largeur du contenu de ma page Web,

74
00:05:24,870 --> 00:05:28,080
donc je vais appliquer la même chose à ma barre de navigation, de

75
00:05:28,080 --> 00:05:31,490
sorte que les informations de ma barre de navigation soient

76
00:05:31,490 --> 00:05:36,185
affichées dans la même largeur que le reste de ma page Web.

77
00:05:36,185 --> 00:05:41,225
Vous pouvez choisir de ne pas utiliser la classe conteneur dans la barre de navigation. Dans ce cas,

78
00:05:41,225 --> 00:05:47,200
le contenu de la barre de navigation s'étendra sur toute la largeur de votre écran.

79
00:05:47,200 --> 00:05:49,055
À l'intérieur de la barre de navigation,

80
00:05:49,055 --> 00:05:54,280
je vais ajouter une classe à une balise ici.

81
00:05:54,280 --> 00:06:02,390
Cette classe que j'appelle en tant que marque navbar,

82
00:06:02,520 --> 00:06:09,170
me permet d'afficher des informations comme une information de marque dans ma barre de navigation.

83
00:06:09,170 --> 00:06:11,110
Donc, si vous avez une entreprise par exemple,

84
00:06:11,110 --> 00:06:13,050
vous pouvez afficher le nom de votre entreprise ou

85
00:06:13,050 --> 00:06:16,040
le logo de votre entreprise à l'aide de la marque navbar

86
00:06:16,040 --> 00:06:21,390
afin qu'il soit bien visible dans votre barre de navigation.

87
00:06:21,390 --> 00:06:23,370
Évidemment, lorsque vous visitez de nombreux sites Web,

88
00:06:23,370 --> 00:06:26,400
vous verrez que le nom de la société est quelque part visible dans

89
00:06:26,400 --> 00:06:30,310
la barre de navigation de ce site Web.

90
00:06:30,310 --> 00:06:33,085
Alors, permettez-moi d'ajouter cette marque Navbar.

91
00:06:33,085 --> 00:06:42,190
Cela peut également être lié à la page d'accueil de votre site Web.

92
00:06:42,190 --> 00:06:43,895
Donc, je vais laisser ça là.

93
00:06:43,895 --> 00:06:46,000
Dans les pages restantes de mon site,

94
00:06:46,000 --> 00:06:50,480
je vais simplement ajouter le href pour me ramener à la page index.HTML,

95
00:06:50,480 --> 00:06:52,449
qui est la page d'accueil.

96
00:06:52,449 --> 00:07:00,109
Et ici, je vais ajouter le nom de mon restaurant.

97
00:07:03,220 --> 00:07:06,890
Sauvegardons les modifications et allons jeter

98
00:07:06,890 --> 00:07:11,110
un coup d'œil à l'état actuel de ma barre de navigation.

99
00:07:11,110 --> 00:07:13,710
Aller à la page Web dans le navigateur,

100
00:07:13,710 --> 00:07:21,150
vous pouvez maintenant voir où la barre de navigation est visible sur ma page Web dans le navigateur.

101
00:07:21,150 --> 00:07:25,960
La barre de navigation est maintenant en haut de la page et vous

102
00:07:25,960 --> 00:07:30,490
pouvez voir que lorsque je fais défiler ma page,

103
00:07:30,490 --> 00:07:36,745
la barre de navigation reste toujours en haut parce que j'avais l'habitude de classe fixe.

104
00:07:36,745 --> 00:07:38,520
Vous pouvez également voir

105
00:07:38,520 --> 00:07:45,460
la marque navbar qui me permet d'y afficher le nom du restaurant.

106
00:07:45,460 --> 00:07:50,310
Plus tard, je vais remplacer ça par le logo de ce restaurant.

107
00:07:50,310 --> 00:07:56,010
Vous remarquez que la barre de navigation est partiellement couverte dans le Jumbotron.

108
00:07:56,010 --> 00:08:01,395
Vous allez corriger cela un peu plus tard en utilisant une personnalisation CSS.

109
00:08:01,395 --> 00:08:07,255
La prochaine chose que je vais faire est d'ajouter quelques liens à ma barre de navigation,

110
00:08:07,255 --> 00:08:13,060
afin que ces liens me conduisent aux autres pages de mon site Web.

111
00:08:13,060 --> 00:08:14,790
Alors comment on fait ça ?

112
00:08:14,790 --> 00:08:17,575
Pour revenir à index.HTML,

113
00:08:17,575 --> 00:08:24,490
je vais ajouter un ul ici,

114
00:08:24,490 --> 00:08:27,715
dans lequel je vais déclarer

115
00:08:27,715 --> 00:08:36,460
tous les différents liens qui vont être affichés dans ma boîte de navigation.

116
00:08:36,460 --> 00:08:43,590
Donc, cet ul auquel je vais appliquer la classe comme navbar-nav.

117
00:08:43,590 --> 00:08:46,530
Donc, c'est la classe qui m'aidera à définir

118
00:08:46,530 --> 00:08:51,275
l'ensemble des liens qui seront inclus dans ma barre de navigation.

119
00:08:51,275 --> 00:08:56,655
Et ces liens seront affichés horizontalement à l'intérieur de ma barre de navigation.

120
00:08:56,655 --> 00:09:01,660
Le mr auto-class que j'ai également appliqué à l'ul,

121
00:09:01,660 --> 00:09:05,740
est utilisé pour spécifier la bonne marge.

122
00:09:05,740 --> 00:09:08,590
Donc, c'est une classe d'utilitaire qui est disponible

123
00:09:08,590 --> 00:09:13,815
dans bootstrap qui me permet de spécifier la bonne marge.

124
00:09:13,815 --> 00:09:17,190
Donc, si je dis, mr-auto,

125
00:09:17,190 --> 00:09:19,390
ce que cela signifie, c'est que sur le côté droit,

126
00:09:19,390 --> 00:09:23,100
la marge droite devrait être réglée autant que possible.

127
00:09:23,100 --> 00:09:26,380
Donc, ce qui signifie que le contenu sera poussé aussi à gauche que

128
00:09:26,380 --> 00:09:30,175
possible dans la barre de navigation.

129
00:09:30,175 --> 00:09:32,310
Dans cette liste non ordonnée,

130
00:09:32,310 --> 00:09:34,515
je peux utiliser des éléments de liste pour inclure

131
00:09:34,515 --> 00:09:38,775
les différents liens qui feront partie de ma barre de navigation.

132
00:09:38,775 --> 00:09:42,595
Donc, là-dedans, je vais ajouter quelques liens là-bas

133
00:09:42,595 --> 00:09:48,900
et je vais commencer par spécifier le premier là-bas avec le lien.

134
00:09:48,900 --> 00:09:51,830
À chaque élément de liste de votre barre de navigation,

135
00:09:51,830 --> 00:09:56,110
vous allez appliquer la classe en tant qu'élément de navigation.

136
00:09:56,110 --> 00:10:03,780
Cela permet à ces éléments de liste d'être affichés horizontalement sous forme de liens dans ma barre de navigation.

137
00:10:03,780 --> 00:10:06,055
Et puis à l'intérieur ici,

138
00:10:06,055 --> 00:10:10,640
je peux ensuite utiliser la balise a pour ajouter

139
00:10:10,640 --> 00:10:16,140
le lien réel qui fera partie de ma barre de navigation.

140
00:10:16,140 --> 00:10:19,600
Donc, à l'intérieur, j'utilise la balise a avec

141
00:10:19,600 --> 00:10:28,730
la classe nav-link et cela me permet également d'utiliser le href.

142
00:10:30,260 --> 00:10:37,145
Attribut pour définir le lien.

143
00:10:37,145 --> 00:10:41,255
Et le premier que je vais inclure est Home.

144
00:10:41,255 --> 00:10:46,935
Donc, cela inclurait un élément appelé Accueil dans cette barre de navigation.

145
00:10:46,935 --> 00:10:51,900
Laisse-moi juste copier ça et puis coller ça.

146
00:10:51,900 --> 00:10:55,475
Et puis nous allons éditer certains d'entre

147
00:10:55,475 --> 00:11:00,630
eux parce que je veux ajouter quatre différents à ma barre de navigation.

148
00:11:00,630 --> 00:11:02,110
Le premier est Home.

149
00:11:02,110 --> 00:11:04,170
Le second serait A propos.

150
00:11:04,170 --> 00:11:13,560
Le troisième serait Menu que je vais construire dans le cadre du prochain cours.

151
00:11:13,560 --> 00:11:16,630
Et le dernier sera Contact.

152
00:11:16,630 --> 00:11:25,495
Un site Web d'entreprise typique aurait des liens comme celui-ci dans sa barre de navigation.

153
00:11:25,495 --> 00:11:27,830
Donc, en ajoutant ces deux,

154
00:11:27,830 --> 00:11:30,915
maintenant ce que je peux faire est

155
00:11:30,915 --> 00:11:36,560
que nous pouvons identifier explicitement l'un de ces liens comme le lien actif,

156
00:11:36,560 --> 00:11:39,600
ce qui signifie que lorsque vous êtes sur cette page particulière,

157
00:11:39,600 --> 00:11:42,145
ce lien particulier peut être mis en évidence.

158
00:11:42,145 --> 00:11:48,685
Donc, pour ce faire, nous allons appliquer ici la classe appelée active à l'un de ces éléments de liste.

159
00:11:48,685 --> 00:11:51,815
Dans ce cas, puisque c'est la page index.html,

160
00:11:51,815 --> 00:11:56,085
j'applique la classe active au lien d'accueil là-bas.

161
00:11:56,085 --> 00:12:02,725
Cela complète à peu près ma barre de navigation dans la page index.HTML.

162
00:12:02,725 --> 00:12:08,095
Une petite chose que je voudrais corriger ici est que le lien À propos,

163
00:12:08,095 --> 00:12:12,130
je veux le lier à la

164
00:12:12,130 --> 00:12:16,965
page aboutus.HTML que nous avons déjà inclus dans notre site Web,

165
00:12:16,965 --> 00:12:19,680
parce que c'est là que je veux qu'il mène.

166
00:12:19,680 --> 00:12:23,795
Allons jeter un coup d'œil à notre barre de navigation de cette partie.

167
00:12:23,795 --> 00:12:25,985
En revenant à notre barre de navigation,

168
00:12:25,985 --> 00:12:28,995
vous pouvez immédiatement voir le résultat de l'inclusion de

169
00:12:28,995 --> 00:12:32,730
ces articles dans la liste non ordonnée.

170
00:12:32,730 --> 00:12:34,160
Donc, vous voyez le Accueil,

171
00:12:34,160 --> 00:12:36,500
À propos, Menu et Contact,

172
00:12:36,500 --> 00:12:43,145
et chacun d'eux est un lien mais il s'agit d'un élément de navigation ici.

173
00:12:43,145 --> 00:12:48,740
Et notez comment la maison est mise en évidence ici en raison de l'utilisation de la classe active.

174
00:12:48,740 --> 00:12:50,305
Donc, si je clique sur le À propos,

175
00:12:50,305 --> 00:12:52,990
ça devrait m'emmener à l'About pitch.

176
00:12:52,990 --> 00:12:55,670
Voici, nous sommes là.

177
00:12:55,670 --> 00:12:58,970
Mais je me rends compte que je n'ai pas de moyen de revenir en arrière,

178
00:12:58,970 --> 00:13:04,190
ce qui signifie que je dois aussi remettre cette barre de navigation à la page aboutus.HTML.

179
00:13:04,190 --> 00:13:07,330
Nous y arriverons dans un court moment.

180
00:13:07,330 --> 00:13:11,360
Pour l'instant, je vais naviguer rapidement en utilisant le bouton Précédent de

181
00:13:11,360 --> 00:13:16,585
mon navigateur pour revenir à ma page index.HTML.

182
00:13:16,585 --> 00:13:21,030
Une chose que je voulais également vous montrer était comment

183
00:13:21,030 --> 00:13:27,525
cette barre de navigation va s'effondrer pour les petites et les très petites tailles d'écran.

184
00:13:27,525 --> 00:13:35,570
Donc, allumons la vue en utilisant la vue Responsive,

185
00:13:35,570 --> 00:13:37,960
puis laissez-moi aller au Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
Et j'ai remarqué que lorsque j'utilise le Galaxy S5 comme ça,

187
00:13:43,250 --> 00:13:50,000
vous pouvez voir que cela est affiché plus tôt qu'il couvre déjà l'écran.

188
00:13:50,000 --> 00:13:52,145
Ce n'est pas le comportement que je veux.

189
00:13:52,145 --> 00:14:00,075
Je veux pouvoir cacher cela quand je regarde cela sur un petit et extra petit écran.

190
00:14:00,075 --> 00:14:04,220
Et puis peut-être que j'ajoute un bouton ici que je peux utiliser

191
00:14:04,220 --> 00:14:08,450
pour activer et désactiver l'affichage de ces liens.

192
00:14:08,450 --> 00:14:13,170
Vous avez vu de telles choses sur les sites Web mobiles.

193
00:14:13,170 --> 00:14:16,935
Comment pouvons-nous faire cela dans bootstrap ?

194
00:14:16,935 --> 00:14:19,645
Passons à cette étape suivante.

195
00:14:19,645 --> 00:14:24,300
Retournez à notre barre de navigation ici.

196
00:14:24,300 --> 00:14:27,910
Permettez-moi d'ajouter un bouton là,

197
00:14:27,910 --> 00:14:33,840
qui agira comme le bouton à bascule pour afficher et cacher

198
00:14:33,840 --> 00:14:42,225
mes liens de ma barre de navigation lorsqu'il est affiché sur des écrans très intelligents et petits.

199
00:14:42,225 --> 00:14:43,615
Donc, pour y ajouter,

200
00:14:43,615 --> 00:14:47,645
permettez-moi d'ajouter un bouton et d'appliquer quelques classes à ce bouton.

201
00:14:47,645 --> 00:14:54,285
Nous allons en discuter plus sur les boutons dans bootstrap dans la prochaine leçon.

202
00:14:54,285 --> 00:14:57,515
Mais pour ajouter un bouton dans bootstrap,

203
00:14:57,515 --> 00:15:03,770
vous appliqueriez la classe pour ce bouton particulier comme navbar-toggler.

204
00:15:04,450 --> 00:15:07,420
Donc, c'est un navbar-toggler.

205
00:15:07,420 --> 00:15:09,400
Donc, comme son nom l'indique,

206
00:15:09,400 --> 00:15:14,970
vous commencez déjà à comprendre ce que ce bouton va faire dans ce cas.

207
00:15:14,970 --> 00:15:22,650
Et puis j'ajouterais le type comme bouton pour indiquer que cela agit comme un bouton.

208
00:15:22,650 --> 00:15:31,360
Et puis les données bascule comme effondrement.

209
00:15:31,360 --> 00:15:36,070
Maintenant, cet attribut data-toggle que vous verrez ici est en fait

210
00:15:36,070 --> 00:15:42,400
une utilisation du composant JavaScript dans bootstrap.

211
00:15:42,400 --> 00:15:48,100
Nous allons regarder cette barre de traits d'union de données genre d'attributs plus dans le module suivant,

212
00:15:48,100 --> 00:15:50,875
où nous allons examiner les composants JavaScript bootstraps.

213
00:15:50,875 --> 00:15:55,225
La barre de navigation nécessite l'un de ces composants JavaScript pour pouvoir activer

214
00:15:55,225 --> 00:15:59,980
et désactiver mes liens dans ma barre de navigation, Donc,

215
00:15:59,980 --> 00:16:03,825
c'est la raison pour laquelle j'ai rapidement introduit ce concept ici,

216
00:16:03,825 --> 00:16:05,800
mais nous reviendrons examiner

217
00:16:05,800 --> 00:16:12,020
ces composants JavaScript bootstrap plus dans le module suivant.

218
00:16:12,020 --> 00:16:14,420
Ainsi, les données bascule s'effondrent

219
00:16:14,420 --> 00:16:24,610
, puis la cible de données comme #Navbar.

220
00:16:24,610 --> 00:16:30,660
Maintenant, je vais introduire un autre div avec l'ID comme barre de navigation.

221
00:16:30,660 --> 00:16:33,470
Donc, quand je spécifie une date ou une cible #Navbar,

222
00:16:33,470 --> 00:16:38,560
cela fait référence à l'ID de cet autre élément qui va être

223
00:16:38,560 --> 00:16:44,025
la cible de ce bouton particulier ici.

224
00:16:44,025 --> 00:16:47,625
Donc, c'est la partie que j'ajoute en bas.

225
00:16:47,625 --> 00:16:52,340
Et aussi, je veux que le bouton affiche quelque chose ici.

226
00:16:52,340 --> 00:16:56,970
Et généralement, lorsque vous voyez ce genre de boutons dans les sites Web mobiles,

227
00:16:56,970 --> 00:16:59,730
il contient des lignes libres là-bas,

228
00:16:59,730 --> 00:17:04,310
ce qui est généralement appelé l'icône Navbar-bascule.

229
00:17:04,310 --> 00:17:11,630
Donc, je vais inclure une icône spéciale qui

230
00:17:11,630 --> 00:17:19,660
est incluse dans bootstrap, appelée icône navbar-toggler.

231
00:17:19,660 --> 00:17:23,395
Donc, si j'applique cette classe à la balise span,

232
00:17:23,395 --> 00:17:29,050
alors cela introduira une icône navbar-toggler à mon bouton ici.

233
00:17:29,410 --> 00:17:32,130
Donc, cela introduit un bouton.

234
00:17:32,130 --> 00:17:34,980
On va voir à quoi ça ressemble dans un court moment.

235
00:17:34,980 --> 00:17:36,780
Maintenant, lorsque je clique sur ce bouton,

236
00:17:36,780 --> 00:17:41,140
je veux pouvoir afficher et masquer ces liens.

237
00:17:41,140 --> 00:17:43,140
Pour me permettre de faire cela,

238
00:17:43,140 --> 00:17:50,780
ce que je vais faire est d'entourer cet ul d'un div ici.

239
00:17:51,070 --> 00:17:57,585
Donc, je vais entrer et présenter un div autour de cet ul.

240
00:17:57,585 --> 00:17:59,280
Et à cette div,

241
00:17:59,280 --> 00:18:04,850
j'appliquerai la classe comme effondrement,

242
00:18:04,850 --> 00:18:15,895
puis navbar-collapsus, et puis je lui donnerai un ID en tant que Navbar.

243
00:18:15,895 --> 00:18:20,115
Maintenant, vous commencez à voir la corrélation entre

244
00:18:20,115 --> 00:18:26,300
ces classes et l'ID et ce que j'ai déclaré dans le basculement de données et la cible de données.

245
00:18:26,300 --> 00:18:32,750
Donc, ici la cible de données que je spécifie comme #Navbar et donc l'ID donné à cette div est navbar.

246
00:18:32,750 --> 00:18:35,640
Et je spécifie le bascule de données comme effondrement.

247
00:18:35,640 --> 00:18:40,440
Réduire est l'un des composants JavaScript bootstraps,

248
00:18:40,440 --> 00:18:43,955
que nous examinerons plus en détail dans le module suivant.

249
00:18:43,955 --> 00:18:50,780
Donc, enfermant cela à l'intérieur de la div pour les petits et extra petits écrans,

250
00:18:50,780 --> 00:18:54,860
cela serait caché par défaut,

251
00:18:54,860 --> 00:18:56,520
mais quand je clique sur

252
00:18:56,520 --> 00:19:01,445
le bouton, le contenu de cette div sera révélé à l'écran.

253
00:19:01,445 --> 00:19:09,540
Permettez-moi également d'ajouter un mr-auto à la marque navarbar-classe là pour que

254
00:19:09,540 --> 00:19:18,775
j'introduise automatiquement une marge droite suffisante à cette marque navbar-.

255
00:19:18,775 --> 00:19:22,495
Maintenant, allons jeter un oeil à cela dans notre navigateur.

256
00:19:22,495 --> 00:19:25,270
Aller au navigateur, vous pouvez maintenant voir comment

257
00:19:25,270 --> 00:19:31,370
ma barre de navigation est réduite sur les petites et extra petites tailles d'écran.

258
00:19:31,370 --> 00:19:35,925
Et remarquez ce bouton sur le côté gauche.

259
00:19:35,925 --> 00:19:38,005
Lorsque je clique sur le bouton,

260
00:19:38,005 --> 00:19:43,805
les liens dans ma barre de navigation sont affichés et masqués.

261
00:19:43,805 --> 00:19:51,360
C' est le comportement que je veux pour l'implémentation réactive de ma barre de navigation.

262
00:19:51,360 --> 00:19:55,375
Si je passe à un

263
00:19:55,375 --> 00:20:00,925
écran normal, plus grand, la barre de navigation est complètement affichée, y compris les liens.

264
00:20:00,925 --> 00:20:07,190
Mais quand je vois la même chose sur un écran plus petit comme celui-ci,

265
00:20:07,190 --> 00:20:10,430
alors les liens de la barre de navigation sont cachés derrière

266
00:20:10,430 --> 00:20:15,020
ce bouton et seront ensuite activés et désactivés en cliquant sur ce bouton.

267
00:20:15,020 --> 00:20:18,190
C' est donc le comportement réactif que vous pouvez

268
00:20:18,190 --> 00:20:22,870
intégrer dans votre barre de navigation sur votre site Web.

269
00:20:22,870 --> 00:20:27,285
Maintenant que nous avons terminé la barre de navigation sur ma page index.HTML,

270
00:20:27,285 --> 00:20:32,015
je veux être en mesure d'introduire la même barre de navigation à la page aboutus.HTML.

271
00:20:32,015 --> 00:20:35,540
Avant d'y arriver, allons au pied de page ici.

272
00:20:35,540 --> 00:20:38,250
Et puis vous remarquez que dans le pied de page,

273
00:20:38,250 --> 00:20:39,870
nous avons ces liens.

274
00:20:39,870 --> 00:20:43,265
Je veux être en mesure de mettre à jour ce lien aussi pour pointer

275
00:20:43,265 --> 00:20:48,450
vers aboutus.HTML de sorte que même en cliquant sur le lien dans mon pied de page,

276
00:20:48,450 --> 00:20:51,090
j'irais toujours à la page à propos.

277
00:20:51,090 --> 00:20:53,780
Maintenant, en revenant ici,

278
00:20:53,780 --> 00:21:02,320
ce que je vais faire est simplement copier ce code de cette barre de navigation à partir d'ici.

279
00:21:02,870 --> 00:21:13,520
Et puis, allez à la page aboutus.HTML, puis collez-le dans ma page aboutus.HTML.

280
00:21:13,520 --> 00:21:17,145
Pas seulement cela, j'ai besoin de faire un ajustement à cela,

281
00:21:17,145 --> 00:21:20,750
car c'est maintenant dans la page aboutus.HTML.

282
00:21:20,750 --> 00:21:25,105
Donc, évidemment, il y a quelques choses que j'ai besoin de mettre à jour.

283
00:21:25,105 --> 00:21:29,875
Tout d'abord, cette marque navbar qui devrait me ramener

284
00:21:29,875 --> 00:21:35,485
à ma page d'accueil devrait maintenant être mise à jour comme index.HTML ici.

285
00:21:35,485 --> 00:21:43,045
Et puis, l'élément de liste ici maintenant le second la page d'accueil à nouveau,

286
00:21:43,045 --> 00:21:51,165
je veux mettre à jour

287
00:21:51,165 --> 00:21:53,610
cela à index.HTML là, puis le deuxième lien vers le sujet, parce que

288
00:21:53,610 --> 00:21:58,480
c'est la page aboutus.HTML, je vais le remettre à ce hachage là, puis je vais supprimer

289
00:21:58,480 --> 00:22:06,045
la classe active de la première , puis appliquez la classe active au deuxième élément,

290
00:22:06,045 --> 00:22:11,520
car il s'agit de la page A propos de la page et il devrait donc être celui qui est mis en surbrillance.

291
00:22:11,520 --> 00:22:16,705
Encore une fois, aller au pied de page de la page À propos de la page.

292
00:22:16,705 --> 00:22:22,870
Dans le pied de page, je vais faire les mêmes mises à jour aux liens ici afin que

293
00:22:22,870 --> 00:22:29,525
la page d'accueil me ramène à index.HTML, puis me laisse enregistrer les modifications.

294
00:22:29,525 --> 00:22:34,740
Donc maintenant ma page A propos est également mise à jour correctement.

295
00:22:34,740 --> 00:22:36,390
Aller dans le navigateur,

296
00:22:36,390 --> 00:22:41,220
vous pouvez maintenant voir que je suis sur ma page d'accueil et puis quand je clique sur la page à propos,

297
00:22:41,220 --> 00:22:42,795
je vais aller à la page À propos.

298
00:22:42,795 --> 00:22:48,710
Notez comment cette même barre de navigation est affichée dans A propos de la page,

299
00:22:48,710 --> 00:22:51,090
donc vous avez à propos d'être mis en surbrillance parce

300
00:22:51,090 --> 00:22:53,660
que j'ai appliqué la classe active à cela et puis je peux

301
00:22:53,660 --> 00:22:58,770
revenir à ma page d'accueil soit en cliquant sur la marque narvar-ou sur la page d'accueil.

302
00:22:58,770 --> 00:23:02,115
Donc, nous allons cliquer sur la marque narvar-et nous sommes de retour dans notre

303
00:23:02,115 --> 00:23:06,210
page principale ou Accueil ou index.HTML.

304
00:23:06,210 --> 00:23:13,180
Donc, maintenant la navigation est correctement configurée à la fois dans la page d'accueil et dans la page À propos.

305
00:23:13,180 --> 00:23:17,810
Quelques choses supplémentaires que je vais faire est d'appliquer si vous voyez que

306
00:23:17,810 --> 00:23:23,480
c'est la classe que je peux changer la couleur de ma barre de

307
00:23:32,595 --> 00:23:36,950
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

308
00:23:36,950 --> 00:23:42,170
la hiérarchie dans mon site Web où je suis en ce moment.

309
00:23:42,170 --> 00:23:45,505
Alors faisons ces deux étapes ensuite.

310
00:23:45,505 --> 00:23:49,835
Revenir à cet éditeur dans styles.css.

311
00:23:49,835 --> 00:23:52,765
Je vais ajouter quelques classes supplémentaires ici.

312
00:23:52,765 --> 00:23:58,030
Tu as remarqué que ma barre de navigation cachait une partie du jumbotron.

313
00:23:58,030 --> 00:23:59,590
Pour éviter cela,

314
00:23:59,590 --> 00:24:01,705
ce que je vais faire est à mon corps,

315
00:24:01,705 --> 00:24:06,110
je vais donner un rembourrage de 50 pixels sur

316
00:24:06,110 --> 00:24:11,505
le dessus afin que ces 50 pixels soient laissés pour la barre de navigation à couvrir.

317
00:24:11,505 --> 00:24:14,580
Chaque fois que vous utilisez une barre de navigation supérieure fixe, il est

318
00:24:14,580 --> 00:24:17,580
conseillé de donner ce remplissage au corps de

319
00:24:17,580 --> 00:24:20,270
votre page Web afin que la navigation ne couvre pas l'

320
00:24:20,270 --> 00:24:24,435
élément le plus haut dans le corps de votre page Web.

321
00:24:24,435 --> 00:24:29,675
Donc, les autres que je vais laisser comme

322
00:24:29,675 --> 00:24:39,155
zéro pixels et aussi l'index z pour mon corps comme zéro.

323
00:24:39,155 --> 00:24:43,485
D' après votre connaissance de CSS, vous comprenez ce que fait

324
00:24:43,485 --> 00:24:48,865
l'index z et le prochain que je vais faire est que je vais

325
00:24:48,865 --> 00:24:55,580
surcharger la classe navbar-dark en ajoutant une couleur de plus pour

326
00:24:55,580 --> 00:24:59,750
la classe navbar et la couleur que je vais

327
00:24:59,750 --> 00:25:06,490
choisir est 512DA8.

328
00:25:06,490 --> 00:25:15,275
C' est une couleur pourpre foncé qui semble très bon dans mon site Web.

329
00:25:15,275 --> 00:25:21,505
En effet, Si vous avez un intérêt où j'ai trouvé ces couleurs, vous pouvez visiter

330
00:25:21,505 --> 00:25:29,665
www.android.com et ensuite chercher leur documentation pour la conception matérielle et là,

331
00:25:29,665 --> 00:25:33,325
ils ont des suggestions pour la façon dont les couleurs peuvent être utilisées

332
00:25:33,325 --> 00:25:38,965
dans votre application Android, mais la même chose s'applique même à un site Web,

333
00:25:38,965 --> 00:25:46,675
donc c'est où je suis allé et sélectionné ces couleurs pour être utilisées sur mon site Web.

334
00:25:46,675 --> 00:25:51,060
Donc, en appliquant ceci, maintenant quand je fais cela,

335
00:25:51,060 --> 00:25:55,740
je dois retourner à ma page index.HTML,

336
00:25:55,740 --> 00:26:01,095
puis de la barre de navigation je devrais supprimer ce bg-primary.

337
00:26:01,095 --> 00:26:09,320
Sinon, la couleur que j'ai suggérée dans le CSS ne sera pas appliquée à cela.

338
00:26:09,320 --> 00:26:14,185
De même, allez à la page aboutus.HTML, puis faites défiler jusqu'à

339
00:26:14,185 --> 00:26:20,850
la barre de navigation, puis supprimez le bg-primary de cela également.

340
00:26:21,610 --> 00:26:26,580
Maintenant, pendant que je suis dans la page aboutus.HTML,

341
00:26:26,580 --> 00:26:34,080
permettez-moi d'introduire une chapelure dans mon conteneur,

342
00:26:34,080 --> 00:26:36,310
la première rangée de mon conteneur là-bas.

343
00:26:36,310 --> 00:26:39,405
Donc c'est là que le titre About Us était

344
00:26:39,405 --> 00:26:45,120
là, donc je vais y aller et introduire un ol.

345
00:26:45,260 --> 00:26:53,560
J' utilise juste la balise ol comme un moyen d'introduire la chapelure.

346
00:26:53,560 --> 00:26:59,025
Vous pouvez utiliser même un div pour cela et cela fonctionnera toujours très bien.

347
00:26:59,025 --> 00:27:06,050
Il se trouve juste que l'exemple sur la documentation de bootstraps a utilisé un ol donc,

348
00:27:06,050 --> 00:27:14,030
je m'en tiens à ce que même un div simple fonctionnera aussi bien ici.

349
00:27:14,030 --> 00:27:20,895
Donc, je dis ol classe col-12 chapelure.

350
00:27:20,895 --> 00:27:23,200
Donc, les classes de chapelure appliquées et

351
00:27:23,200 --> 00:27:26,825
non le col-12 signifiant qui étirait l'écran entier.

352
00:27:26,825 --> 00:27:33,500
Et à l'intérieur, je vais entrer et ajouter deux éléments de la liste.

353
00:27:34,250 --> 00:27:39,625
Maintenant, vous voyez pourquoi l'utilisation de ol est utile ici,

354
00:27:39,625 --> 00:27:48,565
parce que je peux utiliser les éléments de la liste pour décrire l'élément de la chapelure.

355
00:27:48,565 --> 00:27:50,725
Donc, article de chapelure ici,

356
00:27:50,725 --> 00:27:55,020
donc j'inclus un élément de chapelure et puis à l'intérieur je vais utiliser

357
00:27:55,020 --> 00:28:02,380
la balise A pour définir un lien vers ma page d'accueil.

358
00:28:02,380 --> 00:28:07,275
Donc, je dis, « A » et puis à ce A,

359
00:28:07,275 --> 00:28:12,010
je donne le href comme index.HTML et ensuite l'

360
00:28:12,010 --> 00:28:17,815
inclure dans ma première chapelure et puis après cela,

361
00:28:17,815 --> 00:28:25,660
le suivant que je vais inclure est un autre élément de liste et

362
00:28:25,660 --> 00:28:34,700
le deuxième élément de liste j'appliquerai la classe en tant qu'élément de chapelure et actif.

363
00:28:34,700 --> 00:28:40,900
Donc, notez l'utilisation de la classe active ici et puis à l'intérieur je vais dire « à propos de

364
00:28:40,900 --> 00:28:45,090
nous » Je n'ai pas besoin d'un lien ici parce que je suis déjà sur la page

365
00:28:45,090 --> 00:28:49,425
donc cela n'a pas besoin d'être inclus pour cet élément de liste.

366
00:28:49,425 --> 00:28:51,010
Sauvegardons les modifications,

367
00:28:51,010 --> 00:28:54,910
afin que vous puissiez voir comment la chapelure a été introduite dans cette

368
00:28:54,910 --> 00:28:59,555
page particulière À propos de nous ici.

369
00:28:59,555 --> 00:29:04,410
Allons jeter un oeil à la page Web qui en résulte.

370
00:29:04,410 --> 00:29:11,320
Aller à ma page Web, vous pouvez maintenant voir que la couleur de la barre de navigation

371
00:29:11,320 --> 00:29:14,310
a maintenant changé pour le violet foncé qui sont introduits

372
00:29:14,310 --> 00:29:17,900
à travers le CSS et cela semble bien sur l'écran ici.

373
00:29:17,900 --> 00:29:20,780
Pourpre foncé, suivi d'un violet plus clair, puis

374
00:29:20,780 --> 00:29:24,300
en bas encore plus clair violet pour mon pied de page.

375
00:29:24,300 --> 00:29:27,240
Eh bien, je ne suis pas designer,

376
00:29:27,240 --> 00:29:33,875
mais c'est le meilleur que je pourrais trouver en termes d'ajout à proximité de sites Web.

377
00:29:33,875 --> 00:29:38,660
Comme vous le savez de l'histoire, les hommes sont aveugles.

378
00:29:38,660 --> 00:29:42,750
Donc, nous avons un très mauvais goût dans les couleurs.

379
00:29:42,750 --> 00:29:48,065
Si vous êtes marié, votre femme vous le rappellera.

380
00:29:48,065 --> 00:29:52,680
Allons à la page À propos et voyons à quoi elle ressemble.

381
00:29:52,680 --> 00:29:55,960
Donc, voici la page A propos et dans la page A propos, vous pouvez

382
00:29:55,960 --> 00:29:59,520
voir la barre de navigation avec la bonne couleur

383
00:29:59,520 --> 00:30:06,925
là-bas et noter la chapelure inclus dans le À propos de nous ici.

384
00:30:06,925 --> 00:30:10,910
Ainsi, vous pouvez voir le Accueil qui vous ramène à la page d'index

385
00:30:10,910 --> 00:30:15,020
, puis À propos de nous comme vous l'avez vu, nous avons appliqué le lien

386
00:30:15,020 --> 00:30:16,655
actif, la classe active à celui-ci.

387
00:30:16,655 --> 00:30:19,500
C' est ainsi que l'affichage du À propos de nous et de la page d'accueil.

388
00:30:19,500 --> 00:30:23,770
Donc, c'est le style de navigation par défaut utilisé

389
00:30:23,770 --> 00:30:29,450
dans bootstrap et si je clique sur la page d'accueil, je retournerai à ma page d'accueil.

390
00:30:29,450 --> 00:30:35,585
Avec cela, nous complétons cet exercice sur navbar et chapelure.

391
00:30:35,585 --> 00:30:42,640
C' est le bon moment pour vous de faire un commit git avec le message « navbar et breadcumbs ».