Maison >interface Web >tutoriel CSS >Repenser un site pour utiliser la disposition de la grille CSS
Repenser un site pour utiliser la disposition de la grille CSS
- Jennifer Anistonoriginal
- 2025-02-15 08:45:12336parcourir
Dans cet article, nous allons voir CSS Grid en action en créant une disposition de site Web multi-colonnes réactive.
La grille CSS est une nouvelle tendance chaude du développement Web ces jours-ci. Oubliez les dispositions et les flotteurs de table: Une nouvelle façon de concevoir des sites Web est déjà là! Cette technologie introduit des réseaux bidimensionnels qui définissent plusieurs zones de disposition avec une poignée de règles CSS.
La grille peut fabriquer des cadres tiers tels que 960 g ou une grille bootstrap redondante, comme vous pouvez facilement tout faire vous-même! Cette fonctionnalité est prise en charge par tous les principaux navigateurs, bien que Internet Explorer implémente une ancienne version de la spécification.
Si vous êtes nouveau dans la mise en page de la grille, consultez notre Guide du débutant sur la grille CSS.
Les plats clés
- La disposition de la grille CSS simplifie la création de dispositions multi-colonnes, éliminant le besoin d'anciennes techniques comme des flotteurs et des tables d'affichage.
- La grille CSS permet un repositionnement et un redimensionnement faciles des zones de grille, ce qui en fait une méthode de conception plus flexible et intuitive par rapport aux cadres CSS traditionnels comme bootstrap.
- La mise en œuvre de la grille CSS implique de définir un conteneur avec affichage: grille, configurer des colonnes et des lignes et placer des éléments dans des zones de grille désignées en utilisant des règles CSS simples.
- La grille CSS est réactive par nature, permettant la réorganisation facile du contenu pour différentes tailles d'écran en utilisant des requêtes multimédias minimales.
- pour les navigateurs qui ne prennent pas entièrement en charge la grille CSS, tels que Internet Explorer, les styles de secours en utilisant des requêtes en ligne et des médias garantissent que les dispositions rendent toujours efficacement.
- La grille CSS et Flexbox peuvent être combinées pour gérer les exigences de conception complexes, présentant la compatibilité et la polyvalence de CSS Grid dans la conception Web moderne.
ce que nous allons construire
Ainsi, on nous a demandé de créer une disposition de site Web typique avec un en-tête, une zone de contenu principale, une barre latérale à droite, une liste de sponsors et un pied de page:
Un autre développeur a déjà essayé de résoudre cette tâche et a proposé une solution qui implique des flotteurs, l'affichage: table et quelques hacks ClearFix. Nous allons faire référence à cette mise en page existante comme «initiale»:
Voir la disposition de Pen SP: multi-colonnes avec des flotteurs par SitePoint (@SitePoint) sur Codepen.
Jusqu'à récemment, les flotteurs étaient considérés comme la meilleure option pour créer de telles dispositions. Avant cela, nous avons dû utiliser des tables HTML, mais ils avaient un certain nombre d'inconvénients. Plus précisément, une telle disposition de table est très rigide, nécessitant beaucoup de balises (Table, TR, TD, TH, etc.), et sémantiquement, ces balises sont utilisées pour présenter les données de la table, pas pour concevoir des dispositions.
mais CSS continue d'évoluer, et maintenant nous avons CSS Grid. Conceptuellement, il est similaire à une ancienne disposition de table mais peut utiliser des éléments HTML sémantiques avec une disposition plus flexible.
Planification de la grille
Tout d'abord: nous devons définir une structure HTML de base pour notre document. Avant cela, parlons brièvement du fonctionnement de l'exemple initial. Il a les blocs principaux suivants:
- .Container est l'emballage mondial qui a de petites marges à gauche et à droite.
- .-Leader est l'en-tête qui contient le .logo (occupant 20% de l'espace, flottant vers la gauche) et le .main-menu (occupant 79% de l'espace, flottant vers la droite). L'en-tête se voit également attribuer une solution de piratage pour effacer les flotteurs.
- .Content-Area-Drapper enveloppe la zone principale. ). L'emballage lui-même est également attribué avec un filet clearfix.
- .Sponsors-wrapper contient les logos des sponsors. À l'intérieur, il y a une section .Sponsors avec la propriété d'affichage définie sur la table. Chaque sponsor, à son tour, est affiché comme une cellule de table.
- .footer est notre pied de page et s'étend à 100% de l'espace.
Notre nouvelle mise en page sera très similaire à celle initiale, mais à une exception: nous n'ajouterons pas les wrappers .main-header et .Content-Area-Wrappers car les filets ne seront plus nécessaires. Voici la nouvelle version du HTML:
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><header</span> class<span>="logo"</span>></span>
</span> <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span> <span><span><span><ul</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><main</span> class<span>="content-area"</span>></span>
</span> <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
<span><span><span><p</span>></span>
</span> Content
<span><span><span></p</span>></span>
</span> <span><span><span></main</span>></span>
</span>
<span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span> <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
<span><span><span><ul</span>></span>
</span> <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></aside</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span> <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors"</span>></span>
</span> <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span> <span><span><span></section</span>></span>
</span>
<span><span><span></section</span>></span>
</span>
<span><span><span><footer</span> class<span>="footer"</span>></span>
</span> <span><span><span><p</span>></span>
</span> <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span> <span><span><span></p</span>></span>
</span> <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
Notez que vous pouvez utiliser le corps en tant que container mondial; C’est juste une question de préférence dans ce cas. Dans l'ensemble, nous avons six domaines principaux:
- logo
- menu
- Contenu principal
- barre latérale
- sponsors
- pied de page
Généralement, il est recommandé de mettre en œuvre une approche mobile d'abord. Autrement dit, vous commencez à partir de la disposition mobile, puis ajoutez des styles pour les écrans plus grands. Ce n'est pas nécessaire dans ce cas, car nous adaptons une disposition initiale qui se retourne déjà à une vue linéarisée sur des appareils à petit écran. Par conséquent, commençons par nous concentrer sur la mise en œuvre de la grille, et après cela, parlons de réactivité et de règles de secours. Alors, retournez à notre schéma et voyez comment les colonnes de la grille peuvent être organisées:
Donc, je propose d'avoir trois colonnes (mises en évidence en rouge) et quatre rangées (mises en évidence en bleu). Certaines zones, comme le logo, ne vont occuper qu'une seule colonne, tandis que d'autres, comme le contenu principal, vont courir plusieurs colonnes. Plus tard, nous pouvons facilement modifier la disposition, déplacer les zones ou en ajouter de nouvelles.
En suivant le schéma, donnez à chaque zone un nom unique. Ceux-ci seront utilisés dans la disposition définie ci-dessous:
<span><span>.logo</span> {
</span> <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span> <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span> <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span> <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span> <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span> <span>grid-area: footer;
</span><span>}
</span>
Définissez maintenant la propriété d'affichage sur la grille, définissez trois colonnes et ajoutez de petites marges à gauche et à droite du conteneur principal:
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><header</span> class<span>="logo"</span>></span>
</span> <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span> <span><span><span><ul</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><main</span> class<span>="content-area"</span>></span>
</span> <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
<span><span><span><p</span>></span>
</span> Content
<span><span><span></p</span>></span>
</span> <span><span><span></main</span>></span>
</span>
<span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span> <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
<span><span><span><ul</span>></span>
</span> <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></aside</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span> <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors"</span>></span>
</span> <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span> <span><span><span></section</span>></span>
</span>
<span><span><span></section</span>></span>
</span>
<span><span><span><footer</span> class<span>="footer"</span>></span>
</span> <span><span><span><p</span>></span>
</span> <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span> <span><span><span></p</span>></span>
</span> <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
Affichage: Grid définit un conteneur de grille et définit un contexte de formatage spécial pour ses enfants. FR est une unité spéciale qui signifie «Fraction de l'espace libre du récipient de grille». 2 6 4 nous donne 12 et 6/12 = 0,5. Cela signifie que la colonne du milieu va occuper 50% de l'espace libre.
Je voudrais également ajouter un espacement entre les lignes et les colonnes:
<span><span>.logo</span> {
</span> <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span> <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span> <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span> <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span> <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span> <span>grid-area: footer;
</span><span>}
</span>
Ayant fait cela, nous pouvons travailler avec des zones individuelles. Mais avant de terminer cette section, ajoutons rapidement quelques styles courants:
<span><span>.container</span> {
</span> <span>display: grid;
</span> <span>margin: 0 2rem;
</span> <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
bien! Maintenant, nous pouvons passer à la première cible, qui va être l'en-tête.
Concevoir l'en-tête
Notre en-tête occupe la première ligne qui devrait avoir une hauteur spécifique définie sur 3rem. Dans la disposition initiale, cela est résolu en attribuant la propriété de hauteur pour l'emballage d'en-tête:
<span><span>.container</span> {
</span> // ...
<span>grid-gap: 2rem 1rem;
</span><span>}
</span>
Notez également que le logo et le menu sont alignés verticalement au milieu, qui est réalisé en utilisant l'astuce de hauteur de ligne:
<span>* {
</span> <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span> <span>font-size: 16px;
</span> <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span> <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span> <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span> <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span> <span>margin-bottom: 0;
</span><span>}
</span>
avec la grille CSS, cependant, les choses vont être plus simples: nous n'aurons pas besoin de piratage CSS.
Commencez par définir la première ligne:
<span><span>.main-header</span> {
</span> <span>height: 3rem;
</span><span>}
</span>
Notre logo doit occuper une seule colonne, tandis que le menu devrait s'étendre sur deux colonnes. Nous pouvons exprimer notre intention à l'aide de la propriété de la grille-template-areas, qui fait référence aux noms de la zone de grille attribués ci-dessus:
<span><span>.logo</span> {
</span> // ...
<span>height: 100%;
</span> <span>line-height: 3rem;
</span><span>}
</span>
Que se passe-t-il ici? Eh bien, en disant le logo qu'une seule fois, nous nous assurons qu'il n'en occupe qu'une - la colonne la plus à gauche. Le menu du menu signifie que le menu occupe deux colonnes: le milieu et le plus à droite. Voyez à quel point cette règle est simple!
Alignez maintenant le logo sur l'axe Y:
<span><span>.container</span> {
</span> // ...
<span>grid-template-rows: 3rem;
</span><span>}
</span>
Le menu doit être centré verticalement et tiré vers la droite:
<span><span>.container</span> {
</span> // ...
<span>grid-template-areas:
</span> <span>"logo menu menu";
</span><span>}
</span>
Notre menu est construit avec les balises UL et Li, alors faisons également des styles un peu en supprimant les marqueurs, en annulant les marges / paddings et en définissant le menu sur un conteneur flexible:
<span><span>.logo</span> {
</span> <span>grid-area: logo;
</span> <span>align-self: center;
</span><span>}
</span>
c'est à peu près tout. Pour observer le résultat, je vais utiliser Firefox avec un outil de surligneur de grille CSS pratique activé. (Il existe des outils similaires pour d'autres navigateurs disponibles: par exemple, Gridman pour Chrome.) Pour accéder à cet outil, appuyez sur F12 et sélectionnez l'élément .Container, qui devrait avoir une étiquette de grille:
Après cela, passez à l'onglet Règles CSS et recherchez la propriété Affichage: Grille. En appuyant sur la petite icône à côté de la valeur de la grille, vous pouvez activer ou désactiver le surligneur:
Voici le résultat:
Le surligneur affiche toutes vos lignes et colonnes, ainsi que les marges entre elles et les noms des zones. Vous pouvez personnaliser la sortie dans la section de mise en page, qui répertorie également toutes les grilles de la page:
Ainsi, nous avons traité avec l'en-tête, alors passons à la zone de contenu principale et à la barre latérale.
Contenu principal et barre latérale
Notre zone de contenu principale devrait s'étendre sur deux colonnes, tandis que la barre latérale ne doit en occuper qu'une. Quant à la ligne, je voudrais que sa hauteur soit réglée automatiquement. Nous pouvons mettre à jour la grille .Container en conséquence:
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><header</span> class<span>="logo"</span>></span>
</span> <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span> <span><span><span><ul</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><main</span> class<span>="content-area"</span>></span>
</span> <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
<span><span><span><p</span>></span>
</span> Content
<span><span><span></p</span>></span>
</span> <span><span><span></main</span>></span>
</span>
<span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span> <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
<span><span><span><ul</span>></span>
</span> <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></aside</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span> <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors"</span>></span>
</span> <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span> <span><span><span></section</span>></span>
</span>
<span><span><span></section</span>></span>
</span>
<span><span><span><footer</span> class<span>="footer"</span>></span>
</span> <span><span><span><p</span>></span>
</span> <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span> <span><span><span></p</span>></span>
</span> <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
Je voudrais ajouter un rembourrage pour la barre latérale pour lui donner un espace visuel plus:
<span><span>.logo</span> {
</span> <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span> <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span> <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span> <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span> <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span> <span>grid-area: footer;
</span><span>}
</span>
voici le résultat, comme l'a vu dans l'outil de grille de Firefox:
sponsors
La section des sponsors doit contenir cinq éléments avec des largeurs et des hauteurs égales. Chaque élément, à son tour, aura une image.
Dans la mise en page initiale, ce bloc est stylé avec l'affichage: table, mais nous n'en compterons pas. En fait, la section des sponsors peut également être un excellent candidat pour appliquer la grille CSS!
Tout d'abord, ajustez les zones de tempête de grille pour inclure la zone des sponsors:
<span><span>.container</span> {
</span> <span>display: grid;
</span> <span>margin: 0 2rem;
</span> <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
transforme maintenant la section .Sponsors en grille également:
<span><span>.container</span> {
</span> // ...
<span>grid-gap: 2rem 1rem;
</span><span>}
</span>
Tant que nous avons besoin de cinq éléments avec des largeurs égales, la fonction Repeat () peut être utilisée pour définir les colonnes:
<span>* {
</span> <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span> <span>font-size: 16px;
</span> <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span> <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span> <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span> <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span> <span>margin-bottom: 0;
</span><span>}
</span>
Quant à la ligne, sa hauteur doit être définie automatiquement. L'espace entre les colonnes doit être égal à 1Rem:
<span><span>.main-header</span> {
</span> <span>height: 3rem;
</span><span>}
</span>
Style chaque élément:
<span><span>.logo</span> {
</span> // ...
<span>height: 100%;
</span> <span>line-height: 3rem;
</span><span>}
</span>
Voici le résultat intermédiaire:
Cet exemple illustre que vous pouvez nidifier les grilles sans aucun problème. Une autre solution pourrait être d'utiliser Flexbox, mais dans ce cas, les sponsors peuvent s'envelopper s'il n'y a pas assez de largeur pour eux.
Maintenant, je voudrais centrer les images verticalement et horizontalement. Nous pourrions essayer de faire ce qui suit:
<span><span>.container</span> {
</span> // ...
<span>grid-template-rows: 3rem;
</span><span>}
</span>
Place-self aligne l'élément sur les axes x et y. C'est une propriété scoris
Les images seront en effet alignées, mais malheureusement, le fond blanc a disparu. En effet
Cela signifie que nous avons besoin d'une approche différente ici, et l'une des solutions possibles est d'utiliser Flexbox:
Maintenant, tout est affiché correctement, et maintenant nous savons que Grid joue bien avec Flexbox:
<span><span>.container</span> {
</span> // ...
<span>grid-template-areas:
</span> <span>"logo menu menu";
</span><span>}
</span>
pied de page
Notre dernière section est le pied de page, et c'est en fait la section la plus simple. Tout ce que nous avons à faire est de le courir aux trois colonnes:
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><header</span> class<span>="logo"</span>></span>
</span> <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span> <span><span><span><ul</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><main</span> class<span>="content-area"</span>></span>
</span> <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
<span><span><span><p</span>></span>
</span> Content
<span><span><span></p</span>></span>
</span> <span><span><span></main</span>></span>
</span>
<span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span> <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
<span><span><span><ul</span>></span>
</span> <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></aside</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span> <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors"</span>></span>
</span> <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span> <span><span><span></section</span>></span>
</span>
<span><span><span></section</span>></span>
</span>
<span><span><span><footer</span> class<span>="footer"</span>></span>
</span> <span><span><span><p</span>></span>
</span> <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span> <span><span><span></p</span>></span>
</span> <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
Fondamentalement, la mise en page est terminée! Cependant, nous n'avons pas encore fini: le site doit également être réactif. Alors, prenons soin de cette tâche dans la section suivante.
Rendre la disposition réactive
Ayant la grille CSS en place, il est en fait très facile d'introduire la réactivité, car nous pouvons rapidement repositionner les zones.
grands écrans
Commençons par de grands écrans (dans cet article, je m'en tiendrai aux mêmes points d'arrêt que défini dans Bootstrap 4). Je voudrais diminuer la marge horizontale du conteneur principal et l'écart entre les sponsors individuels:
<span><span>.logo</span> {
</span> <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span> <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span> <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span> <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span> <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span> <span>grid-area: footer;
</span><span>}
</span>
écrans moyens
Sur les écrans moyens, je voudrais la zone de contenu principale et la barre latérale pour occuper les trois colonnes:
<span><span>.container</span> {
</span> <span>display: grid;
</span> <span>margin: 0 2rem;
</span> <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
Remettons également la taille de la police et empilons les sponsors afin qu'ils soient affichés l'un sous l'autre. L'espace entre les colonnes doit être nul (car en fait, il n'y aura qu'une seule colonne). Au lieu de cela, je vais définir un écart entre les lignes:
<span><span>.container</span> {
</span> // ...
<span>grid-gap: 2rem 1rem;
</span><span>}
</span>
C'est à quoi ressemble la mise en page sur les écrans moyens maintenant:
petits écrans
Sur les petits écrans, nous allons afficher chaque zone sur une ligne séparée, ce qui signifie qu'il n'y aura qu'une seule colonne maintenant:
<span>* {
</span> <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span> <span>font-size: 16px;
</span> <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span> <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span> <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span> <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span> <span>margin-bottom: 0;
</span><span>}
</span>
Le menu ne doit pas être tiré vers la droite dans ce cas, et nous n'avons pas non plus besoin de l'écart entre les colonnes:
<span><span>.main-header</span> {
</span> <span>height: 3rem;
</span><span>}
</span>
Le travail est fait:
Notez que vous pouvez même réorganiser facilement les éléments de la grille pour divers écrans. Supposons que nous aimerions mettre le menu en bas sur de petits écrans (afin que les visiteurs n'aient pas à faire défiler après avoir terminé le matériel de lecture sur la page). Pour ce faire, ajuster simplement la grille-template-areas:
<span><span>.logo</span> {
</span> // ...
<span>height: 100%;
</span> <span>line-height: 3rem;
</span><span>}
</span>
se faire sans requêtes multimédias
Il convient de mentionner que nous pouvons rendre les sponsors qui bloqueront sans aucune question médiatique. Cela est possible à l'aide de la propriété automatique et de la fonction Minmax. Pour les voir en action, modifiez les styles pour les .Sponsors comme ceci:
<span><span>.container</span> {
</span> // ...
<span>grid-template-rows: 3rem;
</span><span>}
</span>
La fonction de répétition, comme vous le savez déjà, répète les colonnes autant de fois que nécessaire.
Le remplissage automatique signifie «Remplissez la ligne avec autant de colonnes que possible». S'il n'y a pas assez d'espace pour la colonne, il sera placé à la ligne suivante.
Minmax nous permet de spécifier la valeur minimale et maximale pour les largeurs des colonnes. Dans ce cas, chaque colonne devrait s'étendre sur 1 fraction d'espace libre, mais pas moins de 200 pixels.
Tout cela signifie que sur des écrans plus petits, les colonnes peuvent être réduites à plus de 200px chacune. S'il n'y a pas encore assez d'espace, une ou plusieurs colonnes seront déplacées vers une ligne distincte. Voici le résultat de l'application des règles CSS ci-dessus:
Fallbacks
Malheureusement, la grille CSS n'est pas encore entièrement prise en charge par tous les navigateurs, et vous pouvez deviner lequel implémente encore une ancienne version de la spécification. Oui, c'est Internet Explorer 10 et 11. Si vous ouvrez la démo dans ces navigateurs, vous verrez que la grille ne fonctionne pas du tout, et les zones sont simplement empilées:
Bien sûr, ce n'est pas la fin du monde, car le site est toujours utilisable, mais ajoutons au moins quelques règles de repli. La bonne nouvelle est que si l'élément est flotté et a également attribué la grille, la grille a priorité. De plus, l'affichage, l'alignement vertical et certaines autres propriétés n'ont également aucun effet sur les éléments de la grille, alors profitons de ce fait.
Le menu empilé est beau tel quel, mais la barre latérale doit probablement être placée à côté du contenu principal, pas en dessous. Nous pouvons y parvenir en utilisant l'affichage: bloc en ligne:
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><header</span> class<span>="logo"</span>></span>
</span> <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span> <span><span><span><ul</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><main</span> class<span>="content-area"</span>></span>
</span> <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
<span><span><span><p</span>></span>
</span> Content
<span><span><span></p</span>></span>
</span> <span><span><span></main</span>></span>
</span>
<span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span> <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
<span><span><span><ul</span>></span>
</span> <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span> <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></aside</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span> <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
<span><span><span><section</span> class<span>="sponsors"</span>></span>
</span> <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span> <span><span><span></figure</span>></span>
</span>
<span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span> <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span> <span><span><span></figure</span>></span>
</span> <span><span><span></section</span>></span>
</span>
<span><span><span></section</span>></span>
</span>
<span><span><span><footer</span> class<span>="footer"</span>></span>
</span> <span><span><span><p</span>></span>
</span> <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span> <span><span><span></p</span>></span>
</span> <span><span><span></footer</span>></span>
</span><span><span><span></div</span>></span>
</span>
Dans tous les navigateurs qui prennent en charge la grille, ces propriétés n'auront aucun effet, mais dans IE, elles seront appliquées comme prévu. Une autre propriété que nous devons modifier est la largeur:
<span><span>.logo</span> {
</span> <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span> <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span> <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span> <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span> <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span> <span>grid-area: footer;
</span><span>}
</span>
Mais après avoir ajouté ces styles, notre disposition de grille sera maintenant bien pire, car la propriété de largeur n'est pas ignorée par les articles de la grille. Cela peut être corrigé à l'aide de la requête @Supports CSS. IE ne comprend pas ces requêtes, mais elle n'a pas besoin de: nous l'utiliserons pour réparer la grille!
<span><span>.container</span> {
</span> <span>display: grid;
</span> <span>margin: 0 2rem;
</span> <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
Maintenant, prenons soin des articles du sponsor et ajoutons une marge supérieure pour chaque bloc:
<span><span>.container</span> {
</span> // ...
<span>grid-gap: 2rem 1rem;
</span><span>}
</span>
Nous n'avons pas besoin de marge supérieure lorsque la grille est prise en charge, alors annulez-la à l'intérieur de la requête @Supports:
<span>* {
</span> <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span> <span>font-size: 16px;
</span> <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span> <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span> <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span> <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span> <span>margin-bottom: 0;
</span><span>}
</span>
Enfin, ajoutons une réactivité pour IE. Nous allons simplement étirer le contenu principal, la barre latérale et chaque sponsor à pleine largeur sur les écrans plus petits:
<span><span>.main-header</span> {
</span> <span>height: 3rem;
</span><span>}
</span>
N'oubliez pas de corriger la largeur du sponsor pour les navigateurs qui prennent en charge la grille:
<span><span>.logo</span> {
</span> // ...
<span>height: 100%;
</span> <span>line-height: 3rem;
</span><span>}
</span>
Voici à quoi ressemble la mise en page dans Internet Explorer maintenant:
Vous pouvez afficher le résultat final sur Codepen:
Voir la disposition de Pen SP: multi-colonnes avec grille par SitePoint (@SitePoint) sur Codepen.
Conclusion
Dans cet article, nous avons vu CSS Grid en action et l'avons utilisé pour repenser une disposition basée sur le flotteur existant. En comparant ces deux solutions, nous pouvons voir que le code HTML et CSS de la solution «Grid» est plus petit (sans compter les replies, bien sûr), plus simples et plus expressives. Avec l'aide de la propriété de la grille-template-zones, il est facile de comprendre comment les zones individuelles sont aménagées, et nous pouvons rapidement les repositionner ou ajuster leurs tailles. En plus de cela, nous n'avons pas besoin de compter sur divers trucs de piratage comme ClearFix.
Ainsi, comme vous le voyez, la grille CSS est une excellente alternative aux flotteurs, et il est très prêt pour la production. Vous devrez peut-être fournir des règles de secours pour Internet Explorer (qui met en œuvre une ancienne version de la spécification), mais comme vous l'avez vu, ils ne sont pas très complexes, et en général, le site est toujours utilisable même sans aucune compatibilité en arrière à tout.
Avez-vous déjà essayé de créer des sites Web avec CSS Grid? Quelles sont vos impressions? Partagez vos pensées dans les commentaires!
Les questions fréquemment posées sur la rénovation de la grille CSS
Quelle est la signification de la rénovation de la grille CSS dans la conception Web?
La rénovation de la grille CSS est un outil puissant de la conception Web qui permet aux développeurs de créer des dispositions complexes avec facilité. Il s'agit d'un système bidimensionnel, ce qui signifie qu'il peut gérer les colonnes et les lignes, contrairement à Flexbox qui est en grande partie un système unidimensionnel. Cela en fait un outil polyvalent pour créer des conceptions réactives qui s'adaptent à différentes tailles d'écran et résolutions. Il simplifie également le processus d'alignement et de distribution de l'espace entre les éléments d'un conteneur, même lorsque leur taille est inconnue ou dynamique.
Comment la rénovation du réseau CSS se compare-t-elle aux autres systèmes de grille?
CSS Grid Grid La modernisation se démarque des autres systèmes de grille en raison de sa flexibilité et de sa facilité d'utilisation. Contrairement à d'autres systèmes qui nécessitent un codage et des calculs approfondis, la rénovation de la grille CSS permet aux développeurs de créer des dispositions complexes avec un code minimal. Il offre également plus de contrôle sur le placement et l'alignement des éléments, ce qui en fait un choix préféré pour de nombreux développeurs.
Puis-je utiliser la rénovation de grille CSS pour la conception réactive mobile?
Oui, Retrofit de grille CSS est un excellent outil pour créer des conceptions réactives mobiles. Il permet aux développeurs de définir différentes dispositions de grille pour différentes tailles d'écran à l'aide de requêtes multimédias. Cela signifie que vous pouvez créer une mise en page complexe pour une vue de bureau, et une disposition plus simple et plus rationalisée pour la vue mobile, le tout dans le même document CSS.
Quels sont les problèmes de compatibilité du navigateur avec CSS Grid Retrofit?
La rénovation de la grille CSS est compatible avec la plupart des navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, cela peut ne pas fonctionner comme prévu dans les navigateurs ou versions plus âgés. C'est toujours une bonne pratique de tester votre conception dans plusieurs navigateurs pour s'assurer qu'il fonctionne comme prévu.
Comment puis-je commencer à utiliser CSS Grid Retrofit dans mes projets?
Pour commencer à utiliser CSS Grid Retrofit, vous devez définir un élément de conteneur comme une grille avec affichage: grille. Ensuite, vous pouvez définir les tailles de colonne et de lignes avec des colonnes de la grille et des lignes de récompense de grille, et placer ses éléments enfants dans la grille avec une colonne de grille et une grille.
Puis-je combiner CSS Retrofit de la grille avec d'autres méthodes de mise en page?
Oui, la modernisation de la grille CSS peut être combinée avec d'autres méthodes de mise en page comme Flexbox pour des conceptions plus complexes. Cela peut être particulièrement utile lorsque vous souhaitez créer une mise en page qui est partiellement flexible et partiellement fixe.
Quelles sont les meilleures pratiques pour utiliser la rénovation de la grille CSS? La rénovation inclut l'utilisation des zones de grille nommées pour une gestion de disposition plus facile, en utilisant l'unité FR pour des pistes de grille flexibles et en utilisant l'inspecteur de grille dans les outils de développeur de votre navigateur pour visualiser et déboguer vos dispositions de grille. Éléments?
La rénovation de la grille CSS permet aux éléments de se chevaucher, ce qui peut être un outil puissant pour créer des dispositions uniques. Vous pouvez contrôler l'ordre d'empilement des éléments qui se chevauchent avec la propriété Z-Index.
Puis-je utiliser la rénovation de grille CSS pour les dispositions verticales?
Oui, la rénovation de la grille CSS est un système bidimensionnel, ce qui signifie qu'il peut gérer les colonnes et les lignes. This makes it a versatile tool for creating both horizontal and vertical layouts.
What are some common challenges when working with CSS Grid Retrofit?
Some common challenges when working with CSS Grid Retrofit include dealing with Problèmes de compatibilité du navigateur, gestion des éléments qui se chevauchent et gérant des dispositions complexes avec de nombreuses zones de grille. Cependant, avec la pratique et une bonne compréhension des propriétés de la grille, ces défis peuvent être surmontés.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Repenser une disposition Tumblr basée sur la carte avec la grille CSS
- Obtenir des onglets bootstrap pour jouer bien avec la maçonnerie
- Modifiez votre site Web en tant qu'application Web progressive
- Bootstrap: fonctionnalités super intelligentes pour vous gagner
- Comment construire une échelle de type réactive avec bootstrap