Nous continuerons avec l'exercice de la grille d'amorçage
que nous avons commencé lors de l'exercice précédent.
Nous allons faire quelques choses supplémentaires à notre
page index.html afin d'améliorer sa mise en page.
Nous allons utiliser des classes CSS personnalisées et ajouter de la couleur
à notre page index.html en utilisant des classes CSS personnalisées.
La prochaine chose que je vais faire est de descendre au pied de page et pour cet UL ici,
vous remarquerez que cette liste lorsque vous regardez
notre page Web est affichée dans la page Web en utilisant cette liste à puces ici.
Je ne suis pas trop content de cette liste à puces,
je veux supprimer ces puces et ensuite simplement les montrer comme seulement les liens là-bas.
Donc, pour ce faire, je vais utiliser un autre style de liste appelé comme
list- non stylé et l'appliquer à cette balise UL là.
Pour revenir à notre page Web,
à cette balise UL dans le pied de page,
je vais appliquer la classe comme list-unstyled,
et cela supprimerait les puces en face de ces liens là-bas.
Maintenant, laissez-moi ajouter quelques classes CSS personnalisées à la page index.html.
Pour ce faire, nous allons maintenant créer un dossier ici et le nommer comme dossier CSS ici.
À l'intérieur du dossier CSS,
je vais créer un nouveau fichier et nommer le fichier comme styles.css.
Maintenant, à l'intérieur du fichier styles.css,
je peux maintenant ajouter quelques classes CSS afin de styliser notre page.
Permettez-moi d'ajouter quelques classes CSS ici.
Donc, j'ajouterais ma première classe en tant qu'en-tête de ligne.
Donc, comme le nom l'indique,
cette classe que j'applique à l'en-tête.
Et puis, j'appliquerais la marge comme
zéro pixel auto
, puis rembourrage comme zéro pixel auto.
Donc, c'est pour l'en-tête de ligne.
Donc, je vais avoir zéro marge et zéro remplissage pour l'en-tête de ligne.
Et puis pour le contenu de la ligne,
donc je vais ajouter une classe CSS de plus appelée row-content.
Et puis pour cela, je vais ajouter la marge zéro pixel auto,
puis le rembourrage l'avoir à 50 pixels,
zéro pixel, 50 et zéro pixel.
Ensuite, je vais ajouter une bordure
au bas de ma ligne ici.
Et puis, la frontière, je vais lui donner un pixel et ensuite l'appeler une crête.
Et je vais définir la hauteur minimale à 400 pixels pour le contenu ici.
De cette façon, ma page web sera plus agréable à l'écran.
Maintenant, cela encore une fois, vous devez essayer de
voir jusqu'à ce que vous soyez satisfait de la façon dont la page est disposée.
Maintenant aussi, je vais inclure
une autre classe appelée comme le pied de page qui, comme vous l'avez déjà deviné,
je vais appliquer au pied de page et j'
appliquerai une couleur d'arrière-plan au pied de page comme D1C4E9.
Si vous me demandez comment j'ai sélectionné la couleur,
j'ai juste regardé la couleur et ensuite j'étais content de cette couleur.
Vous pouvez choisir n'importe quelle couleur que vous voulez appliquer,
mais cette couleur semble être bonne pour moi.
Donc, j'ai ajouté cette couleur.
Et pour le rembourrage, pour le pied de page,
j'ajouterais 20 pixels et zéro pixels.
Maintenant, une fois que j'ai ajouté ces styles à mon fichier CSS,
permettez-moi d'appliquer le fichier CSS à la page index.html.
Je vais à la page index.html.
Évidemment, j'ai besoin d'utiliser ce fichier CSS dans ma page index.html.
Donc, juste après le fichier CSS bootstrap,
je vais faire un lien et une feuille de style,
et c'est le fichier style.css là-bas. C'
est donc là que mon fichier CSS est stocké.
Donc, je vais inclure cela dans ma page index.html.
Maintenant, je vais aller dans le corps et appliquer les classes que je viens de créer.
Donc, en allant à l'en-tête,
j'appliquerai la classe d'en-tête de ligne à la div dans l'en-tête.
Ensuite, pour le contenu,
j'appliquerais les classes de contenu de ligne aux lignes là-bas.
Ainsi, aux trois lignes du contenu,
j'applique la classe de contenu de ligne, puis je descends au pied de page,
à la balise de pied de page,
j'appliquerai le pied de page de classe ici,
puis j'enregistrerai les modifications.
Allons jeter un coup d'oeil à cette page maintenant.
En accédant à votre page Web,
nous commençons déjà à voir quelques changements intéressants à la page Web.
Donc, vous pouvez maintenant voir que le contenu de
la page Web a été mis en page un peu plus propre.
C' est la bordure inférieure que nous avons ajoutée au contenu de la ligne, de
sorte que vous pouvez voir qu'il y a assez de séparation entre les lignes bien que
le contenu des lignes soit toujours positionné vers le haut dans les lignes, de
sorte que vous avez ces trois lignes, puis regardez le pied de page,
le pied de page a maintenant acquis la couleur d'arrière-plan que j'ai appliquée,
et remarquez comment les liens sont stylés avec la liste-déstylée sur le côté gauche ici.
Nous n'avons pas encore terminé, nous avons dû faire quelques changements supplémentaires à la page index.html,
puis revenir et jeter un oeil au résultat final de cet exercice.
Pour revenir à votre éditeur,
je vais ajouter quelques classes CSS supplémentaires dans ma structure de style,
c'est un fichier, donc je vais y aller et ajouter une classe appelée Jumbotron.
Donc, vous verrez que nous avons déjà appliqué le Jumbotron à notre en-tête là-bas.
Maintenant, si j'ajoute plus de propriétés à cette classe Jumbotron ici,
cela sera appliqué au Jumbotron,
en plus du Jumbotron standard par défaut que bootstrap inclut déjà.
Je vais ajouter quelques choses,
je vais ajouter un rembourrage de
70 et 30 pixels sur son environnement,
puis une marge de zéro pixel tout autour,
et je vais définir l'arrière-plan de ceci à 9575CD.
C' est un peu d'une couleur pourpre plus foncée qui semble aller très bien sur le Jumbotron.
Encore une fois, par essai et erreur,
j'ai sélectionné cette couleur,
ainsi que la couleur du texte comme blanc floral.
Donc, pour le Jumbotron,
nous allons appliquer ces classes, et aussi,
je vais appliquer une autre classe à la classe d'adresse.
Nous avons une adresse dans le pied de page,
donc je vais changer la taille de police de cela à 80 pour cent,
une police légèrement plus petite que la police normale
, et la marge, je vais lui donner un pixel zéro
, et la couleur, je vais utiliser zéro F,
zéro F, zéro F,
puis enregistrer les changements.
Donc, couple plus de classes CSS ajoutées,
basculant vers index.html.
Ce que je vais faire maintenant,
c'est d'aller aux lignes de contenu, puis
je vais essayer de positionner ce contenu au milieu,
verticalement dans cette rangée.
C' est là que je vais prendre l'aide de
l'alignement vertical pris en charge par la grille d'amorçage à travers le support Flexbox.
Pour ce faire, je dirais align-items-center,
donc c'est l'autre classe que j'ai besoin d'ajouter, align-items-center.
Et je vais ajouter cela aux deux lignes restantes aussi,
align-items-center sur la deuxième et la troisième ligne,
et cela devrait faire une justification verticale du contenu des lignes.
On verra le résultat dans une minute.
Descendre au pied de page.
Dans le pied de page, vous voyez que nous avons utilisé
la colonne auto pour ce contenu copyright là-bas.
Maintenant, je vais positionner cela au milieu horizontalement en
utilisant cette classe justify-content-center,
donc il y a un contenu justifié et quelques autres classes là-bas.
Je vais utiliser la classe justify-content-center pour cela.
Cela positionnera essentiellement cette colonne au centre de la ligne là.
Cela s'applique à cela, et puis,
un petit changement que je vais faire,
est à cette div interne là,
je vais appliquer une classe comme centre de texte à cela, de
sorte que ces liens soient centrés sur l'écran.
Avec ces changements, allons jeter un oeil à la page web,
à la fin de cet exercice.
Aller à notre page web,
notre page web commence déjà à paraître encore mieux maintenant,
donc vous pouvez maintenant voir que le Jumbotron est maintenant stylé avec une nouvelle couleur de fond,
qui est un peu violet foncé là-bas,
et le lettrage est maintenant en couleur blanche florale,
un peu en retrait là,
puis vous pouvez maintenant voir que le contenu des lignes de contenu est maintenant centré verticalement,
pour les trois lignes de contenu.
C' est l'utilisation du centre align-items-center que nous avons appliqué aux lignes là-bas.
Ensuite, en allant au pied de page,
vous pouvez maintenant voir que ce copyright est maintenant justifié au centre de l'écran.
Regardez comment les liens ici ont été centrés.
J' ai réalisé que je veux également positionner ce centrage vertical sur cette ligne particulière,
alors allons-y et appliquons une classe de plus pour déplacer cela
au centre de cette ligne particulière verticalement.
Donc, pour ce faire, revenir à l'index.
html, dans le pied de page de cette colonne particulière qui contient ceux-ci,
je vais appliquer la classe comme align-self-center.
Cela devrait être appliqué à la div qui utilise la classe de colonne.
Avec cela, ce contenu particulier sera aligné au centre de la ligne.
Le contenu restant restera toujours en haut.
Jetons un dernier coup d'oeil au pied de page. En
accédant au pied de page de notre page Web,
vous pouvez maintenant voir comment cela a été positionné verticalement au centre.
Ces deux morceaux de contenu sont toujours alignés sur le haut de la ligne,
c'est bien parce que cela semble bien là-dedans,
mais celui-ci, je l'ai fait glisser verticalement vers le centre de cette rangée particulière.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons vu l'utilisation de classes CSS personnalisées,
et avons également utilisé certaines des classes pour
justifier le contenu horizontalement et verticalement dans nos lignes.
C' est un bon moment pour vous de faire un bon commentaire avec le message,
grille Bootstrap, deuxième partie.