Lors de la conférence précédente,
nous avons appris sur le design responsive.
Nous avons également brièvement mentionné que le système de grille Bootstrap est
conçu pour prendre en charge les sites Web réactifs.
Comment la grille Bootstraps supporte-t-elle cela ?
Et qu'implique exactement la grille Bootstrap,
qui nous permet de concevoir des sites web réactifs ?
Parlons un peu plus de détails sur le système de grille Bootstrap
et comment il prend en charge la réactivité ensuite.
Nous avons vu l'utilisation de la balise meta viewport dans la leçon précédente,
lorsque nous avons fait l'exercice initial sur la configuration de Bootstrap dans notre page index.html.
J' ai brièvement parlé de cette ligne particulière dans le code à l'époque.
Essayons de comprendre pourquoi nous utilisons cela dans notre page index.html.
Ce que nous spécifions ici est que,
lorsque notre page Web est rendue par le navigateur dans un appareil particulier, alors,
leur rendu dans le navigateur prendra en compte la taille de l'écran et
adaptera automatiquement le rendu de la page à la largeur de l'écran des appareils.
De cette façon, nous avons des classes réactives,
des classes CSS intégrées dans notre infrastructure d'interface utilisateur,
alors cela garantira que notre page Web est
correctement rendue pour cette taille d'écran particulière.
C' est là que le système de grille Bootstrap vient à notre secours et
nous permet de concevoir des sites web réactifs.
Donc, encore une fois, en soulignant ce point, la
grille Bootstrap est conçue pour être réactive.
Vous avez déjà vu ce que cela signifie dans la conférence précédente,
et mobile d'abord, que nous avons déjà discuté dans la conférence précédente, puis fluide,
s'adaptant automatiquement à la largeur de l'écran.
La grille Bootstrap tire parti de la mise en page CSS flexbox.
La mise en page CSS flexbox qui est prise en charge par
les versions les plus récentes des différents navigateurs,
permet des options de mise en page beaucoup plus simples et flexibles dans CSS.
Maintenant, la discussion réelle sur le
fonctionnement de la mise en page CSS flexbox dépasse le cadre de ce cours,
nous nous limiterons à la façon dont la flexbox CSS est
exploitée par Bootstrap pour son système de grille.
Auparavant, Bootstrap avait son propre système de grille qui était antérieure à la mise en page CSS flexbox,
mais la dernière version de Bootstrap
a fait la mise en page CSS flexbox comme norme pour la grille Bootstrap.
Cette disposition flexbox peut facilement gérer le
contenu dynamique et adapter les conteneurs au contenu dynamique,
et peut également s'adapter facilement à la taille inconnue
du contenu réel inclus dans les conteneurs.
La mise en page flexbox prend également en charge la mise en page indépendante de la direction.
Ce que la disposition flexbox apporte aux grilles Bootstrap est la possibilité de
faire un alignement vertical facile du contenu dans un élément parent.
Nous verrons l'utilisation de cela dans l'exercice qui suit.
En outre, il permet de réorganiser facilement le contenu
sur différents appareils et résolutions d'écran à l'aide de requêtes multimédias.
Encore une fois, nous verrons un peu cela dans l'exercice sur la façon dont Bootstrap
tire parti de cela pour prendre en charge des méthodes intéressantes de présentation du contenu.
En outre, ce contenu lui-même,
les conteneurs de contenu peuvent également être conçus pour être des colonnes de hauteur égale de sorte que
le conteneur de contenu avec la plus grande
hauteur détermine la hauteur de tous les conteneurs restants qui sont disposés dans la même ligne.
Parlons maintenant un peu plus de détails sur la grille Bootstrap et comment cela fonctionne réellement.
La façon dont fonctionne la grille Bootstrap,
consiste à appliquer un conteneur plus à la couche la plus externe.
Nous pourrions utiliser un div pour
définir l'élément pour lequel nous appliquons la classe conteneur en général.
Le conteneur est l'unité la plus extérieure à l'intérieur de laquelle le contenu réel est exposé.
Bootstrap prend en charge à la fois la classe de conteneur qui est une disposition de largeur fixe,
ce qui signifie que le contenu lui-même est limité à une largeur fixe sur l'écran.
Cette classe de conteneur permet à cette largeur fixe de s'adapter automatiquement à
la taille de l'écran en utilisant des requêtes de média de sorte que
c'est là que la conception responsive entre dans notre sauvetage.
Plus tard, nous verrons comment ce conteneur s'ajustera à différentes tailles d'écran.
Maintenant, nous avons également la flexibilité d'utiliser dans
d'autres liquides de récipient classiques qui permettent
au récipient de s'adapter automatiquement à la taille de l'écran.
Mais le conteneur de largeur fixe,
fixe la taille de la largeur de mise en page réelle.
À l'intérieur du conteneur, le contenu sera disposé sous la forme de lignes,
donc généralement ce que nous ferions est à l'intérieur
et à l'extérieur de div auquel nous appliquons la classe conteneur,
nous inclurons une div interne à laquelle nous appliquerons la classe de ligne.
Ainsi, le contenu lui-même sera divisé verticalement en plusieurs lignes.
Et une fois que cela est divisé en lignes, à l'intérieur de chaque ligne,
vous pouvez ensuite mettre en page le contenu à l'aide de colonnes.
Ainsi, chaque ligne dans Bootstrap,
sera divisée en 12 colonnes de taille égale.
Maintenant, vous pouvez concevoir votre contenu pour occuper n'importe quel nombre de ces 12 colonnes.
Ainsi, et le fait que le contenu lui-même s'adapte à
la largeur de l'écran et la ligne elle-même étant
enfermée à l'intérieur du conteneur s'adaptera automatiquement à la largeur de
l'écran, ainsi que les colonnes,
les 12 colonnes seront déterminées.
Leurs largeurs seront déterminées par la rangée par elle-même.
Donc, ce qui signifie que pour une taille d'écran différente,
quel que soit le contenu que vous mettez en page toutes ces 12 colonnes
s'ajustera automatiquement à la largeur qui est autorisée pour le contenu.
Donc, c'est ainsi que la réactivité est
intégrée dans la façon de la grille Bootstrap de disposition du contenu.
Alors, comment dispose-t-on exactement le contenu ?
Nous en parlerons dans les prochaines diapositives.
La grille Bootstrap elle-même,
nous met à disposition cinq classes pour spécifier différentes tailles d'écran par défaut.
Il existe une classe par défaut qui cible toutes les tailles d'
écran, de extra small à extra large.
Ainsi, toute la gamme des largeurs d'écran en termes Bootstrap,
est divisée en très petites, petites,
moyennes, grandes et très grandes tailles d'écran.
Regardez ensuite comment ces différentes classes
de tailles d'écran sont déterminées en détail dans l'une des diapositives ultérieures.
Ainsi, dans votre code,
vous allez identifier la spécification de mise en page en
spécifiant sm pour la petite taille d'écran,
md pour moyenne, lg pour grande
et xl pour les tailles d'écran extra grandes.
Ainsi, lorsque vous faites la mise en page,
comme nous l'avons vu dans la diapositive précédente,
chaque ligne d'un système de grille Bootstrap est divisée en 12 colonnes.
Maintenant, nous allons mettre en page le contenu en utilisant ce qu'on appelle les classes de colonne.
Pour les classes de colonnes,
nous pouvons spécifier comment la mise en page est faite pour différentes largeurs d'écran.
Regardez les détails de ceci dans les diapositives suivantes plus tard.
Mais permettez-moi d'attirer rapidement votre attention sur la façon dont nous spécifions les tailles de colonnes.
Ils peuvent spécifier les tailles de colonne comme col,
qui est l'une des classes qu'ils diront col-sm pour
small et col-md pour medium et large et extra large et ainsi de suite.
Maintenant, ces classes de colonnes sont utilisées pour spécifier
exactement le nombre de colonnes d'une ligne que chaque élément de contenu occupera.
Comment cela fonctionne-t-il ?
On verra ça dans la diapositive suivante.
Donc, pour revenir à notre grille Bootstrap,
supposons que nous ayons un contenu et que nous voulons mettre en place la tranquillité du contenu.
Nous pouvons spécifier que ce contenu est enfermé dans une autre div,
à laquelle nous appliquons la classe de colonne,
comme par exemple, col-sm-5.
Donc, dans ce cas, ce que nous spécifions est que pour les tailles d'écran de petite à très grande taille,
ce morceau de contenu occupera cinq colonnes sur ces 12 colonnes.
Maintenant, vous allez me demander immédiatement,
qu'en est-il du smockage supplémentaire ?
S' il n'est pas explicitement spécifié pour la lockette intelligente supplémentaire
par toute la largeur des 12 colonnes,
ils peuvent spécifier explicitement à partir de
quelle plage la disposition de colonne occupera le nombre de colonnes.
Donc, dans ce cas particulier,
quand je spécifie que je les appelle seulement sm-5,
ce que je veux dire est que ce contenu particulier qui est enfermé à l'intérieur de ces div,
occupera cinq colonnes pour toutes les tailles d'écran,
de petit jusqu'à extra grand.
Maintenant, nous voyons maintenant que sur les 12 colonnes,
nous avons déjà occupé cinq colonnes.
Il reste encore sept colonnes.
Je pourrais prendre un autre morceau de contenu, puis le positionner à droite de ceci,
en défendant un autre div, puis en appliquant la colonne sm-7.
Maintenant, dans ce cas,
vous voyez que 5 plus 7 est égal à 12.
Ainsi, ces deux éléments de contenu qui sont enfermés dans les deux divs,
seront maintenant positionnés côte à côte,
et la somme totale d'entre eux occupe toute la largeur de la colonne 12.
Donc, voici comment nous pouvons spécifier et le travail avec les 12 colonnes
dans la définition de la mise en page du niveau actuel.
Avec l'utilisation de la disposition CSS flex box,
Bootstrap prend également en charge ce qu'on appelle les colonnes de mise en page automatique.
Donc, dans ce cas,
je peux simplement spécifier
la colonne sm sans spécifier combien de colonnes il est censé occuper.
Mais au cas où je spécifie trois colonnes de largeur de Doobs sm dans mon heml 5,
alors la grille de bootstrap positionnera automatiquement ce contenu à l'intérieur de ces divs
, côte à côte,
de sorte que chacun d'eux obtient un tiers de la largeur totale.
Donc, puisque nous avons 12 colonnes ici,
chacune de ces trois aura quatre colonnes chacune.
Et cela est automatiquement pris en charge par le mécanisme de mise en page des bootstraps.
Maintenant, nous pouvons spécifier explicitement
le nombre de colonnes qu'occupe un contenu particulier.
Donc, par exemple, supposons que je spécifie trois classes de colonnes,
mais la colonne du milieu je spécifie sm 6.
Ensuite, ce qui se passe est, quand bootstrap fait
la mise en page, le milieu occupera six colonnes,
puis les parties gauche et droite du contenu occuperont tout ce qui reste.
Donc, sur les 12 colonnes que nous avons,
si 6 colonnes qui occupaient par le morceau du milieu de contenu,
alors nous avons laissé avec nous 6 autres colonnes et qui seront également
divisés entre le contenu et les deux côtés de cette colonne du milieu.
Ainsi, chacun d'eux obtiendra des colonnes libres d'espace chacun.
Donc, c'est ainsi que la mise en page est automatiquement effectuée avec Bootstrap.
Dans l'exercice, nous allons voir diverses combinaisons d'utilisation de ce genre de
spécifications du nombre de colonnes que chaque morceau de contenu occupera dans la mise en page des couleurs.
Ce tableau résume la façon dont Bootstrap traite
les différentes grilles d'écran et, en conséquence, comment vous identifiez ces grilles d'écran.
Donc, comme je l'ai spécifié plus tôt,
Bootstrap divise toute la plage de largeur de l'écran en 5 classes.
Les très petits écrans sont ceux dont les grilles sont inférieures à 776 pixels. Les
petits écrans sont ceux qui se situent entre 576 et moins de 768 pixels.
Écrans moyens de 768 à 992,
grands de 992 à 1200 et tout ce qui est d'environ 1200 pixels de largeur
est traité comme un très grand écran.
Donc, c'est ainsi que la grille Bootstrap par défaut est configurée.
Maintenant, une fois que vous vous sentirez à l'aise avec Bootstrap,
vous pouvez également configurer ces divisions vous-même.
Mais pour ce cours,
nous allons rester avec la configuration par défaut prise en charge par bootstrap.
Maintenant, le comportement de la grille dans ce cas,
est que tout ce qui est prévu pour extra small,
sera horizontal à tout moment,
pour les bits plus élevés, ils seront réduits à 2start largeur,
mais horizontal autour des points de rupture.
Nous verrons comment cela fonctionne dans un court moment avec quelques exemples.
Maintenant, nous avons vu l'utilisation du conteneur dans la diapositive précédente.
Pour les petits écrans,
la largeur du conteneur est automatiquement déterminée par la largeur de l'écran.
Mais pour les petits, moyens,
grands et extra grands,
la largeur du conteneur est telle que spécifiée.
Donc, si vous utilisez le div avec un conteneur de classe,
alors pour les petits écrans, il est de 540 pixels.
Ainsi, vous remarquerez que si vous avez une largeur d'écran comprise entre 576 et 768,
votre contenu sera disposé en 540 pixels,
sera centré dans la largeur de l'écran.
Ainsi, l'espace restant sera laissé sous forme de marges de chaque côté de ce contenu.
De même, pour le moyen, il est de 720 pixels et ainsi de suite.
Maintenant, vous spécifiez le nombre de colonnes que chaque contenu occupe.
Ensuite, les préfixes de classe de colonne que vous utiliserez sont
.col pour extra small, .col-sm pour small,
tout le chemin vers extra large.
Si vous spécifiez quelque chose avec .col-md,
cela s'applique pour les écrans moyens à très grands.
Donc, chaque fois que vous spécifiez un col- et certains nombres,
cela s'applique à cette taille d'écran particulière et tout ce qui concerne cette taille d'écran.
Maintenant, dans tous les cas de taille d'écran,
le nombre de colonnes est défini comme étant de 12 colonnes.
La grille en cas de bootstrap est conçue pour être de 12 colonnes et qui est configurable,
mais la valeur par défaut est de 12 colonnes.
La raison de choisir 12 est que 12 est un bon multiple de deux, trois,
quatre et ainsi de suite.
Cela vous donne donc beaucoup de flexibilité en termes de
nombre de colonnes que vous choisissez pour mettre en page votre contenu.
Entre chaque colonne, donc si vous
disposez deux morceaux de contenu côte à côte avec leurs divs,
entre ces deux morceaux de contenu, ils seront une petite gouttière qui sera laissée.
Espace blanc vide qui sera laissé hors largeur de la largeur de la gouttière,
qui est juste 30 pixels par défaut.
Ainsi, 15 pixels proviennent d'un élément de contenu et 15 pixels d'un autre élément de contenu.
SumTotal ensemble 30 pixels d'
espace blanc seront laissés entre les deux morceaux de contenu.
Pensez à la façon dont une mise en page de colonne de journal
est faite et vous commencez à voir
la correspondance entre la disposition de la colonne de journal est faite et comment
la grille du bootstrap effectue la mise en page du contenu sur cette hauteur.
La grille de Bootastrap vous permet de faire du contenu de niveau supérieur, de
sorte que vous pouvez inclure du contenu dans le contenu, puis faire une mise en page de contenu imbriqué.
En outre, il prend en charge les décalages.
Nous verrons l'utilisation de décalages également dans quelques exemples plus tard.
Regardons donc notre premier exemple de la façon dont vous appliqueriez des classes de colonnes bootstraps,
et comment elles seraient réellement rendues sur différentes tailles d'écran.
Voici un exemple d'une situation où j'ai appliqué aux deux divs,
tiret de colonne 12, puis tiret de colonne sm trait cinq pour
le morceau rouge de contenu et pour
l'autre j'ai appliqué le tiret de colonne 12 et la colonne sm sept.
Donc, la façon dont ce contenu sera disposé est pour des écrans très petits,
les deux morceaux de contenu seront empilés l'un sur l'autre.
Donc, le rouge sera empilé sur le dessus de la mer de couleur verte.
Mais pour les écrans de petite à très grande taille,
les deux morceaux de contenu seront disposés côte à côte.
La raison en est que nous avons dit la colonne sm cinq et la colonne sm sept pour les deux.
Donc, pour les petits à très grands, ils sont disposés côte à côte de sorte
que le contenu rouge occupera les
cinq colonnes les plus à gauche et le contenu vert de mer occupera
les sept colonnes droites de votre rangée, de petits à très grands écrans.
C' est ainsi que nous pourrions spécifier la mise en page du contenu pour différentes tailles d'écran.
Bootstrap fournit également des classes supplémentaires appelées classes
de tiret d'ordre qui vous permettent de réorganiser le contenu à l'écran.
Ainsi, par exemple, si vous appliquez un ordre sm en premier,
un ordre d'une dernière classe aux divs,
comme cela est montré dans l'exemple ici, dans ce cas,
le div pour lequel vous appliquez l'ordre sm last sera poussé vers
le côté droit de l'écran et l'ordre
sm first div sera poussé vers le côté gauche de la écran.
Ainsi, l'application de ces classes d'ordre vous permet de réorganiser le contenu sur le script.
Non seulement cela, l'ordre sm vous permet également de spécifier le même ordre sm un à l'
ordre sm 12 pour spécifier l'ordre dans lequel le contenu doit être affiché à l'écran.
Ainsi, en utilisant un nombre plus grand,
vous pouvez déplacer le contenu vers le côté droit de
la ligne et un nombre plus petit déplacera le contenu vers le côté gauche de la ligne.
Nous en verrons un exemple également dans l'exercice.
Le support intéressant mixte que Bootstrap Grid apporte avec l'utilisation de
la mise en page Flexbox est l'alignement vertical du contenu.
Les versions antérieures de Bootstrap,
comme Bootstrap 3 et antérieures,
n'avaient pas la possibilité de faire l'alignement vertical du contenu.
Avec l'utilisation de la Flexbox pour la conception de la grille Bootstrap dans Bootstrap quatre,
nous obtenons la flexibilité que CSS Flexbox apporte en termes d'alignement vertical.
Donc, si vous vouliez que le contenu soit centré verticalement,
alors à la ligne,
vous appliqueriez la classe appelée « aligner les éléments centre ».
Donc, dans ce cas, quel que soit le contenu prévu,
sera disposé verticalement aligné dans cette ligne particulière.
Ainsi, le contenu qui occupe
la plus grande hauteur sera celui sur lequel les autres seront
alignés lorsqu'il est disposé dans cette ligne ou si vous préspécifiez la hauteur de la ligne,
alors tout le contenu sera centré verticalement dans cette ligne particulière là.
Non seulement cela, la grille de Bootstrap prend également en charge l'alignement horizontal du contenu.
Regardons un exemple.
Donc, si vous spécifiez votre contenu comme celui-ci.
Dites, vous avez trois colonnes et la première vous spécifiez la colonne de classe div trois,
puis la colonne du milieu, vous direz la colonne de classe div auto.
Je vais revenir à cette colonne auto dans un peu de temps.
Et le bon dit div classe colonne 3.
Donc, dans ce cas, ce que nous spécifions est que le contenu
de gauche et le contenu le plus à droite occuperont trois colonnes chacune.
Le milieu, quand je dis, « colonne auto »,
cela signifie que le nombre de colonnes que cette div particulière
occupe sera automatiquement déterminé par le contenu qui est enfermé à l'intérieur.
Donc, en fonction du contenu,
le nombre de colonnes occupées par le div s'ajustera automatiquement.
Dans ce cas particulier, dans cette mise en page,
ce contenu particulier est logé dans quatre colonnes.
Donc maintenant, vous avez quatre colonnes utilisées par le div central,
trois colonnes par la gauche et trois colonnes par la droite.
Donc, somme totale, vous avez 10 colonnes.
Donc, vous avez deux colonnes qui sont laissées vides.
Maintenant, si vous spécifiez pour la ligne,
vous spécifiez justifier le centre de contenu, alors,
tout le contenu de cette ligne particulière sera centré par
rapport à la ligne horizontale.
Vous pouvez également avoir le contenu justifié à gauche,
justifié à droite et quelques autres options.
Les détails se trouvent dans la documentation d'amorçage.
Bootstrap vous permet également de faire des décalages de colonne.
Comment cela fonctionne-t-il ? Regardons un exemple.
Dans ce décalage de colonne,
nous pouvons spécifier un morceau de contenu,
ajouter à cela si nous appliquons la classe comme tiret offset sm un trait d'union.
Ce que nous spécifions est pour les petits et les très grands écrans,
ce morceau de contenu doit être décalé à droite d'une colonne.
Ainsi, lorsque ce contenu est disposé, comme vous pouvez le voir,
la colonne la plus à gauche est vide et le contenu est décalé vers la droite d'une colonne.
Et vous pouvez mettre en page le contenu restant sur le côté droit.
Donc, somme totale, vous pouvez voir que les deux divs
occuperont 11 colonnes mais une colonne décalée vers la droite. C'
est ainsi que nous pouvons contrôler la mise en page du contenu en utilisant un décalage de colonne.
Ainsi, comme vous pouvez
le voir, en utilisant les spécifications de taille de colonne,
l'alignement vertical et horizontal,
le décalage, la poussée et la traction,
et flex premier et flex dernier,
nous sommes en mesure d'obtenir beaucoup de contrôle sur la façon dont nous mettons en page le
contenu pour différentes largeurs d'écran et tailles d'écran différentes .
Bootstrap va encore plus loin en vous permettant d'imbriquer du contenu dans les divs.
Ainsi, par exemple, si vous spécifiez deux divs,
comme vous le voyez avec la colonne sm cinq et
la colonne sm sept, les deux contenus seront disposés comme vu ici.
Maintenant, à l'intérieur de la div droite,
je peux à nouveau aller et diviser la
largeur de cette div en une rangée, puis cette ligne me donnera automatiquement
12 autres colonnes pour cette partie de l'écran et ensuite je peux faire la mise en page en utilisant l'
imbrication des divs et faire la mise en page pour différentes parties de cette colonne .
Donc, imbriquer comme ça,
vous apporte encore plus de flexibilité dans la façon dont vous disposez le contenu dans votre pitch.
Avec toute la discussion sur le système de grille Bootstrap et
la façon dont la grille Bootstrap prend en charge diverses façons de
mettre en page le contenu, nous allons maintenant passer à notre prochaine série d'exercices.
Nous allons appliquer la grille Bootstrap à notre page index.html
afin de faire la mise en page du contenu à l'intérieur ou de la page index.html.
Nous allons également utiliser des classes CSS personnalisées.