1
00:00:00,330 --> 00:00:05,940
Bienvenue dans cette leçon, nous allons utiliser bootstrap pour créer une page de destination pour un démarrage fictif.

2
00:00:06,070 --> 00:00:08,760
Notre démarrage est appelé Match parfait.

3
00:00:08,760 --> 00:00:09,210
Très drôle.

4
00:00:09,210 --> 00:00:22,430
Je sais que c'est une application de rencontre féline humaine et je vais laisser à vous d'interpréter ce que la datation féline humaine est-il peut-être relativement inoffensif, il pourrait juste être correspondant Sheldrick chats avec des humains isolés pourrait être autre chose.

5
00:00:22,440 --> 00:00:23,260
Je ne sais pas.

6
00:00:23,550 --> 00:00:27,690
Commençons par faire une visite rapide du site et lui écrire.

7
00:00:27,690 --> 00:00:29,920
Je veux juste signaler quelques fonctionnalités.

8
00:00:29,970 --> 00:00:31,250
Il n'y a pas grand-chose ici.

9
00:00:31,290 --> 00:00:33,780
Nous n'avons pas réellement cette connexion, il ne fait rien encore.

10
00:00:33,840 --> 00:00:37,770
Donc c'est vraiment juste HD mounseers s mais c'est tout ce que nous avons couvert jusqu'à présent.

11
00:00:38,100 --> 00:00:42,510
Donc, nous avons assez notre maison match parfait sur les longueurs incontact.

12
00:00:42,510 --> 00:00:51,030
Ils ne vont pas vraiment n'importe où inscrivez-vous et connectez-vous sur le côté droit deux petites icônes là nous obtenons son hamburger.

13
00:00:51,180 --> 00:00:52,320
Je peux cliquer dessus.

14
00:00:52,380 --> 00:00:55,980
Tous ces liens sont maintenant dans ce hamburger.

15
00:00:55,980 --> 00:01:01,650
Ensuite, nous avons une grande image de fond qui reste centrée et il couvre tout l'arrière-plan.

16
00:01:01,740 --> 00:01:09,750
Donc, dans le milieu, nous avons le nom de notre démarrage match parfait avec à la nôtre et puis nous avons notre légende Le seul aliment humain sur l'application de rencontres.

17
00:01:09,750 --> 00:01:15,420
Et puis nous avons un peu H R règle horizontale ici, puis un bouton pour commencer avec une icône.

18
00:01:15,810 --> 00:01:26,960
Et comme je rétrécit ce tout reste au milieu et il monte aussi un peu afin que nous n'avons pas une sorte de disposition maladroite sur votre appareil mobile où le texte commence à mi-chemin de la page.

19
00:01:27,060 --> 00:01:29,690
Donc, nous le déplacer un peu et il reste centré.

20
00:01:29,700 --> 00:01:33,900
Ces mises en page vraiment facile à faire et bootstrap, mais il est relativement efficace pour la page de destination.

21
00:01:33,900 --> 00:01:38,180
Tout ce que nous avons est une seule colonne qui prend toute la largeur.

22
00:01:38,220 --> 00:01:40,850
Donc, cette colonne va 12 unités à travers.

23
00:01:40,860 --> 00:01:48,510
Nous ne le divisons pas en sections sur une seule colonne de 12 unités, puis nous concentrons tout ce qui se trouve à l'intérieur de cette colonne.

24
00:01:48,540 --> 00:01:49,860
Alors, commençons.

25
00:01:49,860 --> 00:01:52,350
La première chose que nous devons faire est de créer un fichier.

26
00:01:52,440 --> 00:01:54,640
J'ai un index appelé à DML.

27
00:01:54,720 --> 00:02:10,410
J'ajouterai ceci dans ma correspondance normale régulière, puis commencer par ajouter Bootstrap et j'utiliserai un CDN Bitstrips CDN.

28
00:02:11,490 --> 00:02:14,350
Faisons le SS et Javascript ici.

29
00:02:14,400 --> 00:02:16,860
Nous aurons besoin de ce javascript pour la barre des tâches.

30
00:02:17,220 --> 00:02:19,130
Nous devons donc lier l'étiquette.

31
00:02:19,710 --> 00:02:22,770
Ensuite, nous obtenons le javascript.

32
00:02:22,770 --> 00:02:24,030
Bien reçu.

33
00:02:24,090 --> 00:02:32,030
Mettez cela en bas, qui est une balise de script, puis nous avons mis source égale à ce que vous êtes.

34
00:02:32,520 --> 00:02:43,390
Maintenant, si nous ouvrons cette OK ouvrir la console, nous avons un petit problème qui est que nous avons besoin de requête Jay ainsi pour le bootstrap javascript.

35
00:02:43,450 --> 00:02:46,290
Rappelez-vous de retour de la leçon nav bar, nous devons exiger J.

36
00:02:46,290 --> 00:02:46,750
Querrey.

37
00:02:46,860 --> 00:02:52,500
Nous aurons donc un CDN pour cela.

38
00:02:53,730 --> 00:02:55,290
Nous allons faire la version modifiée.

39
00:02:55,290 --> 00:02:57,500
Copiez cette URL.

40
00:02:57,600 --> 00:03:04,110
Et finalement nous revenons ici et nous devons le faire avant le lié à bootstrap au javascript.

41
00:03:04,440 --> 00:03:09,360
Sinon, il ne sera toujours pas au courant de votre requête, donc il doit charger la requête d'abord.

42
00:03:09,360 --> 00:03:10,650
Maintenant, essayons encore.

43
00:03:10,870 --> 00:03:11,960
Rafraîchissement d'incendie.

44
00:03:12,520 --> 00:03:17,490
OK nous ne voyons rien qui est un bon signe parce que nous ne voyons pas d'erreurs.

45
00:03:18,570 --> 00:03:20,850
Commençons par le texte au milieu.

46
00:03:20,850 --> 00:03:22,480
Tout ce contenu ici.

47
00:03:22,620 --> 00:03:35,870
Donc, nous devons créer un conteneur, puis à l'intérieur du conteneur, nous avons besoin d'une ligne à div classe ECOs conteneur et puis à l'intérieur de là, nous avons un autre div, nous avons toujours besoin de cette ligne.

48
00:03:35,930 --> 00:03:47,220
Chaque fois que nous utilisons le système de grille et puis notre div qui va être la classe égale à la colonne grand tiret 12.

49
00:03:48,240 --> 00:03:50,750
Et cela va s'étendre tout le chemin à travers ce conteneur.

50
00:03:51,210 --> 00:03:59,330
Et puis à l'intérieur si ils vont avoir un H1 qui va juste dire match parfait et sauver.

51
00:03:59,520 --> 00:04:02,280
Et laissons-le à ce rafraîchissement.

52
00:04:02,580 --> 00:04:06,660
Et ce n'est pas vraiment ce que nous voulons encore et c'est parce qu'il ya quelques choses que nous devons faire.

53
00:04:06,660 --> 00:04:09,010
La première est que nous devons centrer tout dans cette colonne.

54
00:04:09,300 --> 00:04:19,190
Donc, si nous examinons ce dont nous traitons ici, vous pouvez constater que le H1 va tout le long et nous avons juste besoin de le centrer à l'intérieur de cela.

55
00:04:19,410 --> 00:04:21,680
Et la seconde est que nous devons le pousser un peu.

56
00:04:21,720 --> 00:04:26,250
Nous avons besoin d'ajouter un peu de rembourrage ou de marge afin que ne va pas droit au haut de notre page.

57
00:04:26,250 --> 00:04:28,480
Commençons par ajouter dans le reste du contenu.

58
00:04:28,830 --> 00:04:47,730
Donc, nous avons aussi la seule application de rencontre féline humaine et qui sera juste un H 3 et nous pourrions vraiment jouer avec ce pourrait être n'importe quel élément que nous voulons, mais je vais faire un H-3 le seul humain tableau de bord chat feline.

59
00:04:48,090 --> 00:04:59,180
Et puis nous pouvons ajouter dans cette règle horizontale qui ne ressemblera pas beaucoup, mais nous allons le style après le fait et ensuite nous allons également ajouter un bouton dans la classe sur ce bouton.

60
00:04:59,240 --> 00:05:01,680
Nous jetons un coup d'oeil.

61
00:05:02,100 --> 00:05:06,010
C'est un bouton bootstrap par défaut et c'est un bouton grand.

62
00:05:06,330 --> 00:05:07,830
Retournons.

63
00:05:07,830 --> 00:05:29,320
Donc, nous avons besoin de PTEN, puis la couleur par défaut, puis la taille entre LG pour les grandes et ici nous allons simplement ajouter le texte qui est de commencer et économiser, voyons ce que nous finissons avec.

64
00:05:29,340 --> 00:05:30,330
D'accord.

65
00:05:30,330 --> 00:05:34,270
Donc, nous avons maintenant notre contenu maintenant, mais Centre à l'intérieur de la grille.

66
00:05:34,470 --> 00:05:36,920
Et puis nous allons nous concentrer sur le rembourrage et de le déplacer vers le bas.

67
00:05:36,930 --> 00:05:44,720
Mais pour commencer avec le centre à l'intérieur de cette grille et pour rendre plus facile, je vais le regrouper tout à l'intérieur d'une div afin que nous n'avons pas à centrer chaque chose individuellement.

68
00:05:44,760 --> 00:05:51,430
Nous devons centrer le H-1 et puis les trois et puis le bouton plutôt que nous pouvons grouper dans un div et centre juste ce div avec une ligne.

69
00:05:51,750 --> 00:06:01,490
Faisons un div et je vais lui donner un identifiant de Cantet et puis nous mettrons tout à l'intérieur de là.

70
00:06:01,560 --> 00:06:08,340
Ainsi, le H-1 de l'âge 3 H.R. et le bouton sera correctement indent et enregistrer.

71
00:06:08,580 --> 00:06:14,270
Donc rien ne devrait être différent si je rafraîchir la page avant que nous faisons que nous allons ajouter dans notre feuille de style.

72
00:06:14,340 --> 00:06:18,840
J'ai donc ajouté une balise de lien et j'appellerai mon application de feuille de style.

73
00:06:18,920 --> 00:06:20,920
SS Il n'existe pas encore.

74
00:06:21,120 --> 00:06:24,220
Donc je dois le faire enregistrer.

75
00:06:24,230 --> 00:06:27,060
Je vois SS dans le même répertoire.

76
00:06:27,420 --> 00:06:31,550
Et commençons par quelque chose de simple comme tous les h sont violet.

77
00:06:31,680 --> 00:06:35,030
Juste pour vous assurer que ça fonctionne bien.

78
00:06:35,400 --> 00:06:37,060
Revenons à rafraîchir.

79
00:06:37,390 --> 00:06:39,100
Andrew obtient un violet H-1.

80
00:06:39,180 --> 00:06:39,670
Génial.

81
00:06:39,870 --> 00:06:44,970
Alors maintenant, nous allons sélectionner que Dave nous avons ajouté avec l'idée de contenu et de le centrer.

82
00:06:45,030 --> 00:06:53,620
Donc, se débarrasser de cela et nous avons besoin d'un contenu d'ID et en omettant de faire est d'aligner le texte Centre.

83
00:06:54,210 --> 00:06:56,430
Retournons.

84
00:06:56,430 --> 00:06:57,110
Voilà.

85
00:06:57,120 --> 00:06:59,490
Donc, les choses sont centrées à l'heure actuelle.

86
00:06:59,490 --> 00:07:07,440
Ensuite, nous allons pousser ce bas un peu 25 pour cent en bas de la page pour être exact avec rembourrage égal à 25 pour cent.

87
00:07:07,470 --> 00:07:15,270
Donc, ici, nous ferons rembourrage top 25 pour cent.

88
00:07:16,270 --> 00:07:22,870
Et plutôt que de lui donner un dur nombre de pixels si nous le gardons comme un pourcentage, il est un peu plus réactif.

89
00:07:22,890 --> 00:07:24,790
Donc c'est juste au centre.

90
00:07:25,230 --> 00:07:29,940
Et puis 25 pour cent des changements que nous redimensionner l'écran.

91
00:07:29,940 --> 00:07:30,540
Génial.

92
00:07:30,540 --> 00:07:32,480
Maintenant, nous allons ajouter dans l'image d'arrière-plan.

93
00:07:32,670 --> 00:07:43,280
Donc l'image que j'utilise est chat adorable et l'interaction humaine qui se passe ici est à partir de ce site Web Splash que j'ai présenté dans la dernière vidéo où nous avons créé la grille d'image bootstrap.

94
00:07:43,680 --> 00:07:48,300
Et ils ont toutes sortes de très bonnes images de haute qualité que vous pouvez utiliser sans aucun problème.

95
00:07:48,480 --> 00:07:54,110
Et celui que j'utilise est juste ici je recherche des liens de chat dans cette description aussi bien.

96
00:07:54,450 --> 00:08:00,230
Voici le vous Aro de cette image juste clic droit copiez l'image vous êtes l.

97
00:08:00,360 --> 00:08:06,310
Maintenant, nous allons revenir en arrière et je vais l'ajouter au corps comme une image de fond.

98
00:08:06,800 --> 00:08:13,830
Alors d'arrière-plan et puis lui donner une URL qui est ce géant Vous êtes là.

99
00:08:13,830 --> 00:08:26,010
Et si nous laissons à ce que c'est la forme à ce niveau ou rafraîchir, nous obtenons une image de fond gigantesque et tout ce que nous pouvons dire, c'est que c'est une sorte de démarrage pour les ongles.

100
00:08:26,010 --> 00:08:36,060
Donc, nous devons redimensionner et de faire que nous utilisons la taille de fond et de changer que d'être couvert à nouveau.

101
00:08:36,060 --> 00:08:39,230
Encore une fois, nous nous rapprochons.

102
00:08:39,270 --> 00:08:44,950
Cela rendra l'image aussi petite que possible tout en couvrant toute la largeur et la hauteur de l'écran.

103
00:08:45,240 --> 00:08:52,240
Donc, il ne changera pas le ratio d'aspect, il ne sera pas fausser l'image d'aucune façon, mais il s'étendra dans les deux directions autant qu'il le faut.

104
00:08:52,350 --> 00:08:57,060
Mais le montant minimum dont il a besoin pour s'adapter sur notre écran et il n'est toujours pas parfait.

105
00:08:57,210 --> 00:09:01,900
Et ce que nous voulons faire n'est pas changer la taille de celui-ci mais changer la position.

106
00:09:02,190 --> 00:09:10,280
Nous allons le centrer centre de position d'arrière-plan, mais sauver que nous sommes plus proches.

107
00:09:10,290 --> 00:09:13,320
Mais ce n'est toujours pas un match parfait en ce qui concerne l'image.

108
00:09:13,800 --> 00:09:15,510
Et ces changements viendront plus tard.

109
00:09:15,510 --> 00:09:24,650
Pour l'instant, je veux me concentrer sur l'ajout dans la barre de navigation et de le faire quand vous allez à la doce Boucek et aller à des composants et je l'ai mentionné avant.

110
00:09:25,080 --> 00:09:27,690
Je le fais toujours si je suis l'ajout d'un bootbar barre de navigation.

111
00:09:27,810 --> 00:09:29,850
C'est juste trop de choses à retenir autrement.

112
00:09:30,230 --> 00:09:32,070
Et je copie juste ceci ici.

113
00:09:32,370 --> 00:09:39,630
Prendra l'ensemble du nav pour commencer à revenir à notre application ici et juste le mettre à droite en haut.

114
00:09:39,630 --> 00:09:46,110
Ce n'est certainement pas le NAF que nous voulons mais il contient les morceaux que nous voulons rafraîchir.

115
00:09:46,380 --> 00:09:47,380
C'est assez proche.

116
00:09:47,610 --> 00:09:49,360
Il y a donc quelques changements que nous voulons apporter.

117
00:09:49,470 --> 00:09:58,570
Le premier et le plus simple est que notre contenu sur la solution est dans un conteneur de sorte qu'il ne va pas tout le chemin vers les bords comme il le fait ici.

118
00:09:59,100 --> 00:10:14,250
Donc nous pouvons revenir en arrière et insérer ou sommes-nous simplement changer cela pour être un conteneur classe div et si nous revenons maintenant, vous pouvez voir que parce que nous avons ajouté dans ce conteneur, nous avons maintenant un certain espace comme nous le faisons ici sur la solution.

119
00:10:14,250 --> 00:10:16,920
Maintenant, nous allons travailler sur le contenu réel de la Nev ..

120
00:10:17,070 --> 00:10:33,950
Donc, la chose la plus facile est de changer la marque qui, à l'heure actuelle, vient de dire Brand de retour ici cette classe de ligne égale neth bar marque et nous allons le changer par match fixe et enregistrer.

121
00:10:33,940 --> 00:10:34,990
Essaye le.

122
00:10:35,490 --> 00:10:37,500
OK bien.

123
00:10:37,500 --> 00:10:39,050
Maintenant, nous allons nous débarrasser de cette forme.

124
00:10:39,060 --> 00:10:41,150
Nous n'avons pas besoin de ça du tout.

125
00:10:41,310 --> 00:10:45,030
Donc, notre formulaire commence ici.

126
00:10:45,030 --> 00:10:50,490
Débarrassez-vous de cette chose entière rafraîchir.

127
00:10:50,860 --> 00:10:52,560
Débarrassons-nous aussi du menu déroulant.

128
00:10:52,560 --> 00:10:54,570
Vous n'en avez pas besoin.

129
00:10:54,570 --> 00:10:56,680
Donc ça commence juste ici.

130
00:10:56,680 --> 00:11:02,810
Ce mensonge qui finit là est fraîche encore.

131
00:11:03,120 --> 00:11:04,540
Maintenant, nous avons un seul lien.

132
00:11:04,710 --> 00:11:10,910
Donc, nous allons commencer avec ces deux liens qui sont censés être de s'inscrire et de le consigner.

133
00:11:11,360 --> 00:11:18,110
C'est ce lien ici, donc nous pouvons changer celui-ci pour être inscrivez-vous et ensuite le dupliquer.

134
00:11:18,390 --> 00:11:21,450
Juste un allié avec une balise d'ancrage à l'intérieur.

135
00:11:21,450 --> 00:11:23,840
Et celui-ci sera connecté.

136
00:11:24,750 --> 00:11:26,640
Regardons ça.

137
00:11:26,700 --> 00:11:27,260
Génial.

138
00:11:27,270 --> 00:11:29,100
Donc, les icônes viendront à la fin.

139
00:11:29,100 --> 00:11:30,380
Nous avons les deux liens.

140
00:11:30,450 --> 00:11:32,320
Nous avons besoin de trois liens ici.

141
00:11:32,340 --> 00:11:35,500
Nous en avons déjà deux et nous nous débarrasserons de ce menu déroulant.

142
00:11:35,610 --> 00:11:38,560
Donc, nous avons besoin de la maison au contact.

143
00:11:38,600 --> 00:11:41,490
Donc, trouver ce menu déroulant qui est ici.

144
00:11:41,490 --> 00:11:43,100
La classe est égale à la liste déroulante.

145
00:11:43,140 --> 00:11:49,070
Débarrassons-nous de lui et sommes maintenant simplifié beaucoup d'Akbar.

146
00:11:49,080 --> 00:11:50,370
Maintenant nous avons deux longueurs différentes.

147
00:11:50,390 --> 00:11:53,760
Nous allons effectivement nous débarrasser des deux et le faire à partir de zéro.

148
00:11:53,760 --> 00:12:00,120
Donc, nous allons ajouter dans un allié avec une balise d'ancrage, puis nous le ferons trois fois.

149
00:12:00,120 --> 00:12:02,260
Ce premier devrait dire à la maison.

150
00:12:02,550 --> 00:12:04,100
Le prochain est environ.

151
00:12:04,320 --> 00:12:06,530
Et le dernier est le contact.

152
00:12:07,020 --> 00:12:08,760
Regardons ça.

153
00:12:08,760 --> 00:12:11,050
Là nous allons sont trois longueurs.

154
00:12:11,070 --> 00:12:11,970
Une chose mineure.

155
00:12:11,970 --> 00:12:16,830
Home est censé être actif et un bootstrap qui est vraiment facile.

156
00:12:16,980 --> 00:12:29,390
Tout ce que nous avons à faire est d'ajouter la classe égale active à l'allié pas la balise d'ancrage, mais l'allié parent et maintenant nous nous retrouvons avec la maison étant le lien actif.

157
00:12:29,400 --> 00:12:29,960
Génial.

158
00:12:30,200 --> 00:12:37,940
OK, c'est notre nav bar et si nous redimensionner, vous verrez que nous avons déjà ce hamburger fonctionne très bien.

159
00:12:38,520 --> 00:12:42,420
Nous avons un problème, c'est que notre image de fond est gâchée.

160
00:12:42,420 --> 00:12:45,750
Nous allons couvrir cela dans un petit peu, mais nous avons le hamberger fonctionne bien.

161
00:12:45,750 --> 00:12:47,400
Tout semble bon.

162
00:12:47,430 --> 00:12:53,360
Maintenant, nous allons aborder la police de sorte que la police que j'ai utilisé ici est Ledo L.A ..

163
00:12:53,430 --> 00:12:57,900
C'est à partir de polices Google, donc je vais aller à Google polices et chercher Ledo.

164
00:12:58,010 --> 00:13:02,720
LA T-O chaque aller à la collecte.

165
00:13:03,180 --> 00:13:06,820
Utilisons-le s'il devient normal et audacieux.

166
00:13:06,840 --> 00:13:10,050
Nous voulons aussi que notre H-1 soit audacieux.

167
00:13:10,590 --> 00:13:11,040
D'accord.

168
00:13:11,070 --> 00:13:16,290
Et puis nous ajouterons ce lien à droite dans sa demande.

169
00:13:16,290 --> 00:13:24,090
Up top ici enregistrer maintenant entrer dans les applications L'évaluation que nous allons appliquer cette police à tout.

170
00:13:24,270 --> 00:13:33,970
Donc je vais choisir à l'intérieur de la famille de polices de corps est Ledo et nous allons nous assurer qu'il est le chargement correctement.

171
00:13:34,050 --> 00:13:36,780
Voir ce que nous avons rafraîchir.

172
00:13:37,520 --> 00:13:43,990
Et notre front change, c'est difficile à voir parce que le texte est sombre mais changé, vous pouvez également le voir sur le NFR ici.

173
00:13:44,160 --> 00:13:44,790
C'est changé.

174
00:13:44,790 --> 00:13:47,510
Il correspond à ce que nous avons dans cette solution.