1
00:00:00,750 --> 00:00:12,290
Bienvenue dans cette leçon, je vais vous montrer l'un des composants les plus importants et les plus utilisés dans tous les Bootstrap qui est le NFR afin que vous puissiez voir effectivement obtenir Boucek dotcom.

2
00:00:12,450 --> 00:00:15,980
Ils utilisent suffisamment de bar composant ici.

3
00:00:16,200 --> 00:00:21,900
Nous allons aussi en utiliser un sur notre application de camping de Yelp et comme j'ai redimensionné la barre de navigation.

4
00:00:21,900 --> 00:00:30,700
Remarquez comment il est sensible et puis aussi remarquer dès que j'ai touché TAB quelle taille et taille mobile, nous obtenons ce hamburger gentil.

5
00:00:30,720 --> 00:00:33,020
Nous allons donc travailler à tout cela dans cette leçon.

6
00:00:33,180 --> 00:00:34,890
Mais nous allons commencer plus simple.

7
00:00:34,890 --> 00:00:46,290
La première chose que nous devons faire est d'aller à des composants et aller à la barre de navigation et avant d'aller beaucoup plus loin, j'ai créé un nouveau fichier juste parce que nous allons écrire un peu de code.

8
00:00:46,380 --> 00:00:48,150
La vieille était encombrée.

9
00:00:48,150 --> 00:00:50,620
Je l'appelle naff Bar H T M L.

10
00:00:50,820 --> 00:00:56,030
À l'intérieur de tout ce qu'ils ont est le lien à bootstrap pas changer le titre ici.

11
00:00:56,630 --> 00:01:00,980
Je vais juste appeler les barres de navigation bootstrap.

12
00:01:01,350 --> 00:01:02,910
Juste comme ça.

13
00:01:02,910 --> 00:01:07,580
Maintenant, allons à la documentation et jetez un oeil à la barre de navigation par défaut.

14
00:01:08,220 --> 00:01:13,460
Ainsi, cet exemple montre ici toutes les fonctionnalités importantes où nous pouvons avoir un lien de marque.

15
00:01:13,560 --> 00:01:15,800
Nous pouvons avoir d'autres liens sur les menus.

16
00:01:15,930 --> 00:01:22,010
Nous pouvons avoir un formulaire de barre de navigation et un bouton, nous pouvons avoir des choses qui sont sur le côté droit des choses qui sont sur le côté gauche.

17
00:01:22,020 --> 00:01:23,720
Cela montre vraiment tout.

18
00:01:23,790 --> 00:01:30,330
C'est l'évier de la cuisine de bootstrap naff bars et par conséquent le balisage est un peu long.

19
00:01:30,390 --> 00:01:33,530
Nous allons travailler avec tous ces morceaux à la fin de cette vidéo.

20
00:01:33,540 --> 00:01:37,790
Mais je veux commencer plus simple et je vais commencer par vous montrer la façon la plus simple de faire un nombre.

21
00:01:38,040 --> 00:01:51,550
Donc, nous devons faire un élément nav et que l'élément NAV doit avoir deux classes, nous voulons nav bar et barre de navigation et nous pouvons commencer avec Dasch par défaut sauvera.

22
00:01:51,550 --> 00:01:54,920
Et maintenant allons regarder le fichier dans le navigateur et actualiser.

23
00:01:55,200 --> 00:02:04,860
Vous pouvez voir, j'espère qu'il se présente et screencast il ya assez de barre très faible bar traversant le haut de sorte que c'est comme ça que nous avons réellement initialiser NF bar.

24
00:02:04,860 --> 00:02:06,980
Maintenant, nous allons le remplir avec du contenu.

25
00:02:07,050 --> 00:02:11,640
La première chose que nous allons jeter un coup d'oeil est comment nous pouvons ajouter dans cette marque ici.

26
00:02:11,790 --> 00:02:13,180
Fondamentalement le nom de votre entreprise.

27
00:02:13,230 --> 00:02:14,320
Dans la plupart des cas.

28
00:02:14,900 --> 00:02:20,830
Et c'est en utilisant un en-tête de barre de navigation, puis à l'intérieur de l'en-tête NFR, nous utilisons une marque de barre de navigation.

29
00:02:20,850 --> 00:02:35,910
Commençons par ajouter que la classe div est égale à l'en-tête du tableau de bord de la barre de navigation, puis à l'intérieur de celle-ci, nous allons ajouter dans la marque de barre de navigation qui est une balise d'ancrage.

30
00:02:35,910 --> 00:02:39,440
Habituellement, lorsque vous cliquez sur ce nom de société, il vous ramène à la page d'accueil.

31
00:02:39,660 --> 00:02:45,840
Donc, nous allons faire cela ici balise d'ancrage et nous allons commencer avec un trafic égal au Thorpes donc il ne nous emmène nulle part.

32
00:02:45,870 --> 00:02:52,890
La classe sera égale à la marque de tableau de bord de nav et nous allons juste composer un nom d'entreprise.

33
00:02:52,890 --> 00:02:57,170
Voyons voir si j'ai une tasse de café autour de moi alors allons-y avec du café.

34
00:02:57,270 --> 00:03:02,210
Mais pour vraiment faire une véritable startup nous devons changer l'orthographe un peu.

35
00:03:02,400 --> 00:03:03,180
OK Alex.

36
00:03:03,180 --> 00:03:03,990
Suffisant pour moi.

37
00:03:04,020 --> 00:03:05,350
Café avec un K.

38
00:03:05,760 --> 00:03:07,420
Allons jeter un coup d'oeil.

39
00:03:07,590 --> 00:03:11,830
Rafraîchir et nous avons maintenant notre marque NAV barre qui est un lien.

40
00:03:11,940 --> 00:03:12,880
Je clique dessus.

41
00:03:13,010 --> 00:03:20,940
Il ne me mène nulle part maintenant mais finalement nos applications l'auront de sorte que lorsque vous cliquez sur le nom de l'entreprise, il vous ramène à la page d'accueil suivante.

42
00:03:20,940 --> 00:03:24,480
Voyons voir si nous pouvons ajouter dans d'autres liens comme contact about.

43
00:03:24,510 --> 00:03:25,660
Inscrivez-vous pour s'inscrire.

44
00:03:25,770 --> 00:03:27,490
Tous ces liens communs dans le bar.

45
00:03:27,660 --> 00:03:31,190
Commençons par ajouter un lien sur la page ici.

46
00:03:31,500 --> 00:03:41,600
Donc, nous allons revenir en arrière et ensuite à l'extérieur de l'en-tête de barre de navigation, nous allons faire une autre div dans cette div va recueillir tout le contenu au moins sur le côté gauche de notre barre NAV.

47
00:03:41,760 --> 00:03:48,960
Donc, nous avons l'en-tête et puis nous allons avoir un certain contenu et puis si nous voulons quelque chose sur le côté droit, nous aurons un autre div qui a une autre classe.

48
00:03:48,960 --> 00:03:50,010
Alors la classe ici.

49
00:03:50,070 --> 00:03:56,730
En fait, deux, nous voulons nav et nav nav.

50
00:03:56,850 --> 00:04:00,170
Ne m'interrogez pas sur le nom de leur navigation nav nav nav.

51
00:04:00,210 --> 00:04:05,940
C'est l'une des grandes critiques de bootstrap, c'est que c'est un peu laid et il n'est pas très significatif parfois.

52
00:04:06,030 --> 00:04:14,630
Et il ya effectivement un cadre CSSA qui a été créé en réponse à l'absence de signification sémantique de bootstrap si vous appellerez interface utilisateur sémantique.

53
00:04:14,910 --> 00:04:16,660
Et c'est un que j'aime vraiment aussi bien.

54
00:04:16,710 --> 00:04:18,070
Et j'ai débattu de l'enseignement.

55
00:04:18,420 --> 00:04:22,190
Mais à la fin, il n'est tout simplement pas aussi largement utilisé, il n'ya pas encore de grands tutoriels.

56
00:04:22,200 --> 00:04:23,550
Donc, revenons à notre diff ici.

57
00:04:23,590 --> 00:04:27,600
Classe nav nav nav et la classe nav tous les deux.

58
00:04:27,690 --> 00:04:36,850
Et puis pour chaque élément que nous voulons sur ce NFR, nous devons ajouter un allié, puis à l'intérieur de la Y si nous voulons lier, nous venons d'avoir une balise d'ancrage.

59
00:04:37,050 --> 00:04:38,810
Donc, celui-ci ne va nulle part.

60
00:04:38,850 --> 00:04:42,280
Encore une fois et ce sera à la page À propos.

61
00:04:42,500 --> 00:04:54,120
Et si je retourne et de rafraîchir, nous avons maintenant un lien vers environ nous allons ajouter un de plus à contacter sauvegarder revenir.

62
00:04:54,570 --> 00:04:58,950
Maintenant, nous avons deux liens maintenant allons-y et ajouter quelque chose sur le côté droit de la page.

63
00:04:59,160 --> 00:05:07,630
Ajoutons deux liens un pour vous inscrire ou vous inscrire et un autre pour vous connecter sur le côté droit de la barre pour le faire.

64
00:05:07,690 --> 00:05:23,570
Nous avons besoin d'un autre conteneur ici et effectivement au lieu d'utiliser divs, il est plus classique d'utiliser un vous fera fonctionner exactement de la même façon, mais vous voulez avoir des alliés au lieu d'un puits, même si elles fonctionnent très bien avec un div fait un Un peu plus de sens à être au lieu d'un UL.

65
00:05:23,620 --> 00:05:32,700
Donc, nous allons ajouter un autre UL et celui-ci va être Nav. Nav nav de tableau de bord puis nav tableau de bord.

66
00:05:32,760 --> 00:05:33,570
Droite.

67
00:05:33,660 --> 00:05:38,280
Et nous devons nous assurer que nous épeler correctement, sinon cette classe ne prendra pas effet.

68
00:05:38,280 --> 00:05:42,960
Donc ce que cela va faire est de nous faire un nouveau groupe de contenu pour le côté droit de cette barre de navigation.

69
00:05:43,120 --> 00:05:44,540
Et maintenant, il suffit de le remplir.

70
00:05:44,550 --> 00:05:47,750
Donc, je vais ajouter deux liens à la fois en edgewise.

71
00:05:47,820 --> 00:05:56,550
Le premier va nulle part et il dira s'inscrire et puis nous aurons un autre qui dit juste log in.

72
00:05:56,940 --> 00:05:58,080
Nous allons jeter un coup d'oeil.

73
00:05:58,290 --> 00:06:01,630
Actualisez la page et vous pouvez voir que nous avons le contenu sur la droite.

74
00:06:01,650 --> 00:06:12,220
Cependant, il est juste contre le bord et de fixer que nous pouvons ajouter dans un récipient à assez de barre juste comme nous utilisons le conteneur plus tôt pour ajouter un certain espacement à notre contenu principal.

75
00:06:12,220 --> 00:06:14,190
Nous pourrions ajouter un au lieu d'une barre de navigation.

76
00:06:14,400 --> 00:06:17,730
J'ai donc tout mis dans la barre neph au lieu d'un conteneur.

77
00:06:17,740 --> 00:06:20,800
Donc la classe égale le conteneur.

78
00:06:21,060 --> 00:06:22,430
Il suffit de déplacer vers le bas.

79
00:06:22,560 --> 00:06:26,180
Assurez-vous que tout est indent correctement.

80
00:06:26,190 --> 00:06:27,770
Voilà.

81
00:06:27,780 --> 00:06:30,930
Testez-le.

82
00:06:30,930 --> 00:06:31,430
Agréable.

83
00:06:31,440 --> 00:06:33,910
Donc maintenant tout est bien centré et correctement.

84
00:06:34,140 --> 00:06:41,940
Je vais vous montrer si je n'ai ajouter le conteneur à l'extérieur du nav et ils ont mis toute la barre de navigation à l'intérieur.

85
00:06:42,880 --> 00:06:43,650
Nous allons voir ce qui se passe.

86
00:06:43,660 --> 00:06:49,950
Maintenant, si j'étais des barres assez fraîches, j'ai effectivement coupé et ne fait qu'une partie du chemin à travers la rue.

87
00:06:50,460 --> 00:06:53,460
Donc, conteneur fera cela à tout ce que nous mettons à l'intérieur de celui-ci.

88
00:06:53,670 --> 00:07:03,820
Et dans ce cas, nous voulons que le conteneur à l'intérieur de la barre de navigation de sorte qu'il n'est pas contraindre la véritable naff partie auto, mais il est de restreindre le contenu à l'intérieur de celui-ci.

89
00:07:04,440 --> 00:07:04,950
D'ACCORD.

90
00:07:05,060 --> 00:07:13,060
Donc, conteneur, nous avons notre Hetter nous avons les trucs sur la gauche et nous avons un certain contenu sur la droite pour que vous puissiez voir ici.

91
00:07:13,290 --> 00:07:29,670
Maintenant, ce que l'étape un peu plus et aller et prendre cette barre de navigation de base ou la barre de navigation par défaut qu'ils ont dans les documents et copions cette chose entière et je vais juste le mettre ci-dessous sont maintenant loin faire de l'espace.

92
00:07:29,670 --> 00:07:33,010
Beaucoup de commentaires pour le rendre plus clair.

93
00:07:33,250 --> 00:07:35,510
Barre de navigation par défaut.

94
00:07:36,060 --> 00:07:40,280
Et jetez un coup d'oeil à elle rafraîchir.

95
00:07:40,560 --> 00:07:44,580
Donc, c'est ce bar de navigation ici et il ya quelques choses que je tiens à souligner.

96
00:07:44,580 --> 00:07:48,690
L'un d'eux est que nous avons laissé tomber sur les menus, mais ils ne fonctionnent pas réellement.

97
00:07:48,900 --> 00:07:53,300
Et aussi que nous redimensionner la fenêtre, nous obtenons le menu hamburger ici.

98
00:07:53,550 --> 00:07:54,740
Ces liens disparaissent.

99
00:07:54,750 --> 00:07:58,630
La forme disparaît et pour les révéler, nous devons cliquer ici.

100
00:07:58,830 --> 00:08:00,480
Mais ça ne marche pas non plus.

101
00:08:00,960 --> 00:08:07,570
Commençons donc par le faire fonctionner, puis nous allons parler de tous ces différents morceaux et de ce qu'ils font pour le faire fonctionner.

102
00:08:07,590 --> 00:08:10,550
Nous devons aller inclure le fichier javascript bootstrap.

103
00:08:10,830 --> 00:08:15,660
Donc, si nous revenons à la bootstrap docs Nous allons cliquer sur le téléchargement.

104
00:08:15,780 --> 00:08:19,800
Il ya aussi un fichier javascript dont nous avons besoin qui est ici.

105
00:08:19,800 --> 00:08:24,460
Je vais utiliser la version Cdn, mais il vient aussi dans le dossier que vous téléchargez.

106
00:08:24,510 --> 00:08:25,700
C'est juste appelé bootstrap.

107
00:08:25,810 --> 00:08:26,220
Oui.

108
00:08:26,250 --> 00:08:29,890
Ou la version minimisée bootcapé Mencius.

109
00:08:30,420 --> 00:08:36,210
Et ajoutons cela et nous allons le faire au bas de notre corps et sauver.

110
00:08:36,210 --> 00:08:38,280
Et je sais que nous n'avons pas parlé de javascript.

111
00:08:38,380 --> 00:08:42,860
Vous ne savez pas ce qu'est un script et quelle source ici n'a pas d'importance.

112
00:08:42,900 --> 00:08:44,710
Nous allons juste le brancher en bootstrap.

113
00:08:44,910 --> 00:08:46,550
Et maintenant notre rafraîchissement.

114
00:08:46,710 --> 00:08:53,470
Pouvons-nous résoudre un petit problème que je vais vous montrer ici nous dit que bootstraps javascript requiert une requête.

115
00:08:53,790 --> 00:08:56,180
Ne vous inquiétez pas de ce que c'est et comment il est arrivé à ce message.

116
00:08:56,250 --> 00:08:59,970
Mais je veux simplement vous le montrer pour que vous voyiez le message que nous recevons.

117
00:08:59,970 --> 00:09:03,240
Nous devons exiger une requête J dont nous n'avons pas parlé.

118
00:09:03,580 --> 00:09:05,360
Mais il est assez facile d'aller et obtenir.

119
00:09:05,400 --> 00:09:07,140
Nous n'avons pas à écrire de javascript.

120
00:09:07,170 --> 00:09:08,830
Vous n'avez pas besoin de connaître un javascript.

121
00:09:08,830 --> 00:09:10,180
Nous devons simplement l'inclure.

122
00:09:10,230 --> 00:09:23,890
Donc, tout ce que nous devons faire est de rechercher Jay requêtes CDN qui est sur le code que Jay dot com et ici doit sélectionner la version la plus récente et copier cette URL.

123
00:09:23,910 --> 00:09:30,150
Il s'agit du dossier de Querrey et nous reviendrons ici.

124
00:09:30,150 --> 00:09:32,560
Nous allons ajouter une autre de ces balises de script.

125
00:09:32,640 --> 00:09:34,410
Fondamentalement copier ce code exact.

126
00:09:34,410 --> 00:09:42,030
En fait, je vais faire pour rendre plus facile de dupliquer cette ligne exacte et de changer cette url pour être la requête jey vous êtes.

127
00:09:42,610 --> 00:09:44,530
Si tout le reste échoue vous pouvez juste dactylographier ceci.

128
00:09:44,560 --> 00:09:56,290
Ce n'est pas si mauvais si vous êtes l, mais je l'ai obtenu en cherchant Jay queery CDN et sauvera et cela n'a pas besoin de venir avant bootstraps fichier javascript, car il s'appuie sur une requête.

129
00:09:56,560 --> 00:10:00,370
Donc, une fois de plus ne vous inquiétez pas trop sur ce que c'est comment il fonctionne ce que la requête Jay est.

130
00:10:00,450 --> 00:10:02,150
Tout cela se fera dans quelques minutes.

131
00:10:02,430 --> 00:10:06,550
Mais pour tirer le meilleur parti de bootstrap et en particulier les barres de navigation et le menu déroulant.

132
00:10:06,750 --> 00:10:13,210
Nous avons juste besoin d'avoir ces deux lignes à tout moment nous l'utilisons donc nous allons revenir maintenant et actualiser.

133
00:10:13,230 --> 00:10:18,850
Tout d'abord sont supprimés sur les menus fonctionnent maintenant comme vous pouvez le voir, nous avons maintenant des menus déroulants.

134
00:10:18,880 --> 00:10:24,430
Nous n'allons pas en parler dans cette vidéo, mais comme je redimensionne et que je reçois ce hamburger.

135
00:10:25,050 --> 00:10:26,980
Le hamburger fonctionne maintenant quand je clique dessus.

136
00:10:26,980 --> 00:10:29,480
Il bascule ce matériel caché.

137
00:10:29,560 --> 00:10:43,280
Donc, la façon dont il fonctionne ici, il ya ce petit point d'arrêt ici où tout ce contenu se cache et tout ce que nous voyons est l'en-tête et ce bouton.

138
00:10:43,380 --> 00:10:49,120
Et puis quand nous cliquons sur le bouton tout ce contenu précédemment caché réapparaît Let's get que le travail.

139
00:10:49,120 --> 00:10:50,650
Maintenant pour nous.

140
00:10:50,950 --> 00:11:01,960
Mais nous allons faire une version beaucoup moins compliquée où nous voulons simplement cacher ces quatre liens afin que lorsque nous redimensionner ces quatre liens sont masqués et puis très vite ils seront affichés.

141
00:11:02,250 --> 00:11:09,830
Pour faire cela va commencer par jeter un oeil à comment est-il accomplit dans cette version par défaut ce monstre géant d'une barre de navigation.

142
00:11:10,380 --> 00:11:13,650
Et je vais juste souligner la ligne importante ici.

143
00:11:13,760 --> 00:11:24,850
Div classe effondrement nav bar effondrement que nous mettons à l'intérieur de cette div sera effondré lorsque nous avons frappé Mobile taille afin qu'il ne fera pas le bouton pour nous.

144
00:11:24,850 --> 00:11:33,470
Il ne fera pas le basculement dans le réapparition dans la clandestinité, mais il va cacher tout contenu que nous mettons à l'intérieur de celui-ci lorsque nous avons frappé cette tablette et la taille mobile.

145
00:11:33,650 --> 00:11:40,320
Nous allons donc copier ceci et nous avons juste besoin de l'envelopper autour du contenu que nous voulons cacher et nous voulons cacher ceci ici.

146
00:11:40,330 --> 00:11:49,980
Ces deux Juelz Donc les quatre liens que nous voulons cacher quand nous touchons cette taille d'écran plus petite.

147
00:11:50,440 --> 00:11:57,820
Donc ajouter dans la balise de fermeture et d'enregistrer et il ya une ligne ici et c'est important et je vais y arriver dans un instant.

148
00:11:57,850 --> 00:12:01,230
Il ne nous touchera pas encore mais si nous rafraîchissons.

149
00:12:01,690 --> 00:12:02,160
Tu verras.

150
00:12:02,170 --> 00:12:10,650
Maintenant, quand je redimensionner il ya un point ici où tout ce contenu à l'intérieur de la div d'effondrement disparaît.

151
00:12:10,680 --> 00:12:11,650
Maintenant il ne réapparaît pas.

152
00:12:11,640 --> 00:12:13,180
Nous n'avons pas ce hamburger.

153
00:12:13,330 --> 00:12:16,940
Nous n'obtenons pas un clic sur quoi que ce soit, mais il s'est effondré, il est parti.

154
00:12:17,050 --> 00:12:24,580
Et c'est parce que nous avons ajouté dans cette ligne ici la classe div effondrement nav bar effondrement.

155
00:12:24,630 --> 00:12:29,780
La prochaine chose que nous devons faire est d'ajouter dans le hamburger et c'est un peu de code.

156
00:12:29,780 --> 00:12:33,010
Malheureusement, il est encore beaucoup mieux que si nous devions le faire nous-mêmes.

157
00:12:33,280 --> 00:12:37,220
Mais le hamburger est en fait tout cela ici.

158
00:12:37,800 --> 00:12:48,660
Donc, je vais copier cela et le coller sur l'intérieur d'une sieste ou Hetter avant notre café incontact.

159
00:12:48,970 --> 00:12:52,420
Et nous allons économiser je vais revenir à ce qu'il fait.

160
00:12:53,320 --> 00:12:54,680
Il suffit de rafraîchir.

161
00:12:55,140 --> 00:12:57,910
Et maintenant, si je redimensionne, je reçois le hamburger.

162
00:12:58,120 --> 00:13:00,280
Voilà.

163
00:13:00,310 --> 00:13:03,240
Permettez-moi maintenant d'expliquer un peu comment cela fonctionne.

164
00:13:03,250 --> 00:13:13,000
Donc, il ya un bouton et puis à l'intérieur de ce bouton il ya trois travées et chacun est responsable de faire une de ces barres.

165
00:13:13,210 --> 00:13:21,780
Donc, ce n'est pas une image que nous voyons ici, c'est en fait chaque équipe qui fait de cette petite spande qui sont en cours de style dans ces barres étroites pour faire ce hamburger.

166
00:13:22,030 --> 00:13:34,310
Et puis, en ce qui concerne l'affichage et la dissimulation du contenu lorsque nous cliquons sur ce qui est vraiment important, c'est que nous avons cet attribut cible de données et ce que ce soit mis dans notre cas B-S exemple.

167
00:13:34,310 --> 00:13:41,700
Maintenant, pour notre effondrement un exemple de bootstrap net pour notre club donc et nous allons simplement le changer à oui.

168
00:13:42,180 --> 00:13:44,330
Nav. Démo juste comme ça.

169
00:13:44,470 --> 00:13:49,810
Ensuite, nous devons changer l'ID du contenu que nous voulons effondrer réellement que nous voulons montrer et masquer.

170
00:13:49,870 --> 00:13:57,310
Donc, je vais le changer pour correspondre à la démo nav.

171
00:13:57,340 --> 00:13:59,710
Notez une différence importante.

172
00:13:59,710 --> 00:14:11,420
Nous n'ajoutons pas dans l'Arctique Thor Donc, c'est comme CSI s quand nous sélectionnons quelque chose avec C dit que nous avons besoin d'utiliser Octa Thorpe pour cibler un ID de sorte que nous laissons l'ID comme juste le texte du nom.

173
00:14:11,440 --> 00:14:18,120
Maintenant, si la démo ici, nous ajoutons que à Thorpe, il sauvera rafraîchir.

174
00:14:18,120 --> 00:14:25,490
Maintenant, si je redimensionner, nous obtenons le hamburger et ils cliquent sur elle et il fonctionne pour basculer que montrant et se cachant.

175
00:14:26,250 --> 00:14:27,040
Génial.

176
00:14:27,070 --> 00:14:32,400
La dernière chose qui va vous montrer est que si nous déplacer quelque chose en dehors de cet effondrement.

177
00:14:32,470 --> 00:14:35,710
Prenons donc ces liens ici.

178
00:14:36,070 --> 00:14:55,710
Le compte ou le à propos et contact et nous venons de déplacer ceux-ci ici même en dehors de l'effondrement div et je rafraîchir peut voir qu'ils ne s'effondrent réellement ils restent là et puis je clique sur ce et les deux autres qui sont au lieu de l'effondrement Sont basculés.

179
00:14:55,720 --> 00:15:00,390
Maintenant, je ne dis pas que cela semble bon, mais il illustre l'importance de cet effondrement div ..

180
00:15:00,630 --> 00:15:08,160
Donc tout ce qui est arrivé côté de l'effondrement ou ce que nous avons dans notre cas pour différents liens vers qui sont sur la droite à la ou sur la gauche.

181
00:15:08,160 --> 00:15:12,070
Ils vont tous s'effondrer chaque fois que nous touchons cette petite taille mobile.

182
00:15:12,070 --> 00:15:23,570
Et puis pour les faire apparaître de nouveau, nous cliquons sur ce bouton ici et ce bouton a un attribut cible de données et tout ID qui correspond à sera masqué et affiché lorsque nous cliquons sur celui-ci.

183
00:15:24,010 --> 00:15:25,930
Et c'est ce qui se passe ici.

184
00:15:26,440 --> 00:15:28,230
OK si genre de marathon.

185
00:15:28,270 --> 00:15:30,750
Beaucoup de choses qui entrent dans la fabrication d'une barre de navigation bootstrap.

186
00:15:30,970 --> 00:15:37,450
Mais encore une fois la façon dont nous sommes arrivés là était juste en haut en haut copiant ceci dans notre dossier et en disséquant des morceaux de lui.

187
00:15:37,540 --> 00:15:44,080
Et c'est ainsi que nous faisons assez sont à peu près chaque fois que nous prenons juste cet exemple de code et de comprendre ce que les pièces dont nous avons besoin et aller de là.