1 00:00:00,230 --> 00:00:03,290 Savoir tout ce dont nous avons vraiment besoin de se concentrer sur les couleurs. 2 00:00:03,300 --> 00:00:05,160 Commençons par un jumbotron. 3 00:00:05,460 --> 00:00:37,880 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. 4 00:00:37,980 --> 00:00:43,010 C'est en fait une police de sorte que vous pouvez changer la couleur de celui-ci en utilisant la propriété de couleur. 5 00:00:43,020 --> 00:00:45,950 Maintenant, abordons la barre de navigation qui est un peu plus délicate. 6 00:00:46,110 --> 00:00:47,730 La couleur de fond n'est pas mauvaise. 7 00:00:47,740 --> 00:00:53,280 Tout ce que nous devons faire est de sélectionner la barre de navigation Inv. Ou nous pourrions faire. 8 00:00:53,340 --> 00:01:08,210 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. 9 00:01:08,210 --> 00:01:09,830 Et vous pouvez voir qu'il change d'être bleu. 10 00:01:10,020 --> 00:01:15,900 Mais pour changer la couleur ici, je veux qu'ils soient blancs plutôt que gris qu'ils sont. 11 00:01:15,900 --> 00:01:22,800 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. 12 00:01:22,800 --> 00:01:23,980 Alors je vais vous montrer ce que je veux dire. 13 00:01:24,030 --> 00:01:28,070 Couleur de la marque d'ancrage blanche. 14 00:01:28,150 --> 00:01:29,630 Retourner. 15 00:01:29,910 --> 00:01:35,430 Il ne prend pas effet et c'est une grande utilité pour l'inspecteur si nous l'inspectons. 16 00:01:35,610 --> 00:01:36,880 Jetez un oeil sur ce qui se passe. 17 00:01:37,260 --> 00:01:43,080 Donc nous pouvons voir que notre couleur blanche est rayé et la couleur est attribuée ici. 18 00:01:43,410 --> 00:01:50,050 Cette couleur de ligne est ce gris et si nous le décochons ils retournent à être le blanc que nous voulons qu'ils soient. 19 00:01:50,490 --> 00:01:53,280 Et c'est parce que c'est un sélecteur plus spécifique. 20 00:01:53,460 --> 00:01:56,290 Si vous pouvez réfléchir à cette leçon que j'ai faite sur la spécificité. 21 00:01:56,520 --> 00:02:06,530 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. 22 00:02:06,630 --> 00:02:08,190 C'est plusieurs classes. 23 00:02:08,190 --> 00:02:12,330 N'oubliez pas que chacun d'entre eux est dix fois plus spécifique qu'une simple balise d'ancrage. 24 00:02:12,900 --> 00:02:19,540 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. 25 00:02:20,280 --> 00:02:25,910 Donc, nous allons dans ici pour coller cela et ensuite changer de couleur pour être blanc. 26 00:02:25,950 --> 00:02:29,560 Donc nous allons juste passer outre le schlechter exactement le même que bootstrap avait. 27 00:02:29,610 --> 00:02:37,370 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. 28 00:02:37,650 --> 00:02:41,050 Enfin, nous allons faire la même chose pour la marque nav bar. 29 00:02:41,670 --> 00:02:45,490 Donc, comme vous pouvez le voir, c'est à l'intérieur de nav marque de tableau de bord. 30 00:02:45,960 --> 00:02:59,800 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. 31 00:02:59,820 --> 00:03:11,700 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. 32 00:03:11,700 --> 00:03:17,770 Maintenant, si Bar marque à l'intérieur de la barre de navigation Inv. Donc nous pouvons aussi simplement voler cela et écraser cela. 33 00:03:17,970 --> 00:03:21,500 Donc, nous avons juste besoin de nav .. 34 00:03:21,930 --> 00:03:23,220 Maintenant pour notre marque. 35 00:03:23,280 --> 00:03:32,580 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. 36 00:03:32,700 --> 00:03:36,280 Donc, parce que la nôtre vient en second ils vont sortir sur le dessus. 37 00:03:36,300 --> 00:03:41,100 Ils vont gagner remonter rafraîchir et ne jamais aller. 38 00:03:41,100 --> 00:03:42,530 Nous avons la plupart des styles fait. 39 00:03:42,630 --> 00:03:51,600 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. 40 00:03:52,740 --> 00:04:05,510 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. 41 00:04:05,520 --> 00:04:07,000 J'espère que vous pouvez le voir changer. 42 00:04:07,110 --> 00:04:08,200 Il a juste changé. 43 00:04:08,200 --> 00:04:10,990 C'est un gris un peu plus bleu. 44 00:04:11,040 --> 00:04:12,500 Alors testons tout. 45 00:04:12,720 --> 00:04:16,080 Redimensionnez le travail de la barre NAV. 46 00:04:16,170 --> 00:04:18,720 Le Javascript fonctionne très bien. 47 00:04:18,720 --> 00:04:19,740 Voilà. 48 00:04:19,830 --> 00:04:21,400 Tout semble bon. 49 00:04:21,420 --> 00:04:24,870 La dernière chose que je vais vous montrer est comment nous pouvons utiliser une icône différente ici. 50 00:04:25,140 --> 00:04:31,860 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. 51 00:04:31,860 --> 00:04:37,520 Bien plus que construit dans Bootstrap avec des icônes pour que vous puissiez y accéder à Funt awesome. 52 00:04:37,610 --> 00:04:38,390 Ne l'attrape pas. 53 00:04:38,430 --> 00:04:40,890 Je sais que je suis sur la page d'accueil ici. 54 00:04:41,280 --> 00:04:47,220 Et si nous cliquons sur les icônes il ya plus de 580 icônes différentes, vous pouvez les voir tous ici. 55 00:04:47,550 --> 00:04:53,580 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. 56 00:04:53,670 --> 00:05:01,870 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é. 57 00:05:02,100 --> 00:05:05,180 Mais avant de pouvoir utiliser l'un d'entre eux, nous devons l'installer. 58 00:05:05,400 --> 00:05:07,750 Donc, si vous allez à commencer. 59 00:05:07,800 --> 00:05:14,160 Ils ont un CDN agréable que vous pouvez simplement copier et juste mettre cela à l'intérieur de votre application. 60 00:05:14,160 --> 00:05:18,650 Donc, nous allons faire que le haut payer soudainement. 61 00:05:19,140 --> 00:05:24,190 Et maintenant, nous pouvons utiliser des icônes amusantes impressionnantes et c'est vraiment très facile. 62 00:05:24,330 --> 00:05:35,100 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. 63 00:05:35,100 --> 00:05:38,300 C'est donc une icône avec une classe égale à f a pour le plaisir. 64 00:05:38,310 --> 00:05:38,660 Impressionnant. 65 00:05:38,670 --> 00:05:42,010 Et puis F.A. tirez le nom de l'icône. 66 00:05:42,990 --> 00:05:51,870 Remplacer simplement l'icône de caméra avec ceci donc il aura un grand signe de paix sauvera et rafraîchira. 67 00:05:52,380 --> 00:05:53,640 Et nous avons un signe de paix. 68 00:05:53,850 --> 00:05:55,820 Alors fun awesome est assez génial. 69 00:05:55,830 --> 00:05:57,110 C'est vraiment populaire. 70 00:05:57,120 --> 00:06:01,970 Beaucoup de grandes icônes que vous pouvez voir à peu près n'importe quelle icône que vous auriez jamais besoin. 71 00:06:01,980 --> 00:06:03,620 Ils ont un tas de ceux standard. 72 00:06:03,690 --> 00:06:04,940 Pause bouton de lecture. 73 00:06:04,950 --> 00:06:09,400 Avancer vers l'arrière différentes icônes pour la technologie et différentes icônes Internet. 74 00:06:09,480 --> 00:06:12,260 Mais ils ont aussi quelques plus amusants comme les signes de paix. 75 00:06:12,320 --> 00:06:16,090 Et je pense qu'ils ont aussi une main de Spock Yep there we go. 76 00:06:16,380 --> 00:06:19,460 Ainsi vous pouvez utiliser n'importe lequel de ces juste comme vous utilisez n'importe quelle autre police. 77 00:06:19,500 --> 00:06:24,130 Donc, si vous voulez changer la couleur que vous venez de changer la propriété de couleur si vous voulez changer la taille. 78 00:06:24,360 --> 00:06:26,510 Vous changez réellement la taille de police. 79 00:06:26,880 --> 00:06:44,880 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. 80 00:06:44,880 --> 00:06:46,710 Très bien, nous avons fini avec la galerie. 81 00:06:46,710 --> 00:06:52,370 Mis à part réellement changer l'image que vous êtes autre que je vais faire dès que je termine cette enveloppe. 82 00:06:52,380 --> 00:06:56,310 Vous ne voulez probablement pas regarder de toute façon, mais au cas où vous le feriez, je l'inclurai à la fin. 83 00:06:56,310 --> 00:07:04,110 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. 84 00:07:04,230 --> 00:07:07,650 Mais alors nous avons réellement changé des couleurs de toute façon donc il n'a pas vraiment d'importance. 85 00:07:07,650 --> 00:07:12,380 Et puis nous avons également utilisé la barre de navigation fixe haut qui est la façon dont il reste en haut. 86 00:07:12,480 --> 00:07:16,100 Nous utilisons un système de grille ici et ensuite nous utilisons un jumbotron. 87 00:07:16,100 --> 00:07:20,960 J'ai introduit glyph un concept construit dans les icônes Bootstrap qui sont relativement limitées. 88 00:07:21,000 --> 00:07:29,000 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. 89 00:07:29,010 --> 00:07:41,700 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. 90 00:07:41,700 --> 00:07:48,520 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. 91 00:07:48,620 --> 00:07:54,180 Voulez-vous changer la couleur de fond de Nav. Ou la couleur de police pour les liens et aussi la couleur de la Nev. 92 00:07:54,210 --> 00:07:55,450 Marque ici. 93 00:07:55,620 --> 00:07:57,410 OK, c'est ce qui se passe dans la prochaine vidéo. 94 00:07:57,420 --> 00:08:00,230 Je vais vous montrer comment nous pouvons faire une page de destination avec bootstrap. 95 00:08:00,300 --> 00:08:05,590 Et comme je l'ai promis, je vais maintenant copier et coller ces liens d'image pour faire neuf images différentes ici. 96 00:08:05,760 --> 00:08:09,160 Donc, si c'est quelque chose que vous voulez voir traîner pendant la minute ou deux à venir. 97 00:08:09,660 --> 00:08:13,380 D'ACCORD. 98 00:08:15,510 --> 00:08:28,760 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. 99 00:08:29,140 --> 00:08:29,580 Ancien lieu. 100 00:08:29,580 --> 00:08:31,360 Celui-ci ici. 101 00:08:32,610 --> 00:08:47,350 Et puis le prochain je suis sûr que c'est rive et je vais continuer sur la ligne juste comme ça. 102 00:08:47,350 --> 00:08:48,660 Très bien, nous sommes passés à mi-chemin. 103 00:08:48,660 --> 00:09:11,440 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. 104 00:09:11,700 --> 00:09:12,360 Impressionnant. 105 00:09:12,660 --> 00:09:12,960 D'accord. 106 00:09:12,960 --> 00:09:14,120 Maintenant, je suis fini. 107 00:09:14,190 --> 00:09:16,020 J'espère que cette galerie d'images a été appréciée. 108 00:09:16,050 --> 00:09:17,060 Je vous verrai dans la prochaine vidéo.