Bienvenue dans cette leçon, nous allons utiliser bootstrap pour créer une page de destination pour un démarrage fictif.
Notre démarrage est appelé Match parfait.
Très drôle.
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.
Je ne sais pas.
Commençons par faire une visite rapide du site et lui écrire.
Je veux juste signaler quelques fonctionnalités.
Il n'y a pas grand-chose ici.
Nous n'avons pas réellement cette connexion, il ne fait rien encore.
Donc c'est vraiment juste HD mounseers s mais c'est tout ce que nous avons couvert jusqu'à présent.
Donc, nous avons assez notre maison match parfait sur les longueurs incontact.
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.
Je peux cliquer dessus.
Tous ces liens sont maintenant dans ce hamburger.
Ensuite, nous avons une grande image de fond qui reste centrée et il couvre tout l'arrière-plan.
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.
Et puis nous avons un peu H R règle horizontale ici, puis un bouton pour commencer avec une icône.
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.
Donc, nous le déplacer un peu et il reste centré.
Ces mises en page vraiment facile à faire et bootstrap, mais il est relativement efficace pour la page de destination.
Tout ce que nous avons est une seule colonne qui prend toute la largeur.
Donc, cette colonne va 12 unités à travers.
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.
Alors, commençons.
La première chose que nous devons faire est de créer un fichier.
J'ai un index appelé à DML.
J'ajouterai ceci dans ma correspondance normale régulière, puis commencer par ajouter Bootstrap et j'utiliserai un CDN Bitstrips CDN.
Faisons le SS et Javascript ici.
Nous aurons besoin de ce javascript pour la barre des tâches.
Nous devons donc lier l'étiquette.
Ensuite, nous obtenons le javascript.
Bien reçu.
Mettez cela en bas, qui est une balise de script, puis nous avons mis source égale à ce que vous êtes.
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.
Rappelez-vous de retour de la leçon nav bar, nous devons exiger J.
Querrey.
Nous aurons donc un CDN pour cela.
Nous allons faire la version modifiée.
Copiez cette URL.
Et finalement nous revenons ici et nous devons le faire avant le lié à bootstrap au javascript.
Sinon, il ne sera toujours pas au courant de votre requête, donc il doit charger la requête d'abord.
Maintenant, essayons encore.
Rafraîchissement d'incendie.
OK nous ne voyons rien qui est un bon signe parce que nous ne voyons pas d'erreurs.
Commençons par le texte au milieu.
Tout ce contenu ici.
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.
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.
Et cela va s'étendre tout le chemin à travers ce conteneur.
Et puis à l'intérieur si ils vont avoir un H1 qui va juste dire match parfait et sauver.
Et laissons-le à ce rafraîchissement.
Et ce n'est pas vraiment ce que nous voulons encore et c'est parce qu'il ya quelques choses que nous devons faire.
La première est que nous devons centrer tout dans cette colonne.
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.
Et la seconde est que nous devons le pousser un peu.
Nous avons besoin d'ajouter un peu de rembourrage ou de marge afin que ne va pas droit au haut de notre page.
Commençons par ajouter dans le reste du contenu.
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.
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.
Nous jetons un coup d'oeil.
C'est un bouton bootstrap par défaut et c'est un bouton grand.
Retournons.
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.
D'accord.
Donc, nous avons maintenant notre contenu maintenant, mais Centre à l'intérieur de la grille.
Et puis nous allons nous concentrer sur le rembourrage et de le déplacer vers le bas.
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.
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.
Faisons un div et je vais lui donner un identifiant de Cantet et puis nous mettrons tout à l'intérieur de là.
Ainsi, le H-1 de l'âge 3 H.R. et le bouton sera correctement indent et enregistrer.
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.
J'ai donc ajouté une balise de lien et j'appellerai mon application de feuille de style.
SS Il n'existe pas encore.
Donc je dois le faire enregistrer.
Je vois SS dans le même répertoire.
Et commençons par quelque chose de simple comme tous les h sont violet.
Juste pour vous assurer que ça fonctionne bien.
Revenons à rafraîchir.
Andrew obtient un violet H-1.
Génial.
Alors maintenant, nous allons sélectionner que Dave nous avons ajouté avec l'idée de contenu et de le centrer.
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.
Retournons.
Voilà.
Donc, les choses sont centrées à l'heure actuelle.
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.
Donc, ici, nous ferons rembourrage top 25 pour cent.
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.
Donc c'est juste au centre.
Et puis 25 pour cent des changements que nous redimensionner l'écran.
Génial.
Maintenant, nous allons ajouter dans l'image d'arrière-plan.
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.
Et ils ont toutes sortes de très bonnes images de haute qualité que vous pouvez utiliser sans aucun problème.
Et celui que j'utilise est juste ici je recherche des liens de chat dans cette description aussi bien.
Voici le vous Aro de cette image juste clic droit copiez l'image vous êtes l.
Maintenant, nous allons revenir en arrière et je vais l'ajouter au corps comme une image de fond.
Alors d'arrière-plan et puis lui donner une URL qui est ce géant Vous êtes là.
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.
Donc, nous devons redimensionner et de faire que nous utilisons la taille de fond et de changer que d'être couvert à nouveau.
Encore une fois, nous nous rapprochons.
Cela rendra l'image aussi petite que possible tout en couvrant toute la largeur et la hauteur de l'écran.
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.
Mais le montant minimum dont il a besoin pour s'adapter sur notre écran et il n'est toujours pas parfait.
Et ce que nous voulons faire n'est pas changer la taille de celui-ci mais changer la position.
Nous allons le centrer centre de position d'arrière-plan, mais sauver que nous sommes plus proches.
Mais ce n'est toujours pas un match parfait en ce qui concerne l'image.
Et ces changements viendront plus tard.
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.
Je le fais toujours si je suis l'ajout d'un bootbar barre de navigation.
C'est juste trop de choses à retenir autrement.
Et je copie juste ceci ici.
Prendra l'ensemble du nav pour commencer à revenir à notre application ici et juste le mettre à droite en haut.
Ce n'est certainement pas le NAF que nous voulons mais il contient les morceaux que nous voulons rafraîchir.
C'est assez proche.
Il y a donc quelques changements que nous voulons apporter.
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.
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.
Maintenant, nous allons travailler sur le contenu réel de la Nev ..
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.
Essaye le.
OK bien.
Maintenant, nous allons nous débarrasser de cette forme.
Nous n'avons pas besoin de ça du tout.
Donc, notre formulaire commence ici.
Débarrassez-vous de cette chose entière rafraîchir.
Débarrassons-nous aussi du menu déroulant.
Vous n'en avez pas besoin.
Donc ça commence juste ici.
Ce mensonge qui finit là est fraîche encore.
Maintenant, nous avons un seul lien.
Donc, nous allons commencer avec ces deux liens qui sont censés être de s'inscrire et de le consigner.
C'est ce lien ici, donc nous pouvons changer celui-ci pour être inscrivez-vous et ensuite le dupliquer.
Juste un allié avec une balise d'ancrage à l'intérieur.
Et celui-ci sera connecté.
Regardons ça.
Génial.
Donc, les icônes viendront à la fin.
Nous avons les deux liens.
Nous avons besoin de trois liens ici.
Nous en avons déjà deux et nous nous débarrasserons de ce menu déroulant.
Donc, nous avons besoin de la maison au contact.
Donc, trouver ce menu déroulant qui est ici.
La classe est égale à la liste déroulante.
Débarrassons-nous de lui et sommes maintenant simplifié beaucoup d'Akbar.
Maintenant nous avons deux longueurs différentes.
Nous allons effectivement nous débarrasser des deux et le faire à partir de zéro.
Donc, nous allons ajouter dans un allié avec une balise d'ancrage, puis nous le ferons trois fois.
Ce premier devrait dire à la maison.
Le prochain est environ.
Et le dernier est le contact.
Regardons ça.
Là nous allons sont trois longueurs.
Une chose mineure.
Home est censé être actif et un bootstrap qui est vraiment facile.
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.
Génial.
OK, c'est notre nav bar et si nous redimensionner, vous verrez que nous avons déjà ce hamburger fonctionne très bien.
Nous avons un problème, c'est que notre image de fond est gâchée.
Nous allons couvrir cela dans un petit peu, mais nous avons le hamberger fonctionne bien.
Tout semble bon.
Maintenant, nous allons aborder la police de sorte que la police que j'ai utilisé ici est Ledo L.A ..
C'est à partir de polices Google, donc je vais aller à Google polices et chercher Ledo.
LA T-O chaque aller à la collecte.
Utilisons-le s'il devient normal et audacieux.
Nous voulons aussi que notre H-1 soit audacieux.
D'accord.
Et puis nous ajouterons ce lien à droite dans sa demande.
Up top ici enregistrer maintenant entrer dans les applications L'évaluation que nous allons appliquer cette police à tout.
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.
Voir ce que nous avons rafraîchir.
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.
C'est changé.
Il correspond à ce que nous avons dans cette solution.