1
00:00:00,250 --> 00:00:03,150
Cette vidéo, nous allons continuer à styliser le camp.

2
00:00:03,360 --> 00:00:08,590
Nous allons ajouter une barre de navigation à chaque page et cette barre de navigation sera assez vide pour l'instant.

3
00:00:08,700 --> 00:00:14,780
Mais finalement, il aura des boutons comme se connecter et se déconnecter enregistrer toutes ces fonctionnalités.

4
00:00:15,030 --> 00:00:23,510
Mais jusque-là, nous allons simplement mettre un texte d'espace réservé là-bas et nous allons également le style de la forme nouveau terrain de camping parce que maintenant il est en assez rude forme.

5
00:00:23,580 --> 00:00:28,860
Commençons donc le serveur et jetez simplement un coup d'oeil à ce que nous avons.

6
00:00:28,890 --> 00:00:31,150
Voici donc notre page de destination.

7
00:00:31,680 --> 00:00:36,250
Voici notre point de vue tous les camp changer la liste des terrains de camping.

8
00:00:36,290 --> 00:00:38,180
Ça a l'air bien.

9
00:00:38,430 --> 00:00:40,490
Nous voulons une barre de navigation ici.

10
00:00:40,890 --> 00:00:43,370
Même chose sur ajouter un nouveau terrain de camping.

11
00:00:43,740 --> 00:00:51,050
Nous allons centrer la forme et nous allons empiler ces deux entrées les unes sur les autres plutôt que de les faire côte à côte.

12
00:00:51,360 --> 00:00:56,400
Mais nous allons commencer avec la barre de navigation et nous allons simplement travailler sur le modèle de terrain de camping.

13
00:00:56,610 --> 00:01:00,990
Nous allons donc revenir ici et ouvrir le modèle de terrains de camping pour commencer.

14
00:01:00,990 --> 00:01:22,910
Je vais ouvrir la boîte bootstrap et je vais passer à des composants et puis nav bar et je me retrouve sur cette section tout le temps parce que même si bootstrap rend vraiment facile d'ajouter la barre de navigation, vous pouvez toujours voir C'est tout à fait un peu de balisage et la nôtre ne sera pas ce long définitivement au moins de ne pas commencer quand nous n'avons pas tous les boutons dans les menus déroulants.

15
00:01:22,950 --> 00:01:28,130
Nous allons commencer agréable et simple, mais même alors il ya encore beaucoup de classes dont nous devons nous souvenir.

16
00:01:28,140 --> 00:01:35,040
Donc, il n'y a certainement aucune honte en tirant le bootstrap Darcs tout comme n'importe quoi dans cette classe, vous ne devriez pas avoir honte de regarder les choses.

17
00:01:35,100 --> 00:01:42,860
Mais en particulier bootstrap il peut parfois être juste un désordre de ces classes et éléments et il n'y a aucun moyen de le faire sans regarder les docs.

18
00:01:42,870 --> 00:01:55,180
OK, nous allons revenir en arrière et je vais faire une place au sommet de mon terrain de camping et nous allons commencer par définir une Nav. Qui à nouveau comme l'en-tête.

19
00:01:55,320 --> 00:01:59,450
On pourrait juste faire une div mais une Nav. Est un peu plus significatif.

20
00:01:59,460 --> 00:02:00,870
C'est plus sémantique.

21
00:02:01,050 --> 00:02:09,580
Donc, je vais faire un nav avec la barre de navigation de classe, puis nav barre de défilement par défaut.

22
00:02:09,600 --> 00:02:16,240
Il existe différents types et de différentes couleurs ou nous pouvons avoir une barre de navigation inversée, mais nous allons aller avec le par défaut.

23
00:02:16,410 --> 00:02:54,090
Et puis à l'intérieur vont ajouter un div avec une classe égale à fluide de conteneur et qui va juste nous faire un bon rembourrage et un peu d'espace là-bas et puis nous allons ajouter dans un autre div avec la classe égale à l'en-tête de barre de nav, puis à l'intérieur de La classe égale que notre en-tête, nous allons ajouter une balise d'ancrage avec la classe égale à nav tableau de bord pour une fin comme ça.

24
00:02:54,330 --> 00:03:04,850
Et puis nous pouvons mettre le lien pour juste être barre oblique et puis nous fermerons cela et ajouterons dans le camp de yelper juste comme cela.

25
00:03:04,980 --> 00:03:07,750
Et voyons ce que nous obtenons avec ce simple balisage.

26
00:03:07,920 --> 00:03:16,730
Donc, nous avons notre NAV avec un conteneur à l'intérieur avec l'en-tête de barre de nav et l'en-tête de barre de nav a seulement un article qui est la marque de barre de neph.

27
00:03:17,010 --> 00:03:18,290
Rappelons.

28
00:03:18,780 --> 00:03:27,710
OK, donc nous avons la barre de navigation et puis nous avons notre marque ici et c'est un lien que lorsque nous cliquons sur elle nous ramènera à la page de destination horrible.

29
00:03:28,200 --> 00:03:34,320
OK alors ajoutons quelques espaces réservés ici pour vous connecter et vous inscrire.

30
00:03:34,320 --> 00:03:40,870
Ils ne fonctionneront pas ou ils ne feront rien, mais à nous regardons bien alors nous allons faire que maintenant passer à notre camp.

31
00:03:40,890 --> 00:03:47,710
E.J. Comme gabarit alors à l'intérieur de la barre de navigation et du conteneur mais pas à l'intérieur du N.F. Bar Hetter.

32
00:03:47,970 --> 00:03:56,220
Nous allons ajouter dans un autre div et ce div aura une classe d'effondrement qui va voir ce que cela fait.

33
00:03:56,220 --> 00:04:01,810
Et juste un moment, puis Neph bar Dasch s'effondrer comme ça.

34
00:04:01,890 --> 00:04:24,520
Et puis à l'intérieur, nous allons ajouter un UL et ce UL aura une classe de navigation nav nav nav, puis aussi nav barre droite tiret qui va le déplacer vers le côté droit et puis à l'intérieur de celui que nous allons Ont trois liens pour le moment et chacun sera un allié.

35
00:04:25,170 --> 00:04:32,820
Et puis à l'intérieur de cet allié aura une balise d'ancrage et donnera le premier log in.

36
00:04:32,850 --> 00:04:42,940
Et pour l'instant, la référence H sera simplement réglée sur notre itinéraire car nous n'avons pas encore de connexion et nous ferons la même chose pour vous inscrire.

37
00:04:42,980 --> 00:04:49,540
Faisons Sign-Up et puis aussi déconnecter juste comme ça.

38
00:04:49,910 --> 00:04:50,680
D'ACCORD.

39
00:04:51,210 --> 00:04:52,580
Alors voyons ce que cela ressemble.

40
00:04:52,590 --> 00:05:02,090
Avant de parler de ce que l'effondrement fait si nous rafraîchissons et il ne semble pas bon, nous avons raté une classe mineure ici à l'UL.

41
00:05:02,290 --> 00:05:06,470
On dirait que nous n'avons pas ajouté maintenant, donc nous avons juste ajouté barre de navigation.

42
00:05:06,470 --> 00:05:20,430
Maintenant, je n'ai jamais eu raison, mais nous n'avons pas ajouté dans nav lui-même donc nous allons économiser maintenant rafraîchir et nous nous retrouvons avec les trois liens sur le côté droit de la NAV et aussi quand je change la taille ici.

43
00:05:20,430 --> 00:05:25,130
Remarquez que là même, il s'est effondré.

44
00:05:25,680 --> 00:05:29,300
Et finalement ce que nous aurons, c'est une petite icône de hamburger.

45
00:05:29,340 --> 00:05:32,610
Il ressemble à celui où vous cliquez et son menu.

46
00:05:33,050 --> 00:05:36,180
Pour l'instant nous les cachons quand nous arrivons à cette taille.

47
00:05:36,450 --> 00:05:36,690
D'ACCORD.

48
00:05:36,690 --> 00:05:42,240
Donc, c'est tout ce que nous devons faire pour la barre de navigation, sauf pour le fait que c'est seulement sur cette page.

49
00:05:42,240 --> 00:05:45,390
Nous allons maintenant l'ajouter à toutes les pages.

50
00:05:45,390 --> 00:05:50,030
Donc copions-le ou le couper et nous allons le déplacer à l'en-tête.

51
00:05:50,460 --> 00:05:52,400
Donc passer à la tête ou partielle.

52
00:05:52,680 --> 00:05:53,790
Je vais ouvrir ça.

53
00:05:53,790 --> 00:06:00,130
En utilisant la ligne de commande C9 vues slash Parashall slash header Ijaw Oui.

54
00:06:00,570 --> 00:06:03,840
Et puis, juste au sommet du corps, nous ajouterons cela.

55
00:06:04,320 --> 00:06:06,080
Let's indent ce correctement.

56
00:06:06,570 --> 00:06:09,230
OK, nous y allons.

57
00:06:09,900 --> 00:06:20,550
Et nous avons notre barre de navigation sur l'en-tête de sorte que n'importe quel dossier que nous incluons l'en-tête en partie aura maintenant la barre de navigation, mais démarrer le serveur à nouveau.

58
00:06:20,850 --> 00:06:25,790
Donc, il est encore ici si nous ajoutons un nouveau terrain de camping, nous obtenons également ce bar.

59
00:06:26,160 --> 00:06:31,270
Et si nous allons à la page d'accueil, nous avons aussi la barre suffisante.

60
00:06:31,530 --> 00:06:32,110
Génial.

61
00:06:32,130 --> 00:06:36,950
Maintenant, passons à rendre ce formulaire un peu mieux.

62
00:06:36,990 --> 00:06:40,840
Donc, comme je l'ai mentionné plus tôt, il ya deux grandes choses que je veux faire à ce formulaire.

63
00:06:40,860 --> 00:06:53,270
Le premier est de le centrer au milieu de la page et le second est d'empiler le formulaire verticalement plutôt que d'avoir les trois entrées ou les deux entrées et le bouton aligné horizontalement sur l'écran.

64
00:06:53,370 --> 00:06:56,120
Vous voulez les prendre et empilés les uns sur les autres.

65
00:06:56,370 --> 00:07:00,820
Commençons par ouvrir le fichier correct qui est le nouveau point.

66
00:07:00,960 --> 00:07:01,510
Oui.

67
00:07:01,650 --> 00:07:11,470
Donc, nous allons faire C9 vues slash savait que Ejay nous et puis voici notre formulaire que nous avons jusqu'à présent.

68
00:07:11,970 --> 00:07:20,810
Commençons facile et ajoutez dans quelques-unes des classes d'amorçage aux formulaires ou aux entrées et c'est contrôle de tiret de forme.

69
00:07:21,150 --> 00:07:25,390
Et nous voulons que sur les deux entrées et sur le bouton.

70
00:07:25,500 --> 00:07:33,290
Ajoutons dans la classe Bootstrap PTEN ETN grand juste comme ça.

71
00:07:33,570 --> 00:07:39,090
Et nous faisons aussi entre la faute et voyons ce que cela ressemble.

72
00:07:39,090 --> 00:07:40,920
So node après J.

73
00:07:41,030 --> 00:07:42,830
Oui rafraîchir.

74
00:07:43,300 --> 00:07:51,060
OK alors nous obtenons les commandes bootstrap ici et le bouton bootstrap bien qu'il soit définitivement énorme et nous ne voulons pas cela.

75
00:07:51,210 --> 00:07:54,840
Donc, pour résoudre ce problème, nous pouvons faire quelques choses.

76
00:07:54,840 --> 00:07:57,900
La première est que nous mettrons tout à l'intérieur d'un conteneur.

77
00:07:58,110 --> 00:08:09,960
Donc, nous sommes allés en classe div égale conteneur et je vais simplement déplacer ce vers le bas.

78
00:08:10,930 --> 00:08:13,690
Là, nous allons et indentons ce correctement.

79
00:08:13,950 --> 00:08:16,450
Sauf un changement très mineur.

80
00:08:16,530 --> 00:08:19,850
Nous obtenons un certain espace maintenant, mais c'est encore une forme massive.

81
00:08:20,220 --> 00:08:23,280
Donc la prochaine chose que je vais faire est d'utiliser le système de grille.

82
00:08:23,520 --> 00:08:30,710
Donc nous allons ajouter dans un autre div et celui-ci aura la classe égale à la ligne juste comme ça.

83
00:08:30,720 --> 00:08:33,750
Prenons ceci et copiez-le dans la rangée.

84
00:08:33,780 --> 00:08:36,630
Donc, le formulaire entier va dans une ligne maintenant.

85
00:08:36,810 --> 00:08:39,220
Et c'est aussi le cas.

86
00:08:39,610 --> 00:08:44,930
OK enregistrer rafraîchir pas une grande différence encore.

87
00:08:44,970 --> 00:08:52,880
Et ce que nous allons faire est d'utiliser CSSA et effectivement écrire nos propres styles au-dessus de bootstrap pour centrer ce en lui donnant la marge.

88
00:08:52,880 --> 00:08:56,580
Auto tout cela ici sur le côté gauche et droit.

89
00:08:56,700 --> 00:09:01,110
Et nous voulions seulement prendre environ 30 pour cent de ce conteneur dans lequel il est.

90
00:09:01,110 --> 00:09:10,120
Donc, nous avons fait cela avant de revenir en arrière et je vais enfreindre une des règles, donc ils vous ont dit au début de ne pas faire de styles en ligne.

91
00:09:10,230 --> 00:09:13,930
Et c'est certainement une bonne idée de ne pas faire ça.

92
00:09:14,010 --> 00:09:20,500
Mais pour l'instant jusqu'à ce que nous arrivons à une nouvelle version où nous créons nos propres feuilles de style, je vais le faire en ligne.

93
00:09:20,580 --> 00:09:24,130
Donc je vais faire un nouveau div que nous avons mis la forme à l'intérieur de.

94
00:09:24,270 --> 00:09:26,130
Juste comme ça.

95
00:09:26,760 --> 00:09:34,760
Et puis je vais donner ce style div et je vais commencer par dire avec est de 30 pour cent.

96
00:09:34,980 --> 00:09:39,650
Et laissez-le juste à cela et pas de voir que nous obtenons une forme plus petite.

97
00:09:39,660 --> 00:09:41,820
Maintenant, nous voulons centrer cela.

98
00:09:41,820 --> 00:09:43,080
Nous retournons ici.

99
00:09:43,110 --> 00:09:49,730
Dites marge zéro en haut et en bas et Otto à gauche et à droite.

100
00:09:50,430 --> 00:09:52,790
Maintenant, nous avons la forme centrée.

101
00:09:52,800 --> 00:09:58,750
La prochaine chose que nous allons faire est de faire le bouton de prendre toute la largeur qui est encore assez longue.

102
00:09:58,790 --> 00:10:05,780
Mais ce que nous allons faire est de lui donner bloc DTN qui est un construit dans la façon Bootstrap de le faire un élément de bloc.

103
00:10:05,790 --> 00:10:08,370
Et il prend maintenant la ligne entière.

104
00:10:08,400 --> 00:10:13,530
Ensuite, nous allons donner un certain espace entre tous ces éléments pour le faire.

105
00:10:13,710 --> 00:10:17,300
Nous allons utiliser bootstraps construit dans la classe de groupe de formulaires.

106
00:10:17,370 --> 00:10:25,250
Nous avons donc besoin d'un groupe de tirets de type ECO de classe div et nous allons en avoir besoin pour chaque entrée.

107
00:10:25,470 --> 00:10:41,240
Donc, chaque entrée va à l'intérieur de l'un de ces juste comme ça et puis je vais simplement dupliquer cela et nous aurons un autre ici et cela va aller à l'intérieur de cela.

108
00:10:41,850 --> 00:10:44,080
Et puis on en a encore un pour le bouton.

109
00:10:44,610 --> 00:10:50,860
Nous avons donc trois fois le groupe de formulaires classiques et nous avons également besoin des balises div de fermeture.

110
00:10:50,850 --> 00:10:54,810
Là nous allons oh il y en a un et nous avons besoin de l'autre tag de fermeture div ici.

111
00:10:55,190 --> 00:10:56,060
D'ACCORD.

112
00:10:56,220 --> 00:10:59,140
Donc, ce groupe forme juste grps choses ensemble.

113
00:10:59,160 --> 00:11:01,530
Mais cela nous donne aussi un peu d'espace.

114
00:11:01,530 --> 00:11:03,300
Maintenant, nous avons ce bouton ici.

115
00:11:03,390 --> 00:11:11,010
La prochaine chose que nous pourrions nous concentrer sur est de centrer le texte et de le faire, bien que nous devons faire est de lui donner le texte d'aligner centre.

116
00:11:11,490 --> 00:11:13,680
Et encore une fois, je vais faire cela en ligne.

117
00:11:13,680 --> 00:11:20,020
Pas une bonne idée à long terme au moins, mais c'est une grande utilité pour elle juste de faire quelque chose rapidement.

118
00:11:20,160 --> 00:11:24,290
Alors, le style et nous allons faire aligner le texte au centre.

119
00:11:25,650 --> 00:11:31,470
Enregistrer maintenant que centré dans le milieu.

120
00:11:31,980 --> 00:11:35,030
La prochaine chose que nous devrions faire est de changer la couleur de ce bouton.

121
00:11:35,070 --> 00:11:37,000
Le Blanc ne semble pas très bon.

122
00:11:37,230 --> 00:11:44,730
Faisons-le primitif bouton primaire qui fera bleu sauvegarder rafraîchir.

123
00:11:44,760 --> 00:11:46,430
Oui, ça ressemble beaucoup mieux.

124
00:11:46,800 --> 00:11:51,700
Nous allons également déplacer ce lien le lien retour vers le milieu ainsi.

125
00:11:51,900 --> 00:11:56,850
Donc, nous allons simplement copier cela et tout ce que nous devons faire est de le mettre à l'intérieur de cette marge.

126
00:11:56,880 --> 00:12:07,200
Auto div afin que ce div ici après la forme juste comme ça et sauver.

127
00:12:07,200 --> 00:12:07,810
Voilà.

128
00:12:07,860 --> 00:12:18,750
Nous avons notre retour et la dernière chose que nous devrions vraiment faire est d'ajouter un peu de rembourrage ou de marge de sorte que ce n'est pas tout à fait contre cette H-1 pour le faire.

129
00:12:19,080 --> 00:12:22,460
Nous allons revenir en arrière et nous avons déjà ce div que nous avons sélectionné.

130
00:12:22,530 --> 00:12:28,050
Donc, plutôt que zéro marge, nous pouvons simplement lui donner une marge de 20 pixels pour commencer.

131
00:12:28,050 --> 00:12:29,750
Voyons comment cela ressemble.

132
00:12:30,580 --> 00:12:32,140
Ok qui ressemble un peu mieux.

133
00:12:32,340 --> 00:12:36,070
Faisons quelque chose de plus comme 50.

134
00:12:36,600 --> 00:12:38,280
Et cela pourrait être un peu trop.

135
00:12:38,280 --> 00:12:40,230
Certainement votre propre préférence.

136
00:12:40,350 --> 00:12:43,570
Revenons et faisons 25.

137
00:12:44,700 --> 00:12:44,940
D'accord.

138
00:12:44,940 --> 00:12:46,420
C'est assez bon pour l'instant.

139
00:12:46,440 --> 00:12:58,160
Jouez avec cela autant que vous le souhaitez et vous pouvez rendre ce formulaire les entrées plus larges si vous les aimez ou plus étroit, mais vous pouvez voir qu'il est sensible, il va rester au milieu et se rétrécir un peu.

140
00:12:58,170 --> 00:13:00,420
Dernière chose, nous allons nous débarrasser de cette marque.

141
00:13:00,420 --> 00:13:01,920
Vous n'avez certainement plus besoin de ça.

142
00:13:02,070 --> 00:13:06,570
Dans le bas de notre pied de page, nous allons donc aller dans le fichier de bas de page et je vais tricher.

143
00:13:06,620 --> 00:13:11,530
Il suffit de le faire pour l'instant et nous allons juste se débarrasser de ce sauver.

144
00:13:11,700 --> 00:13:19,800
Maintenant, nous avons notre formulaire ne semble pas trop mauvais peut revenir nous obtenons une liste de campings, nous avons assez de bar, nous pouvons ajouter un.

145
00:13:19,920 --> 00:13:24,000
Nous pouvons également revenir en arrière et afficher la page de destination qui n'est pas encore terminée.

146
00:13:24,210 --> 00:13:31,360
Celui-ci a probablement le plus de travail et il va être assez différent que les autres pages, il sera beaucoup plus agréable et ont beaucoup plus de styles personnalisés.

147
00:13:31,380 --> 00:13:33,280
C'est pour ça que je le garde jusqu'à plus tard.

148
00:13:33,570 --> 00:13:38,550
Et puis nous avons aussi notre numéro ici avec nos boutons fictifs qui ne font rien.