Bienvenue dans cette leçon, nous allons construire un petit projet en utilisant ce que nous avons appris jusqu'à présent sur bootstrap.
Il comprendra une grande partie des composantes dont nous avons parlé, y compris maintenant bar le jumbotron et le système de grille.
J'ai également jeté dans une ou deux nouvelles choses, y compris les icônes ici.
Nous n'avons pas encore vu comment les faire.
Et aussi le fait que cette barre de navigation que je défile il verra qu'il reste fixé au sommet de sorte qu'il ne défile pas la façon dont nous avons une barre de navigation fixe que nous n'avons pas encore vu tout de suite.
Enfin, nous modifions certaines couleurs des composants bootstrap par défaut.
Il s'agit donc d'une teinte légèrement différente de gris.
C'est l'ombre du bleu et la barre de navigation a quelques couleurs différentes.
Je vais donc vous montrer comment faire tout cela avant de commencer à écrire n'importe quel code.
Il suffit de prendre un moment pour souligner le fait que ces images pour la plupart sont d'un site Web une excellente ressource appelée Splash.
Donc splash fournit un tas de belles rez photos haute que vous pouvez faire ce que vous voulez avec.
Vous pouvez lire la licence ici, mais c'est à peu près tout ce que vous voulez.
C'est une licence creative commons blah blah blah Je suis sûr que je n'aime pas vraiment que, mais les photos sont vraiment génial et j'utilise beaucoup de ces huit d'entre eux.
En fait dans notre galerie.
Et qui laisse une image qui est celle-ci ici même que j'ai réellement pris moi-même pris une classe de photographie et c'est la première chose que j'ai pris qui semble à moitié décent.
Je pense que même si par rapport à ceux-ci ne cherche pas si chaud.
Quoi qu'il en soit, si vous voulez utiliser ces mêmes images exactement ce qui n'est pas important.
Cela fonctionne avec toutes les images du tout.
Mais si vous voulez exactement les mêmes que j'ai inclus tous les liens dans cette galerie de fichiers M.D qui ont téléchargé avec cette vidéo et ont également inclus les deux couleurs que nous allons utiliser le bleu foncé et le gris clair.
D'ACCORD.
Donc, avec tout cela hors du chemin, commençons maintenant sur le projet.
J'ai donc une galerie de fichiers vide.
H m 1.
Je vais ajouter dans mon h d m l squelette ici et nous allons appeler cette galerie d'images et la première chose que nous devons faire est d'inclure bootstrap.
Et je vais juste copier sur les extrémités de CD d'un vieux projet donc je vais le faire maintenant.
Et c'est parti.
Je suis relié au CDN bootstrap.
Et pendant que je suis ici je vais aussi récupérer les bootstraps CSSA et Jay queery city et que nous avons fait dans la leçon nav bar et mettre ceux au fond ici afin que lorsque nous ajoutons la barre de navigation dans nous n'avons pas à aller chasser Pour ces fichiers ou pour les balises de script.
Donc, une sauvegarde et la première chose que nous pouvons faire est d'ajouter dans notre Jumbotron.
C'est agréable et facile.
Donc nous aurons un div et ce sera la classe égale Jumbotron.
Et puis à l'intérieur du Jumbotron va commencer avec un H1 qui vient de dire la galerie d'images.
Là, nous allons et nous allons économiser et nous allons nous assurer que cela fonctionne.
Donc, il ouvrira ce fichier.
Nous avons donc inclus Boucek.
Nous voyons le changement de police.
Nous voyons ce gris du Jumbotron.
Maintenant, assurez-vous que c'est dans un conteneur comme il est ici plutôt que ce que nous avons où il va tout le chemin à travers l'écran.
Donc, nous allons faire que la classe div égale conteneur.
Là-bas, nous allons faire correctement et actualiser et nous y retournerons.
D'accord, nous avons le Jumbotron mais ajoutez ce paragraphe.
Maintenant, nous allons revenir et faire l'icône, mais c'est juste une étiquette de paragraphe sous le H-1, nous allons enregistrer.
N'hésitez pas à mettre le texte que vous voulez là-bas et nous avons terminé avec le Jumbotron pour l'instant.
Revenons donc et faisons maintenant la barre de navigation et je ne vais pas taper assez barre à partir de zéro pour deux raisons.
L'un d'eux est que c'est un peu de code.
Il faudra longtemps.
Et cette vidéo.
Mais deux, c'est le fait que je ne tape presque jamais Ackbar à partir de zéro.
Comme je l'ai mentionné dans la vidéo de NASCAR la plupart du temps mon flux de travail est que je vais au site bootstrap ou à un site précédent que j'ai fait avec une barre NAV et je copie cela.
Et je viens de le vérifier et je me débarrasse des morceaux que je ne veux pas.
J'ajoute quelques nouvelles pièces.
Donc c'est là que je vais faire ici.
J'ai déjà assez de partie que j'ai fait dans la barre de navigation dit chaque application HTML.
Il est juste ici et je vais juste copier cela dans et puis nous allons tordre un peu.
Donc, copions-le et je vais revenir en arrière et nous allons simplement mettre cela au tout début du fichier juste comme ça.
Et voyons ce que nous obtenons sont frais et nous avons la barre de navigation.
C'est proche.
Nous voulons changer la marque ici.
Nous voulons également changer la couleur éventuellement et nous voulons nous assurer qu'il est fixé au sommet, ce qui n'est pas le cas actuellement, mais nous y arriverons.
Revenons et changeons la marque.
Donc au lieu de café, j'ai appelé les images de mine que vous pouvez appeler ce que vous voulez.
Bien sûr, assurez-vous qu'il fonctionne bien.
La prochaine chose que je vais vous montrer est un changement rapide que nous pouvons faire pour modifier la couleur où apparaissent au lieu de sieste ou par défaut.
Nous pouvons faire maintenant si bar en vers et je vais vous montrer ce que ressemble.
Nous obtenons un obscur maintenant pour maintenant ou les couleurs ont été inversées où le texte est léger et nous obtenons un fond foncé.
Ce n'est pas la couleur bleue que je vais chercher ici.
Et la police n'est pas blanche, mais nous allons revenir et corriger cela.
C'est assez proche pour l'instant.
Maintenant, nous pouvons nous concentrer sur la galerie d'images réelle sur cette grille ici.
Et commençons par regarder comment il se comporte sur la solution.
Donc, il commence par trois images qui traversent et puis, comme je redimensionner, il descend à deux, puis il descend à deux et puis enfin à la petite taille, il va à un comme vous pouvez le voir ici.
Et nous avons une image qui passe.
Commençons par la mise en place de la grille pour cette grande taille où nous avons trois traverser.
N'oubliez pas que nous avons 12 unités au total.
Donc, si nous voulons que trois passent, nous allons désigner chacun d'entre eux comme quatre unités.
Alors montons juste en dessous de notre Jumbotron.
Toujours à l'intérieur du conteneur, bien que nous allons juste faire div classe égale ligne et puis à l'intérieur de cela, nous aurons div classe égale et nous voulons qu'il soit de quatre unités.
Donc, nous allons faire la colonne grand tiret 4 et appuyez sur entrer et nous pouvons commencer en mettant juste un texte ici et puis je vais dupliquer cela parce que nous voulons trois de ceux.
Et je ne vais pas m'inquiéter de la fixation de l'indentation encore parce que nous allons faire un changement plus important en un instant.
Mais nous allons actualiser et nous obtenons ces trois colonnes à travers.
Donc, la prochaine chose que nous voulons faire est d'obtenir des images et tout commence, mais juste prendre la L de ma photo Golden Gate Bridge et nous allons ajouter une balise d'image plutôt que du texte.
Donc source d'image égale que le Golden Gate Bridge vous êtes malade et je vais coller que trois fois et sauver.
Et si nous revenons en arrière, nous avons un problème qui est que cette image est énorme, même si nous avons ces trois colonnes.
Notre image ne reste pas à l'intérieur de notre colonne, elle ne se rétrécit pas.
Vous pouvez voir ce que nous allons faire pour corriger cela est ajouter en ajoutant un peu plus bootstrap.
Je ne vous ai pas encore montré pour créer cette belle petite bordure autour de lui et il est appelé une vignette.
Tout ce que nous devons faire est d'écrire un div avec une classe égale à la vignette et ensuite n'importe quelle image que nous mettons à l'intérieur de celle-ci sera réduite pour s'adapter à l'intérieur de la colonne.
Et il obtient également cette petite frontière ici qui je pense semble assez agréable.
Donc, pour ce faire, je vais effectivement se débarrasser de ce que nous avons avec ceux d'aller juste à une seule image et ajouter dans une classe div égale thumbnail et fait correctement.
Et nous enveloppons cela autour de l'image et sauver.
Maintenant, si nous rafraîchissons.
Vous verrez si nous obtenons une seule image qui prend la quantité appropriée d'espace à l'intérieur de cette grille.
C'est la colonne et il a une petite bordure autour de lui et l'image n'est pas gigantesque qui est grande.
Donc, nous allons nous assurer qu'il fonctionne si nous dupliquer cela.
Donc, c'est une image, nous allons le dupliquer trois fois et voir ce qui se passe rafraîchir.
Et voilà.
Nous avons trois images.
Je vais aller plus loin et ajouter six autres.
Nous avons donc neuf total comme nous le faisons ici.
Et nous n'avons pas à ajouter des lignes distinctes.
On peut tout mettre dans la même rangée.
Donc copiez les trois que nous avons jusqu'ici à temps et sauver.
Cela nous donnera neuf images.
Et si je rafraîchis, vous verrez qu'ils s'enchaînent automatiquement à la ligne suivante.
Donc, nous devons seulement avoir une ligne et ajouter dans les colonnes que vous connaissez médicalement nos.
Si nous voulons que chaque image occupe quatre unités, alors cela signifie trois par ligne et nous avons besoin de trois rangées d'images.
Je vais revenir en arrière et changer tous ces image vous les elfes à la fin de la vidéo.
Je ne veux pas te faire regarder ça.
Très intéressant juste de copier et coller, mais nous allons nous concentrer sur le reste de cette grille.
Donc dès maintenant, dès que le médium de la balle va à une image à travers laquelle ce n'est pas ce que nous voulons ce que nous recherchons est deux images à travers à ce point d'arrêt moyen.
Et puis après le point de rupture moyen qui est là nous avons touché petit et nous voulons toujours qu'il reste à 2.
Donc, pour fixer cela dans le nôtre ou il va à un immédiatement au grand point de rupture ou le point d'arrêt moyen et puis petits et extra petits séjours à 1.
Nous pouvons revenir ici et nous allons changer tous ceux que vous savez sélectionnez et appuyez sur la commande d sélectionnez toutes les instances de les appeler grand pour et puis je vais frapper la flèche gauche ou droite pour déplacer le curseur.
Maintenant, je peux les éditer tous à la fois.
Et ce que je veux faire, je pourrais ajouter dans la colonne moyenne six parce que nous voulons Perrow et cela fonctionnera.
Et si je retourne et rafraîchir vous verrez qu'ils restent à 3 par rangée et puis j'ai frappé le point de rupture médian et ils vont à 2.
Mais alors je frappe petit et il saute à un et à la nôtre quand nous frappons petit la solution reste à 2.
Donc, pour fixer que plutôt que de faire la colonne moyenne six, nous pouvons faire colonne petit 6 et revenir à nouveau rafraîchir cette version.
Nous avons frappé moyen.
Nous allons à deux.
Nous avons frappé petit.
Nous restons à 2 et puis nous allons à extra petit et nous sommes à 1 1 image par rangée.
Parfait.
C'est donc tout ce que nous devons faire pour la grille et nous avons terminé avec la plupart des fonctionnalités ici.
Très très rapide pour que cela fonctionne.
Ce que nous voulons nous concentrer sur maintenant sont quelques-unes des couleurs et aussi les icônes.
Je vais commencer par vous montrer comment nous ajoutons des icônes à l'aide de bootstrap.
Donc sur get bootstrap si vous allez aux composants il ya ces icônes de glyphes en haut et il ya un tas d'entre eux à choisir.
Et nous allons en trouver un que nous voulons utiliser et celui que j'utilise.
Je ferai juste une recherche pour je pense que c'est la caméra.
Donc il ya cette caméra ici et je n'utilise pas cette caméra.
C'est un peu différent.
Celui que j'utilise est une caméra plus rétro et je vais vous montrer comment ajouter cela.
Ce n'est en fait pas partie de bootstrap Mais commençons par la caméra régulière qui vient avec bootstrap.
Alors nous écrivons Clifford Kahn et ensuite aller avec la caméra de tableau de bord conn.
Et si vous faites défiler vers le bas, vous pouvez voir où ils expliquent comment l'utiliser pour créer un span où une classe est égale à Con et puis glyphe, il peut faire chuter le nom de l'icône de glyphe.
Nous allons commencer par le faire à l'intérieur du H-1, il suffit de le mettre au tout début du H-1 et nous voulons un rapide A-Kon tableau de bord et nous allons enregistrer et rafraîchir.
Et juste comme ça, vous pouvez avoir une caméra là-dedans.
Et si nous voulons de l'espace, nous pouvons le faire à travers le rembourrage ou nous pouvons simplement ajouter un espace là.
Et nous obtenons un espace, nous pouvons faire exactement la même chose pour la barre de navigation et j'ai utilisé celui qui s'appelle Photo aller double vérifier ici.
Vous pouvez faire une recherche sur cette page pour photo photo.
Le voilà.
Il peut aller si il peut tableau tableau de bord.
Donc, nous allons monter à la marque nav bar ici et nous coller dans cette période de nouveau.
Et puis à l'intérieur de la portée de la classe devrait être cliquez sur l'image et nous allons ajouter un espace là aussi.
Nous retournons à notre site sont frais et nous avons maintenant une petite photo là-bas.
Et nous avons aussi la caméra.
Ensuite, nous allons aborder le bar de navigation et nous allons commencer en le fixant au sommet pour que vous puissiez le voir maintenant.
Cette sieste nous défile.
Mais sur la solution il reste là.
Et pour ce faire, c'est une seule classe que nous devons ajouter à notre barre NAV.
Donc, ici, nous voulons que le tableau de bord de nav soit fixé au tableau de bord et que vous l'épargniez.
Et si nous sommes frais, vous verrez qu'il est fixé au sommet.
Il ya un petit problème qui est que notre contenu est maintenant derrière elle un peu et nous voulons qu'il ait cet espacement normal au-dessus du Jumbotron.
Ce que nous devons faire est d'ajouter un peu de rembourrage à notre corps et il se trouve être de 70 pixels.
Les documents bootstrap vous diront que si vous oubliez jamais 70 pixels de rembourrage est ce que nous voulons, c'est la largeur de la maintenant quatre.
Donc, nous allons ici et nous allons créer une feuille de style maintenant et je vais appeler la galerie Dotsie SS, puis à l'intérieur de sélectionner le rembourrage du corps top 70 pixels et puis nous avons besoin d'ajouter que dans lié à cette feuille de style qui est Gallery CS S.
Maintenant, assurez-vous que cela fonctionne.
Voilà.