Maintenant, nous allons changer la couleur du texte de la H-1 et l'âge 3 maintenant est que la couleur bootstrap par défaut sombre entrera ici et nous pourrions faire H-1 couleur blanc et H-3 couleur blanche et rafraîchir.
Et nous obtenons du texte blanc comme ça.
Mais nous pouvons aussi faire si est de combiner ces deux parce qu'ils sont identiques et H-1 virgule H-3 et qui fera les deux de ces blancs.
Chaque fois que nous avons une virgule, il suffit de sélectionner différents groupes.
Donc tous les jumeaux tous les trois ans et il ressemble exactement la même chose.
Mais nous pouvons même simplifier ce plus et tout simplement assigner tout dans le corps à la couleur blanche.
Et vous pourriez penser qu'il y aurait un problème pourrait changer ou bouton peut changer ou barre de navigation, mais rappelez-vous que ceux-ci sont plus spécifiques.
Nous avons des classes de Bootstrap qui font cela par rapport à ceux-ci sont tout simplement H-1 et H-3, ils n'ont pas de classes ou d'ID et ils sont plus faciles à ignorer avec leurs propres styles en définissant la couleur du corps à blanc le H1 Et l'âge trois hérité de cette couleur et tout le reste a fait aussi bien.
Il a été écrasé.
Donc, si nous inspectons, disons ce bouton et nous jetons un coup d'oeil.
Lorsque nous le sélectionnons et que vous voyez que la couleur est réglée sur cette couleur est 3 3 3 par la classe Bouton par défaut.
Mais si nous continuons à faire défiler vers le bas, vous verrez que le corps ici mis la couleur au blanc et il arrive juste d'être rayé.
D'accord.
Encore une fois, ils ont dit qu'ils étaient tous deux blancs.
Maintenant, travaillons sur la taille de la police.
Il en est de même pour H-1.
Nous voulons qu'il soit plié ce qu'il n'est pas actuellement.
Donc cela doit être audacieux et je veux qu'il soit de 5 cms qui est cinq fois plus grand rappelez-vous que l'élément parent afin que nous allons sélectionner chacun et nous allons lui donner un poids de la police de 700 qui est la façon dont nous utilisons l'actualisation en gras .
Vous pouvez le voir en gras.
Maintenant, nous allons aussi faire beaucoup plus grand pour la taille de police 5 E-M.
Maintenant, revenez en arrière et nous y allons.
Donc ça regarde de plus près.
Maintenant, ce rapport entre le H1 et le H-3 semble exactement le même.
Nous n'avons pas besoin de faire quoi que ce soit pour le H-3 doit maintenant obtenir l'image de se comporter de la façon dont nous le voulons.
Et pour ce faire, je vais vous montrer quelque chose que nous n'avons pas vu auparavant.
Je vais déplacer l'obscurité vers la droite et si je l'inspecte l'élément vieilli ou le corps, ils verront que les deux s'arrêtent avant la fin de la page.
Donc, ici.
C'est la fin de l'âge de mon document.
Donc, quand je dis à mon image de couvrir le corps et j'ai dit que c'est la taille du fond à couvrir et position de fond pour être centre, il prend en compte la taille du corps et lorsque le corps se termine ici, il se comporte différemment.
Ce que nous allons faire pour résoudre ce problème est de donner à l'élément HTL une hauteur de 100 pour cent, ce qui signifie prendre jusqu'à 100 pour cent du conteneur qui est juste la fenêtre entière du document.
Hauteur masculine de 100 pour cent et nous reviendrons.
Rendons-le plein écran maintenant et actualiser.
Et notre image fonctionne comme on s'y attend et je me rétrécis.
Et ça me semble bien aussi.
Maintenant, nous avons deux choses principales à se concentrer sur.
Le premier est le H.R ..
C'est trop large pour nous censés être beaucoup plus petit.
Et puis je veux aussi me concentrer sur la police ici.
Bien commencer à cueillir l'œuvre d'art et tout ce que nous voulons faire est de lui donner un avec de 400 pixels.
Donc, dans notre C Ss Nous allons sélectionner h le faire au bas avec est de 400 pixels.
Voilà.
Une autre chose que je vais faire, c'est un peu sournois que vous n'avez peut-être pas remarqué que je vais aller ici et lui donner un Forder sur le dessus.
Un pixel solide.
Alors ils ont une couleur qui est f 8 8 8.
Et puis un fond de la frontière aussi bien qui est un pixel solide et ce sera une couleur transparente.
Zéro zéro zéro point zéro.
Donc cela ne lui donnera pas l'effet d'une ombre.
Faites donc attention.
C'est vraiment difficile à voir.
Je ne sais même pas si je vais ramasser sur le cast d'écran mais ce que nous avons est une frontière et puis juste en dessous de la frontière une ligne gris clair qui fait ressembler il ya une légère ombre il se montre un peu mieux sur le Des couleurs plus claires.
D'ACCORD.
Donc vous ne pouvez pas voir que suffisamment si vous me faites confiance ou vous pouvez vous débarrasser de l'image de fond et il sera plus facile de voir là aussi.
Ensuite, nous allons nous concentrer sur les icônes que j'ai utilisé amusant génial pour.
Alors je l'ai ouvert.
Amusement.
Impressionnant.
Je connais.
Et nous allons obtenir le CD ici aussi.
Si vous cliquez sur commencer, il ya un CDN que vous pouvez copier là-bas.
Mettez cela dans notre application et aussi juste faire que le haut sauvegarder et puis nous allons jeter un oeil à l'icône réelle.
Et le premier que nous savons que nous avons utilisé est un PA.
Et pour faire tout ce dont nous avons besoin est de haute classe ECO F A F Un tableau de bord PA.
Donc j'ai mis ça à l'intérieur du bouton.
Donc, si nous allons au bouton juste avant que je commence, j'ai ajouté que dans.
Maintenant, si nous revenons et rafraîchir, vous pouvez voir si nous avons un petit bouton là et nous avons une copie de palm après nous avons deux icônes ici pour vous inscrire et vous connecter.
Et ces deux je me rappelle ce qu'ils sont.
Je vais juste faire cela ici à côté de vous inscrire après que nous écrivons vous savez que vous voulez ajouter dans une autre icône.
Sauf cette classe de temps n'est pas F-8 PA mais F.A. dash user dash Plus qui nous donne cette icône avec le signe plus et se connecter est la même chose sans le plus.
Donc, un tiret utilisateur et nous avons ces deux icônes.
Il ya une autre chose que j'ai fait que vous n'auriez peut-être pas remarqué qui est l'ombre du texte.
Donc il ya une ombre autour de tout le texte ici et le voir il peut le voir ici.
C'est autour du H-1 et du H-3 et l'ombre de la technologie est quelque chose que nous pouvons définir avec l'ombre du tableau de bord des textes SS.
Et il y a beaucoup de choses à faire.
Donc vous pouvez voir ici nous sommes assis le décalage X le décalage y.
Alors à quelle distance des mots doit aller l'ombre.
Ensuite, nous sommes également fixer le rayon de cette flou Donc, fondamentalement, comment devrait être épaisse.
Et puis la couleur et l'ombre que j'utilise est un peu compliqué.
Il y a beaucoup de morceaux, donc je vais aller le taper un morceau à la fois dans le fichier CSSA.
Donc à l'intérieur de la div de contenu ajoutera l'ombre tableau de bord de texte et puis le premier fera.
Zero pixels 4 pixels 3 pixels et je vais le rendre vraiment évident pour commencer par le rendre rouge et si je rafraîchir il ya l'ombre que nous ajoutons d'abord.
Maintenant, allez ajouter le deuxième avec une virgule et un retrait un peu et puis nous voulons 0 pixels 8 pixels 13 pixels et puis sur orange ici et jetez un oeil à celui-là.
Vous pouvez voir que nous avons cette plus floue en dessous est orange vif et puis il ya une ombre troisième qui est de 0 pixels qui se souviennent de ce premier nombre est le décalage X, puis le décalage y 18 pixels et puis 23 pixels est le rayon et nous allons Faites-en un jaune et nous pouvons voir que nous avons l'ombre titre rouge vif.
Et puis l'orange qui est un peu plus loin.
Et puis le jaune qui est beaucoup plus flou et beaucoup plus large.
Nous voulons donc changer ces couleurs.
Nous ne voulons pas travailler avec cela.
Les couleurs sont donc un peu moins excitantes.
Le premier.
Zéro zéro zéro zéro 0,4.
Le suivant très similaire au lieu de 0,4 0,1.
Et puis un autre qui est aussi 0.1.
Ainsi en utilisant R.G. B-A nous mettons juste différentes nuances de gris.
Et voilà.
Tellement moins excitant mais j'espère que vous pouvez toujours le voir ici.
C'est beaucoup plus subtil, mais il ajoute un peu de profondeur à la page.
Génial.
Donc c'est tout ce que nous devons faire.
Permettez-moi de revenir en arrière et d'envelopper quelques choses.
Le gros point que je veux faire ici est que nous pouvons utiliser bootstrap et compter sur elle, mais nous ne sommes pas en s'appuyant sur tous ses styles.
Donc oui, nous avons gardé la barre de navigation de la même bien que dans la dernière vidéo, je vous ai montré comment vous pouvez changer la couleur de la barre de navigation, mais nous avons changé les polices, nous avons ajouté des images d'arrière-plan.
Donc, nous utilisons vraiment bootstrap que la fondation sous-jacente, puis nous ajoutons dans tous les styles sur le dessus et il n'a pas fallu beaucoup.
Mais je pense que nous avons fait quelque chose qui semble relativement respectable avec juste quelques lignes de code.
Et soyons honnêtes moitié de toute la graisse de ce Shadowline un texte juste là.
Impressionnant.
Donc, nous avons fait le site semble relativement bon.
Nous avons terminé avec bootstrap pour l'instant.
Nous passons ensuite à Javascript dans l'unité suivante qui est vraiment excitant.
Nous allons nous éloigner de créer des sites et des choses qui semblent bien pour un peu juste afin que nous puissions nous concentrer uniquement sur le Javascript.
Mais alors nous allons rapporter tout ensemble et faire de beaux sites qui font réellement des choses qui ne se contentent pas d'être jolies.
Donc c'est à venir bientôt j'espère apprécié bootstrap apprécié cette unité.
Et comme toujours je vous recommande de télécharger le code si vous avez des questions.
C'est dans la description de cette vidéo.