Savoir tout ce dont nous avons vraiment besoin de se concentrer sur les couleurs.
Commençons par un jumbotron.
Donc tout dans le JumboTron est juste une nuance différente de bleu et que l'ombre de bleu que j'ai dans ce document ici pour voir 3 5 0 ira à notre feuille de style et nous pouvons simplement sélectionner le jumbotron et lui donner une couleur et tout à l'intérieur de Il tout en haut cette couleur juste comme cela sont frais et vous pouvez voir tout est changé pour être bleu comprenant la falaise A-Kon l'icône de glyphe est juste traitée comme le texte.
C'est en fait une police de sorte que vous pouvez changer la couleur de celui-ci en utilisant la propriété de couleur.
Maintenant, abordons la barre de navigation qui est un peu plus délicate.
La couleur de fond n'est pas mauvaise.
Tout ce que nous devons faire est de sélectionner la barre de navigation Inv. Ou nous pourrions faire.
Maintenant, si nous sommes sur après notre arrêt fix, mais je vais faire nav bar inverse et puis lui donner une couleur de fond de ce fond bleu et collez-le dans et actualiser.
Et vous pouvez voir qu'il change d'être bleu.
Mais pour changer la couleur ici, je veux qu'ils soient blancs plutôt que gris qu'ils sont.
Si je viens de style de toutes les étiquettes d'encre ou qui est ce que ce sont pour les balises d'ancrage de style juste pour être blanc, il ne fonctionnera pas tout à fait.
Alors je vais vous montrer ce que je veux dire.
Couleur de la marque d'ancrage blanche.
Retourner.
Il ne prend pas effet et c'est une grande utilité pour l'inspecteur si nous l'inspectons.
Jetez un oeil sur ce qui se passe.
Donc nous pouvons voir que notre couleur blanche est rayé et la couleur est attribuée ici.
Cette couleur de ligne est ce gris et si nous le décochons ils retournent à être le blanc que nous voulons qu'ils soient.
Et c'est parce que c'est un sélecteur plus spécifique.
Si vous pouvez réfléchir à cette leçon que j'ai faite sur la spécificité.
Cela est calculé pour avoir un nombre plus élevé ou un indice de spécificité plus élevé que ce que nous avions ici qui est juste pour la balise d'ancrage peu par rapport à ce ici.
C'est plusieurs classes.
N'oubliez pas que chacun d'entre eux est dix fois plus spécifique qu'une simple balise d'ancrage.
Donc, ce que nous voulons faire est d'écrire un sélecteur qui sera tout aussi précis et nous pouvons simplement voler celui-ci ici.
Donc, nous allons dans ici pour coller cela et ensuite changer de couleur pour être blanc.
Donc nous allons juste passer outre le schlechter exactement le même que bootstrap avait.
Et il est important que nos styles se produisent après bootstrap afin que nous puissions l'annuler et si nous sommes frais Nous obtenons maintenant des liens blancs.
Enfin, nous allons faire la même chose pour la marque nav bar.
Donc, comme vous pouvez le voir, c'est à l'intérieur de nav marque de tableau de bord.
Si nous choisissons Daut maintenant pour notre marque et nous donnons une couleur de blanc et d'enregistrer et de revenir, il ne fonctionne toujours pas et nous avons le même problème.
Donc, si nous l'inspectons, vous verrez que les styles que nous avons tracés ici où nous tournons blancs ont été rayés et que les couleurs sont changées par cette ligne.
Maintenant, si Bar marque à l'intérieur de la barre de navigation Inv. Donc nous pouvons aussi simplement voler cela et écraser cela.
Donc, nous avons juste besoin de nav ..
Maintenant pour notre marque.
Donc, fondamentalement, nous sommes des styles d'écriture qui vont se heurter tête à tête dans une bataille des styles entre bootstrap et nos styles et ils sont identiques dans les sélecteurs.
Donc, parce que la nôtre vient en second ils vont sortir sur le dessus.
Ils vont gagner remonter rafraîchir et ne jamais aller.
Nous avons la plupart des styles fait.
Il ya une chose vraiment mineure que vous ne remarquerez probablement pas sur l'écran coulé la couleur de gris sur le JumboTron est jamais si légèrement différente.
Donc j'ai cette couleur ici je vais juste le copier et ensuite aller à RC SS et nous allons juste changer l'arrière-plan du Jumbotron d'être que gris de couleur et de payer une attention particulière comme rafraîchir.
J'espère que vous pouvez le voir changer.
Il a juste changé.
C'est un gris un peu plus bleu.
Alors testons tout.
Redimensionnez le travail de la barre NAV.
Le Javascript fonctionne très bien.
Voilà.
Tout semble bon.
La dernière chose que je vais vous montrer est comment nous pouvons utiliser une icône différente ici.
Celui que j'utilise est d'une bibliothèque appelée fun awesome fun awesome est une bibliothèque simple qui comprend beaucoup d'icônes différentes.
Bien plus que construit dans Bootstrap avec des icônes pour que vous puissiez y accéder à Funt awesome.
Ne l'attrape pas.
Je sais que je suis sur la page d'accueil ici.
Et si nous cliquons sur les icônes il ya plus de 580 icônes différentes, vous pouvez les voir tous ici.
Et l'une des fonctionnalités intéressantes que vous pouvez rechercher à travers eux que vous ne pouvez pas vraiment faire sur Pucelle très facilement.
Ainsi nous pouvons rechercher la photo et nous obtenons la caméra et la caméra rétro qui est ce que j'ai employé.
Mais avant de pouvoir utiliser l'un d'entre eux, nous devons l'installer.
Donc, si vous allez à commencer.
Ils ont un CDN agréable que vous pouvez simplement copier et juste mettre cela à l'intérieur de votre application.
Donc, nous allons faire que le haut payer soudainement.
Et maintenant, nous pouvons utiliser des icônes amusantes impressionnantes et c'est vraiment très facile.
En fait, si vous cliquez sur n'importe quelle icône que vous voulez dire que je veux utiliser le signe de paix, je peux cliquer dessus et ils vous donnent le peu de code que vous pouvez copier.
C'est donc une icône avec une classe égale à f a pour le plaisir.
Impressionnant.
Et puis F.A. tirez le nom de l'icône.
Remplacer simplement l'icône de caméra avec ceci donc il aura un grand signe de paix sauvera et rafraîchira.
Et nous avons un signe de paix.
Alors fun awesome est assez génial.
C'est vraiment populaire.
Beaucoup de grandes icônes que vous pouvez voir à peu près n'importe quelle icône que vous auriez jamais besoin.
Ils ont un tas de ceux standard.
Pause bouton de lecture.
Avancer vers l'arrière différentes icônes pour la technologie et différentes icônes Internet.
Mais ils ont aussi quelques plus amusants comme les signes de paix.
Et je pense qu'ils ont aussi une main de Spock Yep there we go.
Ainsi vous pouvez utiliser n'importe lequel de ces juste comme vous utilisez n'importe quelle autre police.
Donc, si vous voulez changer la couleur que vous venez de changer la propriété de couleur si vous voulez changer la taille.
Vous changez réellement la taille de police.
Donc, je vais utiliser cette recherche rétro caméra pour que de nouveau qui est rétro tableau de bord de caméra donc j'ai besoin de faire un tableau de bord tiret retro et économiser de rafraîchir et nous obtenons que la caméra rétro.
Très bien, nous avons fini avec la galerie.
Mis à part réellement changer l'image que vous êtes autre que je vais faire dès que je termine cette enveloppe.
Vous ne voulez probablement pas regarder de toute façon, mais au cas où vous le feriez, je l'inclurai à la fin.
Donc, nous avons assez de Bartra ici fait un petit changement qui était nous utilisons maintenant très inverse qui est la façon dont nous avons obtenu la barre de navigation en noir et blanc.
Mais alors nous avons réellement changé des couleurs de toute façon donc il n'a pas vraiment d'importance.
Et puis nous avons également utilisé la barre de navigation fixe haut qui est la façon dont il reste en haut.
Nous utilisons un système de grille ici et ensuite nous utilisons un jumbotron.
J'ai introduit glyph un concept construit dans les icônes Bootstrap qui sont relativement limitées.
Il ya la plupart des choses que vous utilisez, mais parfois ils n'ont pas quelque chose ou parfois vous préférez simplement la façon dont les icônes amusant fun regarder amusant.
Awesome est certainement plus populaire que le spectacle de nourriture avec des noix de pécan et l'autre chose nouvelle que je vous ai montré était la classe de vignette que vous pouvez juste mettre autour d'une image et il restreindra cette image dans une grille et ajouter cette belle petite frontière ici.
Et enfin, nous avons parlé de la spécificité et de la façon dont nous avons dû combattre les styles bootstrap si nous voulions changer la couleur de la couleur d'arrière-plan.
Voulez-vous changer la couleur de fond de Nav. Ou la couleur de police pour les liens et aussi la couleur de la Nev.
Marque ici.
OK, c'est ce qui se passe dans la prochaine vidéo.
Je vais vous montrer comment nous pouvons faire une page de destination avec bootstrap.
Et comme je l'ai promis, je vais maintenant copier et coller ces liens d'image pour faire neuf images différentes ici.
Donc, si c'est quelque chose que vous voulez voir traîner pendant la minute ou deux à venir.
D'ACCORD.
Donc, je vais juste diviser l'écran et je vais copier certains de ces sur ce premier et je vais simplement remplacer celui-ci ici et puis je vais faire le prochain.
Ancien lieu.
Celui-ci ici.
Et puis le prochain je suis sûr que c'est rive et je vais continuer sur la ligne juste comme ça.
Très bien, nous sommes passés à mi-chemin.
Nous nous rapprochons et le dernier, je pense que nous l'avons fait, disons, assurez-vous que tout semble bon ou frais et nous avons neuf images différentes.
Impressionnant.
D'accord.
Maintenant, je suis fini.
J'espère que cette galerie d'images a été appréciée.
Je vous verrai dans la prochaine vidéo.