Bienvenue dans cette leçon, nous allons continuer à travailler sur votre camp.
Nous avons déjà fait la mise en place initiale.
Nous avons fait quelques layouts de base ajouté l'en-tête et le pied de page Parshall's nous avons ajouté bootstrap et nous avons ajouté la fonctionnalité de la création de nouveaux terrains de camping.
Maintenant, nous allons aller dans le style de la page camping en utilisant bootstrap.
Alors, commençons.
La première chose que je vais faire est de s'assurer que mes serveurs sont en cours d'exécution.
Et jetez un oeil à ce que nous avons maintenant.
Certainement un peu décevant.
J'ai donc deux objectifs principaux.
Le premier est que nous voulons un meilleur en-tête dans le titre ici, donc cela devrait paraître plus agréable.
Nous allons utiliser ce qui est appelé un jumbotron dans Bootstrap et puis aussi les terrains de camping la liste des terrains de camping ne devrait pas simplement afficher verticalement comme ça.
Au lieu de cela, nous voulons une grille de plus petites images traverser et que la grille doit être sensible.
Commençons par le premier qui fait que ce texte de titre paraisse un peu plus agréable.
Donc, je vais ouvrir des terrains de camping qui oui je vais juste travailler ici.
Je vais donc redimensionner un petit peu parce que nous allons écrire un peu de courrier HD et nous ne ferons rien avec un terminal du tout.
Donc, pour travailler sur l'en-tête, nous allons utiliser une balise d'en-tête que nous n'avons pas vu auparavant.
Fonctionnellement il fonctionne exactement de la même manière que quelque chose comme un div.
La seule différence est que cela a un peu de sens sémantique.
En utilisant l'en-tête plutôt que juste un div arbitraire, mais il n'a pas vraiment d'importance, il est juste un conteneur.
Et nous allons lui donner une classe de jumbotron et puis à l'intérieur de celui-ci, nous allons ajouter dans bien juste copier ce H-1 en fait et nous allons juste laisser à cela et économiser Frigo et rafraîchir notre page.
Nous avons maintenant ce qu'on appelle le Jumbotron.
Ce n'est toujours pas super.
La prochaine chose que nous devrions faire est de faire tout à l'intérieur d'un conteneur bootstrap.
Donc, tout ce que nous voyons ici tout cela, je vais indenter et je vais ajouter un div avec classe égale conteneur juste comme ça.
Et puis nous allons coller tout à l'intérieur de cela et cela va ajouter quelques speccing pour nous sur les côtés.
Rafraîchir.
Vous pouvez voir que nous n'avons plus les choses contre le côté gauche ici.
Nous avons un peu d'espace et notre JumboTron est un peu plus proche et finira par avoir une barre naff apparaissent.
Donc, ce sera un peu plus agréable aussi.
Pour l'instant nous avons juste le Jumbotron.
Maintenant, changeons le texte lui-même.
Donc plutôt que ce n'est la page des terrains de camping, mettons un message de bienvenue Bienvenue au camp.
N'hésitez pas à mettre le contenu que vous voulez et je vais également ajouter dans un paragraphe dans le paragraphe, je vais ajouter un peu de sorte de slogan et je vais juste dire de voir notre main et ramasser des terrains de camping de partout dans le monde.
Quelque chose comme ça n'a pas d'importance.
Nous allons enregistrer rafraîchir.
OK alors maintenant nous avons un petit tag line et la dernière chose que nous voulons faire est de prendre soin de ce lien.
Le lien ajouter un nouveau terrain de camping.
Donc, je vais copier cela et aussi le mettre dans le Jumbotron.
Cependant je vais le faire en un bouton.
Un des boutons d'amorçage afin de faire cela ou d'ajouter un paragraphe d'abord, puis mettre l'étiquette d'ancrage à l'intérieur de celui.
Et je fais ça juste pour l'espacement.
Vous voulez que ce soit sur sa propre ligne et puis je vais donner le bouton classe plusieurs classes de PTEN ETN primaire pour la couleur et entre tiret grand comme ça et sauver.
Maintenant, nous avons eu un nouveau bouton de camping.
Nous cliquons sur elle et elle nous amène à la forme qui est complètement stylé.
Une chose mineure est que si je redimensionner cette fenêtre ici.
Remarquez comment notre texte va droit contre le bord du Jumbotron qui n'est pas grand.
Nous avons un certain espace ici et ils veulent garder cet espacement ce que nous aurons besoin de faire est juste ajouter un autre conteneur à l'intérieur du Jumbotron donc div classe égale conteneur et puis ici à l'intérieur du Jumbotron avant la fin à la fermeture div et puis juste un retrait tout.
Et maintenant si nous rafraîchissons.
Elle avait l'air la même, mais quand on la rétrécit, nous avons maintenant un peu d'espace là-bas.
OK, c'est la partie en-tête.
Maintenant, nous voulons travailler sur cette grille d'images et je serai à l'avant avec vous.
C'est certainement un peu plus de travail.
OK nous allons commencer sur cette grille et nous allons commencer par créer une ligne de sorte que la classe div égale ligne juste comme ça et je vais commencer avec juste un petit message ici.
Donc, nous allons ajouter une classe div égale et je vais faire en sorte que cela prenne toute la largeur et nous allons simplement avoir un message ici et H-3 qui dit que nos sites les plus populaires sont les terrains de camping que vous connaissez Ne ressemblera pas beaucoup.
Pour l'instant, revenons en arrière et commençons par ajouter en ligne de classe div que nous avons besoin de tout dans notre école primaire dans une rangée.
C'est une classe div égale ligne juste comme ça.
Et maintenant, nous devons en parler pour chaque boucle, car ce que nous voulons faire, c'est que, au lieu de notre grille à l'intérieur de la ligne pour chaque terrain de camping, nous voulons faire un div qui a une colonne et une colonne avec la grille d'amorçage.
Donc, je vais le faire maintenant où je vais mettre tout ce code pour chaque boucle va à indentation juste comme ça.
Et puis nous avons besoin de notre tag div de fermeture ici.
Donc c'est pour la rangée classique et c'est pour le conteneur.
D'ACCORD.
Donc ative classe de rang et plutôt que de laisser ce contenu comme div et ici avec un H pour une image, nous aurons encore une image, mais nous allons changer cette div de sorte qu'il a une classe de colonne moyenne trois dans la colonne petite 6 et c'est juste pour le rendre sensible afin que nous obtenions des images plus grandes lorsque la taille de l'écran est plus grande.
Et puis, quand on le rétrécit, il descendra à seulement deux images par rangée et il se rétrécira encore plus bas à une seule image par rangée.
Donc à l'intérieur de ce que nous allons réellement ajouter dans un autre div et ce div va avoir une classe de vignette qui est une classe d'amorçage qui nous aidera à faire une petite carte, il fera un petit élément de grille à l'intérieur de cette vignette ajoutera le Image pour commencer juste comme ça.
Nous avons des services d'image égale au terrain de camping que vous RL Et nous allons juste laisser à cela.
Et nous allons nous débarrasser de cela pour le moment et juste économiser et nous allons voir ce que nous obtenons si nous sommes frais.
D'accord.
Nous avons donc une grille d'images maintenant.
Il n'y en a que trois mais nous obtenons cette grille.
Et je vais vous montrer ce que je voulais dire en le rendant réceptif.
Ainsi, comme un rétrécir ces Remarquez comment il se transforme en deux carrés ou deux éléments à travers l'écran.
Rappelez-vous qu'il y a 12 unités.
Donc ce que nous avions d'abord, nous le divisons en quatre morceaux où chacun a pris trois unités et puis quand la grille devient plus petite ici, ils prennent chacun six unités et même plus petit, il va automatiquement à un.
Et nous n'avons pas eu à écrire que parce que le petit défaut supplémentaire est d'utiliser 12 unités.
Nous n'avons donc pas eu à préciser cela.
Maintenant, nous allons récupérer le titre dans ce nom de terrain de camping et plutôt que juste un âge pour que l'on fasse une autre classe d'amorçage. Une classe div équivaut à la légende juste comme ça.
Et puis à l'intérieur il y aura un H pour le nom du terrain de camping.
OK, nous allons enregistrer, nous allons voir à quoi il ressemble.
Voilà.
Nous recevons ces jolies petites cartes.
C'est la classe de miniatures qui fait cela pour nous.
Nous avons nos images.
Et voyons à quoi ça ressemble si nous avons un tas d'images dans un tas d'articles.
Donc, vous n'avez pas à le faire, mais je vais coller ici.
Donnez-nous quelques données supplémentaires.
Ce sera des données en double, mais c'est très bien.
Et puis nous devons nous assurer que nous ajoutons les virgules correctes et donc virgule là et à venir là.
Maintenant, si nous rafraîchissons Oh, nous devons redémarrer le serveur.
Et chaque fois que nous gâchons avec l'application.
Oui.
Et maintenant, si nous nous rafraîchissons, il verra que nous avons un petit problème.
Notre grille est un peu gâchée.
Et ce qui se passe, c'est que nous avons des images qui sont de hauteurs différentes.
Donc ce Creek Salmon est différent de ceux-ci.
Même si la largeur est la même dans ce cas.
Et c'est de jeter hors de la grille et il ya un moyen facile de le réparer, même si c'est un peu wonky.
Et je vais vous montrer comment nous faisons cela au lieu de notre terrain de camping.
Oui.
Le jour de la rangée de la classe, je vais ajouter un attribut de style et je vais juste le faire temporairement.
Nous allons passer à une feuille de style externe, mais je vais juste le faire en ligne pour le rendre plus facile pour vous de voir.
Donc, nous avons mis le style d'être affichage flex et flex wrap à envelopper.
Et ce sont deux propriétés qui vont aider notre grille.
Donc, si j'étais frais Maintenant, nous nous retrouvons avec la grille où il est plus flexible.
Peu importe que nous ayons des hauteurs différentes parce que maintenant la grille s'adapte Donc il ya plus d'espace entre ces deux et là c'est ici.
Fondamentalement, il détermine le minimum d'espace nécessaire où nous pouvons avoir tout être sur sa propre ligne ensemble où nous pouvons avoir tout être aligné parfaitement.
Et il ya un autre changement que nous pouvons faire qui est de revenir en arrière et d'ajouter dans le centre de texte qui est un bootstrap pour nous qui fera notre texte centré là.
Et je pense que cela ressemble un peu mieux.
Aussi une question de préférence personnelle et maintenant nous avons terminé avec la page de camping pour le moment.
Espérons que cela vous montre comment bootstrap peut vraiment nous aider peut rendre les choses assez facile en particulier par rapport à ce faire à partir de zéro.
Et laissez-moi juste vous montrer notre grille réactive sympathique que nous avons.
Donc, c'est sur mobile.
Nous obtenons cette belle mise en page jusqu'à quatre images.
OK, donc je suis assez satisfait de la façon dont cela ressemble.