1
00:00:00,660 --> 00:00:06,740
Bienvenue dans cette leçon, nous allons construire un petit projet en utilisant ce que nous avons appris jusqu'à présent sur bootstrap.

2
00:00:06,770 --> 00:00:13,590
Il comprendra une grande partie des composantes dont nous avons parlé, y compris maintenant bar le jumbotron et le système de grille.

3
00:00:13,920 --> 00:00:17,370
J'ai également jeté dans une ou deux nouvelles choses, y compris les icônes ici.

4
00:00:17,370 --> 00:00:19,180
Nous n'avons pas encore vu comment les faire.

5
00:00:19,500 --> 00:00:30,360
Et aussi le fait que cette barre de navigation que je défile il verra qu'il reste fixé au sommet de sorte qu'il ne défile pas la façon dont nous avons une barre de navigation fixe que nous n'avons pas encore vu tout de suite.

6
00:00:30,360 --> 00:00:34,800
Enfin, nous modifions certaines couleurs des composants bootstrap par défaut.

7
00:00:34,800 --> 00:00:37,290
Il s'agit donc d'une teinte légèrement différente de gris.

8
00:00:37,380 --> 00:00:40,480
C'est l'ombre du bleu et la barre de navigation a quelques couleurs différentes.

9
00:00:40,560 --> 00:00:44,250
Je vais donc vous montrer comment faire tout cela avant de commencer à écrire n'importe quel code.

10
00:00:44,320 --> 00:00:52,620
Il suffit de prendre un moment pour souligner le fait que ces images pour la plupart sont d'un site Web une excellente ressource appelée Splash.

11
00:00:52,920 --> 00:00:57,640
Donc splash fournit un tas de belles rez photos haute que vous pouvez faire ce que vous voulez avec.

12
00:00:57,750 --> 00:01:00,630
Vous pouvez lire la licence ici, mais c'est à peu près tout ce que vous voulez.

13
00:01:00,630 --> 00:01:09,390
C'est une licence creative commons blah blah blah Je suis sûr que je n'aime pas vraiment que, mais les photos sont vraiment génial et j'utilise beaucoup de ces huit d'entre eux.

14
00:01:09,390 --> 00:01:11,450
En fait dans notre galerie.

15
00:01:11,790 --> 00:01:21,090
Et qui laisse une image qui est celle-ci ici même que j'ai réellement pris moi-même pris une classe de photographie et c'est la première chose que j'ai pris qui semble à moitié décent.

16
00:01:21,090 --> 00:01:24,780
Je pense que même si par rapport à ceux-ci ne cherche pas si chaud.

17
00:01:24,780 --> 00:01:28,650
Quoi qu'il en soit, si vous voulez utiliser ces mêmes images exactement ce qui n'est pas important.

18
00:01:28,740 --> 00:01:30,430
Cela fonctionne avec toutes les images du tout.

19
00:01:30,450 --> 00:01:42,570
Mais si vous voulez exactement les mêmes que j'ai inclus tous les liens dans cette galerie de fichiers M.D qui ont téléchargé avec cette vidéo et ont également inclus les deux couleurs que nous allons utiliser le bleu foncé et le gris clair.

20
00:01:42,740 --> 00:01:42,990
D'ACCORD.

21
00:01:42,990 --> 00:01:46,790
Donc, avec tout cela hors du chemin, commençons maintenant sur le projet.

22
00:01:47,100 --> 00:01:48,740
J'ai donc une galerie de fichiers vide.

23
00:01:48,750 --> 00:01:49,620
H m 1.

24
00:01:49,860 --> 00:01:58,670
Je vais ajouter dans mon h d m l squelette ici et nous allons appeler cette galerie d'images et la première chose que nous devons faire est d'inclure bootstrap.

25
00:01:58,800 --> 00:02:06,490
Et je vais juste copier sur les extrémités de CD d'un vieux projet donc je vais le faire maintenant.

26
00:02:06,900 --> 00:02:07,640
Et c'est parti.

27
00:02:07,710 --> 00:02:09,830
Je suis relié au CDN bootstrap.

28
00:02:10,200 --> 00:02:25,990
Et pendant que je suis ici je vais aussi récupérer les bootstraps CSSA et Jay queery city et que nous avons fait dans la leçon nav bar et mettre ceux au fond ici afin que lorsque nous ajoutons la barre de navigation dans nous n'avons pas à aller chasser Pour ces fichiers ou pour les balises de script.

29
00:02:26,250 --> 00:02:30,250
Donc, une sauvegarde et la première chose que nous pouvons faire est d'ajouter dans notre Jumbotron.

30
00:02:30,510 --> 00:02:32,160
C'est agréable et facile.

31
00:02:32,400 --> 00:02:38,470
Donc nous aurons un div et ce sera la classe égale Jumbotron.

32
00:02:38,880 --> 00:02:47,520
Et puis à l'intérieur du Jumbotron va commencer avec un H1 qui vient de dire la galerie d'images.

33
00:02:47,670 --> 00:02:51,420
Là, nous allons et nous allons économiser et nous allons nous assurer que cela fonctionne.

34
00:02:51,720 --> 00:02:53,660
Donc, il ouvrira ce fichier.

35
00:02:54,060 --> 00:02:55,330
Nous avons donc inclus Boucek.

36
00:02:55,350 --> 00:02:56,780
Nous voyons le changement de police.

37
00:02:56,820 --> 00:02:58,980
Nous voyons ce gris du Jumbotron.

38
00:02:58,980 --> 00:03:07,040
Maintenant, assurez-vous que c'est dans un conteneur comme il est ici plutôt que ce que nous avons où il va tout le chemin à travers l'écran.

39
00:03:07,320 --> 00:03:12,850
Donc, nous allons faire que la classe div égale conteneur.

40
00:03:14,010 --> 00:03:21,900
Là-bas, nous allons faire correctement et actualiser et nous y retournerons.

41
00:03:21,900 --> 00:03:25,140
D'accord, nous avons le Jumbotron mais ajoutez ce paragraphe.

42
00:03:25,140 --> 00:03:33,080
Maintenant, nous allons revenir et faire l'icône, mais c'est juste une étiquette de paragraphe sous le H-1, nous allons enregistrer.

43
00:03:33,090 --> 00:03:38,040
N'hésitez pas à mettre le texte que vous voulez là-bas et nous avons terminé avec le Jumbotron pour l'instant.

44
00:03:38,730 --> 00:03:45,190
Revenons donc et faisons maintenant la barre de navigation et je ne vais pas taper assez barre à partir de zéro pour deux raisons.

45
00:03:45,210 --> 00:03:46,970
L'un d'eux est que c'est un peu de code.

46
00:03:47,010 --> 00:03:48,000
Il faudra longtemps.

47
00:03:48,010 --> 00:03:48,840
Et cette vidéo.

48
00:03:48,960 --> 00:03:52,870
Mais deux, c'est le fait que je ne tape presque jamais Ackbar à partir de zéro.

49
00:03:53,220 --> 00:04:02,580
Comme je l'ai mentionné dans la vidéo de NASCAR la plupart du temps mon flux de travail est que je vais au site bootstrap ou à un site précédent que j'ai fait avec une barre NAV et je copie cela.

50
00:04:02,580 --> 00:04:04,990
Et je viens de le vérifier et je me débarrasse des morceaux que je ne veux pas.

51
00:04:05,010 --> 00:04:06,530
J'ajoute quelques nouvelles pièces.

52
00:04:06,570 --> 00:04:08,020
Donc c'est là que je vais faire ici.

53
00:04:08,160 --> 00:04:14,160
J'ai déjà assez de partie que j'ai fait dans la barre de navigation dit chaque application HTML.

54
00:04:14,280 --> 00:04:19,570
Il est juste ici et je vais juste copier cela dans et puis nous allons tordre un peu.

55
00:04:19,620 --> 00:04:27,220
Donc, copions-le et je vais revenir en arrière et nous allons simplement mettre cela au tout début du fichier juste comme ça.

56
00:04:27,330 --> 00:04:32,770
Et voyons ce que nous obtenons sont frais et nous avons la barre de navigation.

57
00:04:33,030 --> 00:04:34,010
C'est proche.

58
00:04:34,050 --> 00:04:36,410
Nous voulons changer la marque ici.

59
00:04:36,420 --> 00:04:43,020
Nous voulons également changer la couleur éventuellement et nous voulons nous assurer qu'il est fixé au sommet, ce qui n'est pas le cas actuellement, mais nous y arriverons.

60
00:04:43,290 --> 00:04:45,500
Revenons et changeons la marque.

61
00:04:45,690 --> 00:04:49,980
Donc au lieu de café, j'ai appelé les images de mine que vous pouvez appeler ce que vous voulez.

62
00:04:49,980 --> 00:04:53,970
Bien sûr, assurez-vous qu'il fonctionne bien.

63
00:04:54,250 --> 00:05:01,690
La prochaine chose que je vais vous montrer est un changement rapide que nous pouvons faire pour modifier la couleur où apparaissent au lieu de sieste ou par défaut.

64
00:05:01,700 --> 00:05:06,880
Nous pouvons faire maintenant si bar en vers et je vais vous montrer ce que ressemble.

65
00:05:06,880 --> 00:05:12,500
Nous obtenons un obscur maintenant pour maintenant ou les couleurs ont été inversées où le texte est léger et nous obtenons un fond foncé.

66
00:05:12,750 --> 00:05:15,660
Ce n'est pas la couleur bleue que je vais chercher ici.

67
00:05:16,030 --> 00:05:19,740
Et la police n'est pas blanche, mais nous allons revenir et corriger cela.

68
00:05:19,750 --> 00:05:21,650
C'est assez proche pour l'instant.

69
00:05:21,670 --> 00:05:26,100
Maintenant, nous pouvons nous concentrer sur la galerie d'images réelle sur cette grille ici.

70
00:05:26,350 --> 00:05:29,640
Et commençons par regarder comment il se comporte sur la solution.

71
00:05:29,860 --> 00:05:44,480
Donc, il commence par trois images qui traversent et puis, comme je redimensionner, il descend à deux, puis il descend à deux et puis enfin à la petite taille, il va à un comme vous pouvez le voir ici.

72
00:05:44,720 --> 00:05:47,110
Et nous avons une image qui passe.

73
00:05:47,500 --> 00:05:52,780
Commençons par la mise en place de la grille pour cette grande taille où nous avons trois traverser.

74
00:05:52,780 --> 00:05:54,850
N'oubliez pas que nous avons 12 unités au total.

75
00:05:54,910 --> 00:05:59,730
Donc, si nous voulons que trois passent, nous allons désigner chacun d'entre eux comme quatre unités.

76
00:06:00,160 --> 00:06:04,420
Alors montons juste en dessous de notre Jumbotron.

77
00:06:04,420 --> 00:06:17,680
Toujours à l'intérieur du conteneur, bien que nous allons juste faire div classe égale ligne et puis à l'intérieur de cela, nous aurons div classe égale et nous voulons qu'il soit de quatre unités.

78
00:06:17,770 --> 00:06:30,260
Donc, nous allons faire la colonne grand tiret 4 et appuyez sur entrer et nous pouvons commencer en mettant juste un texte ici et puis je vais dupliquer cela parce que nous voulons trois de ceux.

79
00:06:30,430 --> 00:06:35,770
Et je ne vais pas m'inquiéter de la fixation de l'indentation encore parce que nous allons faire un changement plus important en un instant.

80
00:06:36,100 --> 00:06:40,170
Mais nous allons actualiser et nous obtenons ces trois colonnes à travers.

81
00:06:40,180 --> 00:06:52,860
Donc, la prochaine chose que nous voulons faire est d'obtenir des images et tout commence, mais juste prendre la L de ma photo Golden Gate Bridge et nous allons ajouter une balise d'image plutôt que du texte.

82
00:06:52,910 --> 00:07:02,620
Donc source d'image égale que le Golden Gate Bridge vous êtes malade et je vais coller que trois fois et sauver.

83
00:07:02,620 --> 00:07:10,310
Et si nous revenons en arrière, nous avons un problème qui est que cette image est énorme, même si nous avons ces trois colonnes.

84
00:07:10,360 --> 00:07:14,010
Notre image ne reste pas à l'intérieur de notre colonne, elle ne se rétrécit pas.

85
00:07:14,010 --> 00:07:19,010
Vous pouvez voir ce que nous allons faire pour corriger cela est ajouter en ajoutant un peu plus bootstrap.

86
00:07:19,030 --> 00:07:24,670
Je ne vous ai pas encore montré pour créer cette belle petite bordure autour de lui et il est appelé une vignette.

87
00:07:24,700 --> 00:07:33,250
Tout ce que nous devons faire est d'écrire un div avec une classe égale à la vignette et ensuite n'importe quelle image que nous mettons à l'intérieur de celle-ci sera réduite pour s'adapter à l'intérieur de la colonne.

88
00:07:33,250 --> 00:07:37,090
Et il obtient également cette petite frontière ici qui je pense semble assez agréable.

89
00:07:37,090 --> 00:07:52,600
Donc, pour ce faire, je vais effectivement se débarrasser de ce que nous avons avec ceux d'aller juste à une seule image et ajouter dans une classe div égale thumbnail et fait correctement.

90
00:07:52,930 --> 00:07:57,880
Et nous enveloppons cela autour de l'image et sauver.

91
00:07:57,880 --> 00:08:00,350
Maintenant, si nous rafraîchissons.

92
00:08:01,150 --> 00:08:06,470
Vous verrez si nous obtenons une seule image qui prend la quantité appropriée d'espace à l'intérieur de cette grille.

93
00:08:06,730 --> 00:08:12,200
C'est la colonne et il a une petite bordure autour de lui et l'image n'est pas gigantesque qui est grande.

94
00:08:12,700 --> 00:08:15,980
Donc, nous allons nous assurer qu'il fonctionne si nous dupliquer cela.

95
00:08:16,060 --> 00:08:22,430
Donc, c'est une image, nous allons le dupliquer trois fois et voir ce qui se passe rafraîchir.

96
00:08:22,780 --> 00:08:23,610
Et voilà.

97
00:08:23,710 --> 00:08:25,380
Nous avons trois images.

98
00:08:25,380 --> 00:08:27,290
Je vais aller plus loin et ajouter six autres.

99
00:08:27,360 --> 00:08:29,790
Nous avons donc neuf total comme nous le faisons ici.

100
00:08:30,490 --> 00:08:32,830
Et nous n'avons pas à ajouter des lignes distinctes.

101
00:08:33,040 --> 00:08:35,110
On peut tout mettre dans la même rangée.

102
00:08:35,200 --> 00:08:40,420
Donc copiez les trois que nous avons jusqu'ici à temps et sauver.

103
00:08:40,480 --> 00:08:42,730
Cela nous donnera neuf images.

104
00:08:42,730 --> 00:08:46,950
Et si je rafraîchis, vous verrez qu'ils s'enchaînent automatiquement à la ligne suivante.

105
00:08:47,230 --> 00:08:52,390
Donc, nous devons seulement avoir une ligne et ajouter dans les colonnes que vous connaissez médicalement nos.

106
00:08:52,480 --> 00:08:58,720
Si nous voulons que chaque image occupe quatre unités, alors cela signifie trois par ligne et nous avons besoin de trois rangées d'images.

107
00:08:58,780 --> 00:09:02,150
Je vais revenir en arrière et changer tous ces image vous les elfes à la fin de la vidéo.

108
00:09:02,160 --> 00:09:03,600
Je ne veux pas te faire regarder ça.

109
00:09:03,630 --> 00:09:08,580
Très intéressant juste de copier et coller, mais nous allons nous concentrer sur le reste de cette grille.

110
00:09:08,580 --> 00:09:21,420
Donc dès maintenant, dès que le médium de la balle va à une image à travers laquelle ce n'est pas ce que nous voulons ce que nous recherchons est deux images à travers à ce point d'arrêt moyen.

111
00:09:21,700 --> 00:09:28,730
Et puis après le point de rupture moyen qui est là nous avons touché petit et nous voulons toujours qu'il reste à 2.

112
00:09:28,750 --> 00:09:39,310
Donc, pour fixer cela dans le nôtre ou il va à un immédiatement au grand point de rupture ou le point d'arrêt moyen et puis petits et extra petits séjours à 1.

113
00:09:39,460 --> 00:09:53,970
Nous pouvons revenir ici et nous allons changer tous ceux que vous savez sélectionnez et appuyez sur la commande d sélectionnez toutes les instances de les appeler grand pour et puis je vais frapper la flèche gauche ou droite pour déplacer le curseur.

114
00:09:53,990 --> 00:09:55,840
Maintenant, je peux les éditer tous à la fois.

115
00:09:56,020 --> 00:10:04,350
Et ce que je veux faire, je pourrais ajouter dans la colonne moyenne six parce que nous voulons Perrow et cela fonctionnera.

116
00:10:04,410 --> 00:10:11,920
Et si je retourne et rafraîchir vous verrez qu'ils restent à 3 par rangée et puis j'ai frappé le point de rupture médian et ils vont à 2.

117
00:10:12,280 --> 00:10:20,820
Mais alors je frappe petit et il saute à un et à la nôtre quand nous frappons petit la solution reste à 2.

118
00:10:20,830 --> 00:10:33,390
Donc, pour fixer que plutôt que de faire la colonne moyenne six, nous pouvons faire colonne petit 6 et revenir à nouveau rafraîchir cette version.

119
00:10:33,730 --> 00:10:34,680
Nous avons frappé moyen.

120
00:10:34,680 --> 00:10:35,590
Nous allons à deux.

121
00:10:35,800 --> 00:10:36,750
Nous avons frappé petit.

122
00:10:36,760 --> 00:10:43,530
Nous restons à 2 et puis nous allons à extra petit et nous sommes à 1 1 image par rangée.

123
00:10:43,810 --> 00:10:44,620
Parfait.

124
00:10:44,910 --> 00:10:49,060
C'est donc tout ce que nous devons faire pour la grille et nous avons terminé avec la plupart des fonctionnalités ici.

125
00:10:49,170 --> 00:10:51,050
Très très rapide pour que cela fonctionne.

126
00:10:51,220 --> 00:10:55,570
Ce que nous voulons nous concentrer sur maintenant sont quelques-unes des couleurs et aussi les icônes.

127
00:10:55,870 --> 00:10:58,890
Je vais commencer par vous montrer comment nous ajoutons des icônes à l'aide de bootstrap.

128
00:10:59,080 --> 00:11:07,670
Donc sur get bootstrap si vous allez aux composants il ya ces icônes de glyphes en haut et il ya un tas d'entre eux à choisir.

129
00:11:08,320 --> 00:11:11,840
Et nous allons en trouver un que nous voulons utiliser et celui que j'utilise.

130
00:11:12,100 --> 00:11:14,710
Je ferai juste une recherche pour je pense que c'est la caméra.

131
00:11:14,710 --> 00:11:17,920
Donc il ya cette caméra ici et je n'utilise pas cette caméra.

132
00:11:18,040 --> 00:11:19,310
C'est un peu différent.

133
00:11:19,330 --> 00:11:23,080
Celui que j'utilise est une caméra plus rétro et je vais vous montrer comment ajouter cela.

134
00:11:23,080 --> 00:11:28,680
Ce n'est en fait pas partie de bootstrap Mais commençons par la caméra régulière qui vient avec bootstrap.

135
00:11:28,810 --> 00:11:32,040
Alors nous écrivons Clifford Kahn et ensuite aller avec la caméra de tableau de bord conn.

136
00:11:32,160 --> 00:11:43,450
Et si vous faites défiler vers le bas, vous pouvez voir où ils expliquent comment l'utiliser pour créer un span où une classe est égale à Con et puis glyphe, il peut faire chuter le nom de l'icône de glyphe.

137
00:11:43,480 --> 00:11:58,200
Nous allons commencer par le faire à l'intérieur du H-1, il suffit de le mettre au tout début du H-1 et nous voulons un rapide A-Kon tableau de bord et nous allons enregistrer et rafraîchir.

138
00:11:58,600 --> 00:12:01,060
Et juste comme ça, vous pouvez avoir une caméra là-dedans.

139
00:12:01,410 --> 00:12:07,350
Et si nous voulons de l'espace, nous pouvons le faire à travers le rembourrage ou nous pouvons simplement ajouter un espace là.

140
00:12:08,260 --> 00:12:16,970
Et nous obtenons un espace, nous pouvons faire exactement la même chose pour la barre de navigation et j'ai utilisé celui qui s'appelle Photo aller double vérifier ici.

141
00:12:16,980 --> 00:12:22,780
Vous pouvez faire une recherche sur cette page pour photo photo.

142
00:12:22,890 --> 00:12:24,080
Le voilà.

143
00:12:24,260 --> 00:12:26,890
Il peut aller si il peut tableau tableau de bord.

144
00:12:27,730 --> 00:12:32,890
Donc, nous allons monter à la marque nav bar ici et nous coller dans cette période de nouveau.

145
00:12:33,120 --> 00:12:41,420
Et puis à l'intérieur de la portée de la classe devrait être cliquez sur l'image et nous allons ajouter un espace là aussi.

146
00:12:41,460 --> 00:12:45,880
Nous retournons à notre site sont frais et nous avons maintenant une petite photo là-bas.

147
00:12:46,360 --> 00:12:47,930
Et nous avons aussi la caméra.

148
00:12:48,150 --> 00:12:54,740
Ensuite, nous allons aborder le bar de navigation et nous allons commencer en le fixant au sommet pour que vous puissiez le voir maintenant.

149
00:12:54,790 --> 00:12:56,470
Cette sieste nous défile.

150
00:12:56,950 --> 00:12:59,210
Mais sur la solution il reste là.

151
00:12:59,640 --> 00:13:04,460
Et pour ce faire, c'est une seule classe que nous devons ajouter à notre barre NAV.

152
00:13:04,480 --> 00:13:11,800
Donc, ici, nous voulons que le tableau de bord de nav soit fixé au tableau de bord et que vous l'épargniez.

153
00:13:12,120 --> 00:13:16,570
Et si nous sommes frais, vous verrez qu'il est fixé au sommet.

154
00:13:16,570 --> 00:13:25,800
Il ya un petit problème qui est que notre contenu est maintenant derrière elle un peu et nous voulons qu'il ait cet espacement normal au-dessus du Jumbotron.

155
00:13:25,810 --> 00:13:32,770
Ce que nous devons faire est d'ajouter un peu de rembourrage à notre corps et il se trouve être de 70 pixels.

156
00:13:32,770 --> 00:13:39,320
Les documents bootstrap vous diront que si vous oubliez jamais 70 pixels de rembourrage est ce que nous voulons, c'est la largeur de la maintenant quatre.

157
00:13:39,490 --> 00:14:01,850
Donc, nous allons ici et nous allons créer une feuille de style maintenant et je vais appeler la galerie Dotsie SS, puis à l'intérieur de sélectionner le rembourrage du corps top 70 pixels et puis nous avons besoin d'ajouter que dans lié à cette feuille de style qui est Gallery CS S.

158
00:14:01,920 --> 00:14:03,760
Maintenant, assurez-vous que cela fonctionne.

159
00:14:03,790 --> 00:14:04,330
Voilà.