Notre prochain exercice porte sur les moyens d'afficher le contenu sur notre page Web.
Ils examinent comment nous pouvons inclure des tableaux dans notre page Web et comment nous pouvons les
styliser en utilisant les classes de Bootstrap pour coiffer des tables,
y compris la conception réactive des tables.
Nous allons également examiner un autre composant polyvalent
qui est disponible dans Bootstrap appelé comme une carte.
Une carte vous permet d'afficher du contenu de plusieurs millions de façons.
Nous allons donc examiner deux façons différentes d'utiliser une carte pour afficher du contenu.
Plus tard, nous verrons l'utilisation de cartes encore et encore
pour les futures conceptions de certaines parties de notre site Web.
Pour commencer, ouvrez la page aboutus.html.
Nous allons insérer une table et deux cartes
dans la page aboutus.html pour afficher une carte. Tout d'
abord, faisons défiler lentement vers le bas jusqu'à ce qu'après cette carte pour des informations de leadership,
et juste là
je vais introduire un autre div dans lequel je vais joindre la table ici.
Donc, je vais introduire une nouvelle ligne ici,
avec la classe comme ligne de contenu.
Et à l'intérieur de cette div,
nous allons introduire une colonne qui accueillera la table ici.
Donc, je vais introduire une colonne, colonne 12,
colonne sm-9 et fermer la div.
Et à l'intérieur div, laissez-moi donner un titre ici
Faits et chiffres et fermer le h2.
Juste après cela, permettez-moi d'introduire un autre div,
que les classes colonne sm et colonne sm-3 et fermer ce div là. En
ce moment, nous allons laisser la deuxième div vide.
Je vais remplir la table dans la première div ici et
ensuite nous allons jeter un oeil rapide à la table après avoir ajouté le code pour la table.
Donc ici, j'ai listé dans le code de la table.
Jetons un coup d'oeil à la table et puis nous reviendrons discuter de ce code ici.
Aller à notre page À propos sur laquelle nous avons déjà travaillé plus tôt,
après la section Corporate Leadership,
vous voyez ici une nouvelle ligne présentant le tableau.
Donc, notez comment la table est stylée,
donc nous avons l'en-tête avec un h2 inclus là,
mais nous allons nous concentrer spécifiquement sur cette table.
Donc, vous voyez que ce tableau a été stylisé
en utilisant certaines classes Bootstrap qui sont utilisées pour améliorer la table.
L' en-tête a été rendu avec un arrière-plan sombre,
puis les règles sont toutes conçues de telle sorte que les lignes alternatives soient de
couleur différente afin que vous puissiez clairement distinguer les lignes de ce tableau.
C' est ce qui, en termes Bootstrap, est appelé tableau rayé.
Voici un exemple de la façon dont vous pouvez styliser une table.
Fait intéressant, si vous regardez la même table dans un petit périphérique,
vous remarquerez que la table est toujours
visible, sauf que cette table devient maintenant défilante.
Donc, tout ce qui peut être affiché dans le contenu sera affiché et
le reste du tableau peut être défilé horizontalement en place.
C' est donc le composant réactif du support de Bootstrap pour les tables en action.
Maintenant, allons jeter un oeil au code lui-même.
Maintenant, évidemment, cette table est assez simple,
elle a un tas de lignes et quelques colonnes.
Donc, vous vous attendez à ce que j'utilise les
balises th, td et tr typiques là-bas.
En revenant au code,
vous remarquerez que j'enferme cette table à l'intérieur de
div à laquelle j'ai appliqué la table de classe responsive.
C' est donc ce qui rend cette table réactive de sorte que sur les
écrans plus petits, vous pouvez faire défiler horizontalement la table.
Maintenant, pour la table elle-même,
remarquez comment j'ai appliqué deux classes.
L' un est la classe de table,
donc cela remplace le
rendu de table par défaut sur les navigateurs en fournissant les propres classes de Bootstrap.
Et le second dit tableau rayé.
Donc, c'est ce qui conçoit une table avec des rangées alternatives dans différentes couleurs ici.
Ensuite, la tête elle-même, de
sorte que vous pouvez voir que les en-têtes décrits ici avec la classe thead-dark, de
sorte que cela rend la tête sombre.
Et puis vous verrez le tableau lui-même décrit ici avec les tags th ici.
C' est donc une définition de table standard.
Le corps de la table lui-même est l'utilisation HTML standard de tr
, et td, et th éléments que vous connaissez déjà dans html5.
Donc, c'est avec cela que la table est construite,
puis vous fermez le corps de la table. Donc c'est à ce sujet.
Donc, nous tout ce qui est unique à propos de Bootstrap lui-même est l'application de
ces classes Bootstrap spécifiques à
l'élément de table lui-même pour le style plus loin,
pour s'intégrer dans une page Web de conception Bootstrap.
Le composant suivant que je vais ajouter dans la
page aboutus.html est un composant de carte dans Bootstrap.
Le composant carte nous permet d'afficher le contenu
en le distinguant du reste de ce contenu.
Maintenant, en faisant défiler jusqu'à la première ligne
ici, nous avons notre histoire dans la deuxième utilisation div,
notez que le premier div occupe déjà col-sm-6,
le deuxième div est actuellement vide.
Donc, à cette div,
je vais ajouter dans la classe en tant que col-sm.
Par la suite, en entrant dans cette div, je vais introduire un autre div à la carte de classe ici.
Donc, à l'intérieur de ces div,
je vais construire ma carte pour afficher du contenu ici.
Donc, dans cette div, nous allons introduire un h3 que
la classe en tant que card-header bg-primary.
Donc, vous verrez que ce h3 sera affiché comme
un en-tête de carte avec cet arrière-plan comme primaire
, puis texte blanc quelle classe Bootstrap définira le texte à être de couleur blanche.
Et puis à l'intérieur de cette h3,
je vais vous présenter le titre de cette carte ici qui
est « Faits At a Regard ».
Pour que je puisse montrer du contenu à l'intérieur de cette div ici.
Maintenant, à cette carte,
je vais ensuite ajouter un autre div interne
ici avec la classe comme corps de carte,
et à l'intérieur de ce corps de carte sera
le contenu réel qui a été affiché dans cette carte.
Sauvegardons les modifications, puis allons jeter un oeil rapidement à notre page Web. En
allant sur notre page web,
nous pouvons déjà voir la carte prendre forme dans notre page web, de
sorte que vous pouvez voir que la moitié gauche est occupée par l'Histoire
et la moitié droite vous verrez la carte mise en place.
Ajoutons du contenu dans cette carte. En
entrant dans ce bloc de carte,
maintenant je vais utiliser une liste de description
et cette liste de description dans Bootstrap me permet d'
appliquer les classes de ligne et de colonne à elle et ainsi formater le contenu à l'intérieur.
Donc, à l'intérieur de cette liste de description,
je vais ajouter
dans le dt que la classe et col-6 ici,
ce qui signifie que cela va occuper six colonnes à
l'intérieur de cette liste de description qui est elle-même une ligne ici.
Donc imbriquer comme vous le voyez venir en photo ici.
Donc, à ce dt,
je vais ajouter ce titre de description ici,
et ensuite ci-dessous que j'ajouterai dans le dd avec
la classe col-6 ici et puis je peux ajouter dans un contexte ici.
Et dd ici.
Enregistrez les modifications et jetez un coup d'œil à notre carte.
Aller à notre carte, vous pouvez maintenant voir comment
la liste de description me permet d'afficher des informations.
A l'intérieur de ma carte, vous pouvez voir le côté gauche et le côté droit clairement affiché.
Ici, nous profitons de la liste de description et,
en ajoutant les informations là.
Laissez-moi finir les parties restantes ici en ajoutant le code,
puis revenez et jetez un oeil à la version finale de cette carte.
Ici, vous pouvez voir que j'ai terminé d'ajouter dans
les parties restantes de ma liste de description.
Allons jeter un coup d'œil à notre version finale de cette carte.
Jetez un oeil à la carte,
et comment elle prend forme.
Ici, vous pouvez maintenant voir comment nous pouvons utiliser une carte pour afficher
du contenu dans notre page Web et
le distinguer du reste du contenu sur la page Web.
Ainsi, une carte est un composant très polyvalent qui nous permet d'afficher du contenu comme celui-ci.
Continuons avec cet exercice,
en ajoutant une autre carte à cette page Web.
Revenons maintenant à notre page aboutus.html.
Et juste en dessous de la carte que nous avons déjà ajoutée précédemment,
je vais ajouter dans un autre div avec la classe « col-12" ici.
Et puis, à l'intérieur de cette div,
je vais construire une autre carte ici pour afficher quelques informations supplémentaires.
Donc, à l'intérieur de cette div,
je vais construire une carte avec
la classe « card-body bg-light ».
Donc, vous verrez que j'applique à la fois la carte et le corps de la carte au même div ici.
Donc, ce qui signifie que cette carte particulière ne va
pas avoir d'en-tête de carte mais contient juste le corps de la carte ici.
Et puis, aussi, le bg-light signifie que l'arrière-plan sera en couleur fanée. Un
peu d'une couleur grisâtre ajoutée à l'arrière-plan.
Donc, cela cherche également cette carte en dehors du reste du contenu ici.
Maintenant, à l'intérieur de cette carte,
je vais utiliser un code de bloc pour afficher
une petite information intéressante.
Donc, je vais utiliser un blockquote.
Ceci est aussi une balise HTML ici.
Et puis à cela, j'appliquerai la classe blockquote de Bootstrap.
Donc, Bootstrap styles ce blockquote à sa manière.
Alors fermons ce blockquote.
Et à l'intérieur de ce blockquote,
je vais inclure une citation ici.
Donc, je vais commencer par un p,
et appliquer une classe appelée mb-0.
Le mb-0 est une classe d'utilitaires fournie par Bootstrap.
Ce que cela signifie, c'est la marge de zéro.
Pour ce particulier, quel qu'il soit inclus dans cette balise p,
nous aurons une marge inférieure de zéro.
Et cela m'aide à afficher le contenu correctement ici.
Donc ici, je vais ajouter le contenu réel là,
puis fermer cette p. Donc ce p contient la citation réelle.
Maintenant, à cette citation, de
sorte que vous voyez que dans votre contenu,
vous pouvez également inclure des citations dans votre code là.
Donc, à cela, je peux également ajouter un pied de page avec la classe.
Laisse-moi pousser l'indentation du pied de page.
Donc, ce pied de page est aussi une classe que blockquote prend en charge.
Donc, tout ce que vous incluez dans le blockquote,
ainsi que le pied de page,
vous permettra d'afficher l'auteur de cette citation.
Donc, ici, je suis inclus l'auteur,
puis un de plus.
En utilisant la citation, je peux même citer la source de cette citation.
Donc vous pouvez voir ça.
Encore une fois, c'est juste une citation que j'utilise juste pour le plaisir de vous montrer,
également en même temps illustrant,
comment le blockquote fonctionne,
et aussi comment nous pouvons créer un autre type de carte dans Bootstrap.
Donc, avec cela, nous avons ajouté dans le code pour afficher le blockquote ici.
Alors laissez-moi voir si cela change,
puis nous irons voir comment cette citation est affichée sur notre page Web.
Aller au navigateur, dans notre page,
vous pouvez voir que notre histoire et les faits en un coup d'œil sont affichés côte à côte.
En dessous, j'ai ce long contenu ici.
Jetons un coup d'oeil à la même page dans un très petit écran.
Donc, dans un très petit écran,
vous pouvez voir que l'histoire et les faits sont empilés sur le dessus,
et la citation est juste en bas ici dans sa propre carte.
Ainsi, vous pouvez voir deux cartes,
une en dessous de l'autre ici,
puis la table elle-même affichée en bas.
Donc, la table elle-même est une table défilante ici.
Donc, avec cela, nous terminons cet exercice.
Dans cet exercice,
nous avons appris comment nous pouvons utiliser des tableaux et des cartes pour afficher du contenu dans notre page Web.
Maintenant que nous avons terminé cet exercice,
c'est le bon moment pour faire un commit git.