Dans les conférences précédentes,
nous avons appris le design responsive et le système de grille d'amorçage.
Nous avons vu comment la grille bootstrap nous permet de concevoir des sites web réactifs.
Il est temps pour nous de passer à l'exercice suivant.
Nous allons commencer à travailler avec la page html d'index que nous avons créée dans
notre exercice précédent et appliquer les classes de grille d'amorçage pour la rendre réactive. En
regardant rapidement notre page web dans le navigateur, nous voyons que
c'est encore terrible bien que les polices se soient améliorées un peu,
et nous utilisons maintenant les polices par défaut bootstraps.
Essayons maintenant d'appliquer les classes de grille bootstrap à index.html pour améliorer sa mise en page.
Aller à la page index.html,
permettez-moi d'attirer rapidement votre attention sur cette ligne particulière dans la
page index.html que nous avons déjà inclus dans l'exercice précédent.
J' avais parlé de cette ligne,
puis nous parlions du système de grille d'amorçage.
Donc, ici, nous voyons que nous avons spécifié les balises méta avec un port de vue et le contenu, la
largeur comme largeur de l'appareil,
et l'échelle initiale un et rétrécir pour s'adapter à no.
Donc, cette balise meta nous permet de rendre
notre page web réactive en regardant le caractère du port de vue.
Aller de l'avant à l'étape suivante.
Nous allons descendre dans le corps de cette page index.html,
puis rechercher le premier div qui vient juste en dessous de la balise d'en-tête là-bas,
à ce div, vous allez appliquer le conteneur de classe.
Nous avons déjà appris sur la classe de conteneur dans la conférence précédente.
Donc, une fois que nous appliquons la classe conteneur,
puis en regardant notre page web, nous voyons
qu'une partie du contenu s'est déjà adaptée.
Regardez la différence entre le contenu ici et celui ci-dessous.
Maintenant, ce contenu ci-dessous,
est dans le pied de page de notre page index.html et ce contenu est dans l'en-tête.
Mais ce contenu au milieu est le contenu réel de notre page Web,
c'est-à-dire à l'intérieur de la div à laquelle nous appliquons le conteneur.
Donc, en appliquant la classe de conteneur, vous pouvez immédiatement voir que la largeur de la page dans
laquelle notre contenu est disposé a maintenant
diminué et que vous avez un peu d'espace supplémentaire de chaque côté,
donc avec cette largeur de conteneur étant un conteneur de taille fixe,
notre contenu sera fixé à ce largeur particulière sur
l'écran laissant suffisamment de marge de chaque côté comme espace blanc.
Appliquons la même classe de conteneur à la fois à l'en-tête et au pied de page également,
puis voyons comment le contenu change.
Pour revenir à notre page Web,
ce que je vais faire maintenant est pour le contenu interne ici,
la div interne à l'intérieur du conteneur,
je vais appliquer la classe en tant que classe de ligne ici,
à ce premier,
et je vais simplement copier ceci.
Je vais appliquer la même chose à la deuxième div ici qui est aligné pour le div,
et aussi faire défiler vers le bas et ensuite à la troisième div ici,
j'applique également la classe de ligne ici.
Donc maintenant, le contenu à l'intérieur de cette classe de conteneur externe,
est maintenant divisé en trois lignes,
donc tout ce qui est à l'intérieur ici sera une ligne,
ce qui est à l'intérieur ici,
sera la deuxième rangée et celle ici sera la troisième rangée.
Nous appliquerons plus tard les classes de colonne à cela.
Passons maintenant à l'en-tête dans le corps de notre index.html.
Et à l'en-tête, je vais appliquer une classe appelée jumbotron.
Le composant jumbotron vous permet de
distinguer le contenu à l'intérieur du jumbotron du reste de la page.
Nous verrons le résultat dans un court laps de temps lorsque nous à la page web résultante.
Maintenant, à la div à l'intérieur de cet en-tête,
je vais appliquer la classe en tant que conteneur, de
sorte que tout ce qui est à l'intérieur du contenu
sera maintenant limité par la largeur du conteneur là-bas.
De même, en descendant au pied de page ici,
dans le pied de page aussi,
le premier div à l'intérieur du pied de page,
je vais appliquer la classe en tant que conteneur.
Et la div à l'intérieur,
je vais appliquer la classe comme rangée là-bas,
à la div à l'intérieur là-bas.
Donc, cette div nous mènera tout le chemin à cette div particulière ici.
Et puis le div suivant aussi qui est juste en dessous,
je vais appliquer la classe comme ligne.
Donc maintenant mon pied de page contient deux lignes ici,
nous allons styler le contenu en utilisant la colonne, les
classes dans un court laps de temps.
Aller à l'en-tête aussi,
j'appliquerai la classe de ligne à la deuxième div à l'intérieur du conteneur div ici.
Donc, ce div qui correspond à ce que j'ai,
sera une seule ligne dans l'en-tête.
Jetons un coup d'oeil à notre page web qui en résulte. En
allant sur notre page Web,
vous pouvez maintenant voir que le contenu de l'en-tête est maintenant séparé du
reste à l'intérieur de cette boîte grise en haut.
Mais le contenu lui-même est maintenant aligné avec le contenu ci-dessous ici.
Maintenant, c'est le résultat de l'utilisation du conteneur.
En passant au pied de page,
vous pouvez maintenant voir que le contenu du pied de page est également aligné à l'intérieur du conteneur.
Mais la page n'a toujours pas l'air génial,
nous allons maintenant appliquer les classes de colonne aux divs internes maintenant.
Pour revenir à la page index.html,
nous allons maintenant commencer à appliquer les classes de colonne.
Donc, en allant à l'en-tête, à la deuxième div interne à l'intérieur du jumbotron ici,
laissez-moi appliquer une classe en tant que colonne 12, colonne sm-6.
Donc, ici le contenu de
cette première div occupera toute la ligne pour les tailles d'écran extra petites,
puis occupera la moitié de la ligne, c'est pourquoi la colonne
sm-6 pour les tailles d'écran petites à extra grandes.
Maintenant, de même pour la deuxième div ici,
bien qu'il ne contient aucun contenu là,
je vais définir les classes de colonne ici comme colonne 12, puis colonne sm.
Donc, notez qu'ici en spécifiant la colonne 12,
j'affirme explicitement que pour les tailles d'écran extra petites, quel que soit le contenu de
ce div sera empilé en dessous du contenu ici.
Et puis pour les tailles d'écran de petite à très grande taille,
ce contenu occupera la quantité restante de
colonnes dans la rangée pour les tailles d'écran de petite à très grande taille.
Donc ici, dans ce cas, puisque six colonnes sont occupées par ce contenu,
cela obtiendra les six colonnes restantes là-bas.
En descendant vers les lignes de contenu ici,
pour le contenu ici,
donc pour ce premier contenu,
qui est une étiquette ici,
je vais appliquer les classes comme colonne 12,
colonne sm-4, colonne md-3.
Donc, en indiquant que pour les tailles d'écran extra petites,
cela occupera toute la rangée, pour les petites,
il occupera des colonnes pleines,
puis pour les moyennes à extra grandes,
il occupera trois colonnes dans la rangée.
Maintenant, donc la partie restante sera occupée par le contenu ci-dessous,
donc à cela, j'appliquerai les classes en tant que col,
indiquant que cela sera empilé en dessous
du contenu ici dans les tailles d'écran extra petites,
puis je dirai la colonne sm,
ce qui signifie que cela occupera le huit colonnes restantes ici,
parce que quatre colonnes sont prises par celle-ci,
et ensuite nous dirons colonne md,
ce qui signifie que cela occupera
les neuf colonnes restantes parce que trois colonnes sont prises
pour les tailles d'écran moyennes à très grandes par le contenu ci-dessus ici.
Maintenant que j'ai défini pour la première ligne de contenu,
je vais prendre la même application de classe de colonne ici,
puis l'appliquer à la deuxième ligne ici,
et aussi à la troisième ligne de contenu ici.
De même, je vais copier celui-ci, puis appliquer la même chose
aux divs de contenu ci-dessous ici.
Donc maintenant, nous avons configuré à la fois l'en-tête et les colonnes de contenu là-bas.
Passons maintenant au pied de page.
Dans le pied de page, vous remarquerez que cette div contient trois divs internes ici,
donc pour chacun de ces trois divs internes ici,
je vais appliquer les classes de colonne correspondantes.
Donc, pour le premier,
qui contient des liens vers les différentes pages qui feront partie de ce site,
je vais appliquer une classe de colonne,
comme colonne quatre, colonne sm-2 ici.
Donc, pour les tailles d'écran très petites,
cela occupera quatre colonnes et pour les petites à très grandes,
il n'occupera que deux colonnes ici.
Ensuite, pour le second,
le deuxième div là-dedans, j'appliquerai les classes en tant que colonne sept.
Donc, notez que j'ai quatre ici et puis sept ici, de
sorte que total occupe 11 colonnes.
J' ai laissé une colonne vide.
Je reviendrai plus tard pour appliquer un décalage pour prendre soin de la colonne supplémentaire.
Donc c'est la colonne sept,
puis col-sm-5 à la seconde.
Donc c'est deux plus cinq, sept.
Donc, il me reste encore cinq colonnes,
que je peux utiliser pour le troisième div ici.
Maintenant, pour les tailles d'écran extra petites,
ces deux contenus seront positionnés côte à côte,
puis cette div qui contient des liens vers
un site de médias sociaux sera dans une rangée séparée empilée ci-dessous.
Mais pour les tailles d'écran de petite à très grande taille,
la première occupera deux colonnes,
la seconde occupera cinq et le reste sera
pris en charge par les liens de médias sociaux ici.
Donc pour le troisième,
je vais appliquer la classe
comme col-12 col-sm-4 ici.
Donc col-12 col-sm-4, ce qui signifie que cela occupera
un ensemble séparé de 12 colonnes
empilées en dessous du contenu précédent pour les tailles d'écran très petites,
mais pour les petites à très grandes, il occupera quatre colonnes.
Donc nous voilà quatre plus cinq,
neuf plus deux 11.
Donc, une colonne reste encore pour les petites à très grandes.
Donc, c'est comme ça que je vais appliquer la colonne la plus proche de cela.
Maintenant, nous avons encore celui ci-dessous où nous contiendrons les droits d'auteur à cela.
Je vais appliquer la classe en tant que colonne automatique,
ce qui signifie que ce contenu occupera
juste assez de colonnes comme l'exige le contenu là-bas.
Plus tard, vous verrez que je vais positionner ce contenu au centre de
l'écran en utilisant ainsi une autre classe CSS bootstrap.
Nous y reviendrons dans le prochain exercice.
Donc, avec cela, nous avons appliqué diverses classes de colonne à l'en-tête,
le contenu et le pied de page.
C' est un bon moment pour nous d'enregistrer les modifications, puis aller
jeter un oeil à la page indexée ou HTML mise à jour. En
regardant notre page index.html,
vous remarquerez comment dans l'en-tête qui est le Jumbotron,
le contenu occupe maintenant seulement la moitié de l'écran là-bas.
L' autre moitié de l'écran de cette ligne particulière est maintenant laissée vide.
En descendant aux lignes de contenu,
vous voyez que l'étiquette sur le côté gauche occupe
trois ou quatre colonnes en fonction de la taille de l'écran utilisé,
et le reste étant occupé par le reste du contenu.
Donc, ici, nous avons une rangée,
la deuxième rangée, et la troisième rangée.
Et puis le pied de page ici vous pouvez voir que les liens sont sur le côté gauche,
les autres au milieu,
puis les liens de médias sociaux sur le côté droit.
Donc, c'est pour un écran de taille moyenne.
Maintenant, si vous voulez regarder la même vue pour une taille d'écran extra petite ou petite,
si vous utilisez Chrome,
alors Chrome a les outils de développement que vous pouvez
activer en cliquant sur les outils de développement de vue,
et lorsque les outils de développement viennent,
vous remarquerez, laissez-moi réduire la taille ici.
Vous remarquerez ce petit aux fenêtres là-bas.
Donc, en cliquant sur ce qui va activer la vue responsive pour ces sites là.
Donc, vous pouvez voir que ici la vue de cette même page web sur un pixel à site,
qui est 411 par 731 en mode portrait,
ce qui correspond à une taille d'écran extra petite, de
sorte que vous pouvez voir comment le contenu est disposé.
Ainsi, vous pouvez voir le contenu Jumbotron
ici, puis la partie restante du contenu ci-dessous.
Et puis jusqu'au pied de page.
Ainsi, dans le pied de page, vous pouvez voir comment les liens et l'annonce ont été disposés côte à côte.
Réduire maintenant la taille de l'écran afin que nous puissions voir comment ce pied de page est disposé ici.
Donc, la partie restante, vous avez les liens sur le côté gauche,
vous avez l'adresse sur le côté droit,
puis les liens de médias sociaux ci-dessous dans une rangée séparée ici,
puis le droit d'auteur en bas là.
C' est donc la vue intéressante que nous voyons pour les tailles d'écran extra petites.
Pour revenir à notre code ici,
je vais maintenant appliquer les classes d'ordre et de décalage à
ce contenu afin d'afficher le contenu d'une manière légèrement différente.
Donc, en allant à la ligne de contenu ici,
pour les deux divs ici qui contiennent le contenu,
je vais appliquer les classes comme
order-sm-last pour la première ligne ici.
Et puis pour celui-là en bas, je vais appliquer l'ordre sm d'abord à la ligne en bas ici.
Donc, ce qui signifie que lorsque ce contenu est affiché,
ce contenu sera tiré sur le côté gauche de l'écran, puis
cette colonne sera poussée vers le côté droit de l'écran.
Donc, cela sera commandé sur le côté droit et cela sera commandé sur le côté gauche.
Comme je l'ai expliqué sur les clauses d'ordre dans la conférence précédente.
De même à partir de la deuxième ligne,
je vais le laisser en tant que tel mais à partir de la troisième ligne, je vais appliquer
le même ensemble de classes d'ordre.
Donc, je vais aller à la troisième ligne ici,
puis appliquer l'order-sm-last à celui-ci,
et ensuite j'appliquerai l'order-sm-first à celui-ci.
Et donc celui-ci sera à nouveau réorganisé de
telle sorte que ce contenu apparaîtra sur
le côté gauche et ce contenu apparaîtra sur le côté droit.
C' est juste une façon de positionner le contenu d'une manière un peu plus intéressante.
Maintenant, en descendant dans le pied de page ici,
maintenant je vais appliquer une classe de décalage ici.
Notez donc que j'ai mentionné que ces deux colonnes occuperont quatre plus sept, 11.
Donc, une colonne est restée.
Donc, je vais appliquer une classe offset-1 à celle-ci.
Donc, ce qui signifie que ce contenu sur cette div sera poussé juste par une colonne ici.
De même, puisque je l'ai dit offset un,
cela sera appliqué à extra petit tout le chemin jusqu'aux tailles d'écran extra grand.
Et c'est donc l'utilisation de la classe offset.
Alors maintenant que nous avons fait les changements,
sauvegardons les changements et puis allons jeter un oeil à notre page Web dans le navigateur.
Pour revenir à ce navigateur,
vous voyez maintenant comment l'en-tête est comme avant,
mais dans la première ligne de contenu,
vous voyez que ce contenu a été poussé vers
le côté gauche et l'étiquette vers le côté droit.
La deuxième rangée est différente a été maintenue comme avant.
Mais pour la troisième, vous verrez que cela a été
poussé vers la droite et cela a été poussé vers la gauche.
C' est donc l'utilisation de la classe order-sm-last et order-sm-first est là.
Maintenant, en allant au pied de page,
vous voyez maintenant que le contenu de la première div ici a été poussé à droite par une colonne,.
Vous pouvez donc voir qu'il y a une colonne d'espaces ici,
et cela n'est pas poussé à droite et les autres ont été formatés en conséquence.
Donc, avec cela, nous complétons les modifications apportées
à notre page index.html ou page supplémentaire pour cet exercice particulier.
Avec cela, nous complétons cet exercice particulier.
Dans cet exercice, nous avons examiné l'utilisation des
classes de conteneur, de ligne et de colonne afin de concevoir notre page Web un peu plus agréable.
Dans la deuxième partie de l'exercice qui suivra,
nous allons en ajouter d'autres pour essayer d'améliorer la façon dont ces pages Web sont rendues.
Ce n'est toujours pas à ma satisfaction.
De toute évidence, il y a encore des possibilités d'amélioration.
Cela peut être un bon moment pour vous de faire un commentaire git avec
le message Bootstrap Grid Part One.