Cette vidéo, nous allons continuer à styliser le camp.
Nous allons ajouter une barre de navigation à chaque page et cette barre de navigation sera assez vide pour l'instant.
Mais finalement, il aura des boutons comme se connecter et se déconnecter enregistrer toutes ces fonctionnalités.
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.
Commençons donc le serveur et jetez simplement un coup d'oeil à ce que nous avons.
Voici donc notre page de destination.
Voici notre point de vue tous les camp changer la liste des terrains de camping.
Ça a l'air bien.
Nous voulons une barre de navigation ici.
Même chose sur ajouter un nouveau terrain de camping.
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.
Mais nous allons commencer avec la barre de navigation et nous allons simplement travailler sur le modèle de terrain de camping.
Nous allons donc revenir ici et ouvrir le modèle de terrains de camping pour commencer.
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.
Nous allons commencer agréable et simple, mais même alors il ya encore beaucoup de classes dont nous devons nous souvenir.
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.
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.
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.
On pourrait juste faire une div mais une Nav. Est un peu plus significatif.
C'est plus sémantique.
Donc, je vais faire un nav avec la barre de navigation de classe, puis nav barre de défilement par défaut.
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.
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.
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.
Et voyons ce que nous obtenons avec ce simple balisage.
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.
Rappelons.
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.
OK alors ajoutons quelques espaces réservés ici pour vous connecter et vous inscrire.
Ils ne fonctionneront pas ou ils ne feront rien, mais à nous regardons bien alors nous allons faire que maintenant passer à notre camp.
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.
Nous allons ajouter dans un autre div et ce div aura une classe d'effondrement qui va voir ce que cela fait.
Et juste un moment, puis Neph bar Dasch s'effondrer comme ça.
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é.
Et puis à l'intérieur de cet allié aura une balise d'ancrage et donnera le premier log in.
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.
Faisons Sign-Up et puis aussi déconnecter juste comme ça.
D'ACCORD.
Alors voyons ce que cela ressemble.
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.
On dirait que nous n'avons pas ajouté maintenant, donc nous avons juste ajouté barre de navigation.
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.
Remarquez que là même, il s'est effondré.
Et finalement ce que nous aurons, c'est une petite icône de hamburger.
Il ressemble à celui où vous cliquez et son menu.
Pour l'instant nous les cachons quand nous arrivons à cette taille.
D'ACCORD.
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.
Nous allons maintenant l'ajouter à toutes les pages.
Donc copions-le ou le couper et nous allons le déplacer à l'en-tête.
Donc passer à la tête ou partielle.
Je vais ouvrir ça.
En utilisant la ligne de commande C9 vues slash Parashall slash header Ijaw Oui.
Et puis, juste au sommet du corps, nous ajouterons cela.
Let's indent ce correctement.
OK, nous y allons.
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.
Donc, il est encore ici si nous ajoutons un nouveau terrain de camping, nous obtenons également ce bar.
Et si nous allons à la page d'accueil, nous avons aussi la barre suffisante.
Génial.
Maintenant, passons à rendre ce formulaire un peu mieux.
Donc, comme je l'ai mentionné plus tôt, il ya deux grandes choses que je veux faire à ce formulaire.
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.
Vous voulez les prendre et empilés les uns sur les autres.
Commençons par ouvrir le fichier correct qui est le nouveau point.
Oui.
Donc, nous allons faire C9 vues slash savait que Ejay nous et puis voici notre formulaire que nous avons jusqu'à présent.
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.
Et nous voulons que sur les deux entrées et sur le bouton.
Ajoutons dans la classe Bootstrap PTEN ETN grand juste comme ça.
Et nous faisons aussi entre la faute et voyons ce que cela ressemble.
So node après J.
Oui rafraîchir.
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.
Donc, pour résoudre ce problème, nous pouvons faire quelques choses.
La première est que nous mettrons tout à l'intérieur d'un conteneur.
Donc, nous sommes allés en classe div égale conteneur et je vais simplement déplacer ce vers le bas.
Là, nous allons et indentons ce correctement.
Sauf un changement très mineur.
Nous obtenons un certain espace maintenant, mais c'est encore une forme massive.
Donc la prochaine chose que je vais faire est d'utiliser le système de grille.
Donc nous allons ajouter dans un autre div et celui-ci aura la classe égale à la ligne juste comme ça.
Prenons ceci et copiez-le dans la rangée.
Donc, le formulaire entier va dans une ligne maintenant.
Et c'est aussi le cas.
OK enregistrer rafraîchir pas une grande différence encore.
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.
Auto tout cela ici sur le côté gauche et droit.
Et nous voulions seulement prendre environ 30 pour cent de ce conteneur dans lequel il est.
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.
Et c'est certainement une bonne idée de ne pas faire ça.
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.
Donc je vais faire un nouveau div que nous avons mis la forme à l'intérieur de.
Juste comme ça.
Et puis je vais donner ce style div et je vais commencer par dire avec est de 30 pour cent.
Et laissez-le juste à cela et pas de voir que nous obtenons une forme plus petite.
Maintenant, nous voulons centrer cela.
Nous retournons ici.
Dites marge zéro en haut et en bas et Otto à gauche et à droite.
Maintenant, nous avons la forme centrée.
La prochaine chose que nous allons faire est de faire le bouton de prendre toute la largeur qui est encore assez longue.
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.
Et il prend maintenant la ligne entière.
Ensuite, nous allons donner un certain espace entre tous ces éléments pour le faire.
Nous allons utiliser bootstraps construit dans la classe de groupe de formulaires.
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.
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.
Et puis on en a encore un pour le bouton.
Nous avons donc trois fois le groupe de formulaires classiques et nous avons également besoin des balises div de fermeture.
Là nous allons oh il y en a un et nous avons besoin de l'autre tag de fermeture div ici.
D'ACCORD.
Donc, ce groupe forme juste grps choses ensemble.
Mais cela nous donne aussi un peu d'espace.
Maintenant, nous avons ce bouton ici.
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.
Et encore une fois, je vais faire cela en ligne.
Pas une bonne idée à long terme au moins, mais c'est une grande utilité pour elle juste de faire quelque chose rapidement.
Alors, le style et nous allons faire aligner le texte au centre.
Enregistrer maintenant que centré dans le milieu.
La prochaine chose que nous devrions faire est de changer la couleur de ce bouton.
Le Blanc ne semble pas très bon.
Faisons-le primitif bouton primaire qui fera bleu sauvegarder rafraîchir.
Oui, ça ressemble beaucoup mieux.
Nous allons également déplacer ce lien le lien retour vers le milieu ainsi.
Donc, nous allons simplement copier cela et tout ce que nous devons faire est de le mettre à l'intérieur de cette marge.
Auto div afin que ce div ici après la forme juste comme ça et sauver.
Voilà.
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.
Nous allons revenir en arrière et nous avons déjà ce div que nous avons sélectionné.
Donc, plutôt que zéro marge, nous pouvons simplement lui donner une marge de 20 pixels pour commencer.
Voyons comment cela ressemble.
Ok qui ressemble un peu mieux.
Faisons quelque chose de plus comme 50.
Et cela pourrait être un peu trop.
Certainement votre propre préférence.
Revenons et faisons 25.
D'accord.
C'est assez bon pour l'instant.
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.
Dernière chose, nous allons nous débarrasser de cette marque.
Vous n'avez certainement plus besoin de ça.
Dans le bas de notre pied de page, nous allons donc aller dans le fichier de bas de page et je vais tricher.
Il suffit de le faire pour l'instant et nous allons juste se débarrasser de ce sauver.
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.
Nous pouvons également revenir en arrière et afficher la page de destination qui n'est pas encore terminée.
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.
C'est pour ça que je le garde jusqu'à plus tard.
Et puis nous avons aussi notre numéro ici avec nos boutons fictifs qui ne font rien.