Grille Responsive
W3.CSS supporte une grille de fluide réactif 12 de colonne.
Redimensionner la page pour voir l'effet!
Cette partie occupera 12 colonnes sur un petit écran, 4 sur un écran moyen, et 3 sur un grand écran.
Cette partie occupera 12 colonnes sur un petit écran, 8 sur un écran moyen, et 9 sur un grand écran.
Exemple
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div> Try It Yourself » rangées Responsive
Le système de grille de W3.CSS est sensible, et les colonnes se réarranger automatiquement en fonction de la taille de l'écran: Sur un grand écran, il pourrait regarder mieux avec le contenu organisé en trois colonnes, mais sur un petit écran, il serait mieux si le contenu les éléments sont empilés les uns sur les autres.
Les colonnes doivent résider dans une rangée pour répondre pleinement.
| Classe | La description |
|---|---|
| w3 rangée | Définit un conteneur de padding-moins pour les colonnes sensibles. |
| w3-row-padding | Définit un conteneur rembourrée pour les colonnes sensibles. |
| w3-col | Définit une colonne avec sous-classes |
w3-col a les sous-classes suivantes:
Colonnes pour les petits écrans (téléphones intelligents typiques):
| Classe | La description |
|---|---|
| s1 | Définit 1 de 12 colonnes (largeur: 08,33%) pour les petits écrans |
| s2 | Définit 2 de 12 colonnes (largeur: 16,66%) pour les petits écrans |
| s3 | Définit 3 sur 12 colonnes (largeur: 25,00%) pour les petits écrans |
| s4 | Définit 4 sur 12 colonnes (largeur: 33,33%) pour les petits écrans |
| s5-s11 | |
| s12 | Définit 12 de 12 colonnes (largeur: 100%). Par défaut pour les petits écrans |
Colonnes pour les écrans de moyenne (comprimés typiques):
| Classe | La description |
|---|---|
| m1 | Définit 1 de 12 colonnes (largeur: 08,33%) pour les écrans moyennes |
| m2 | Définit 2 de 12 colonnes (largeur: 16,66%) pour les écrans moyennes |
| m3 | Définit 3 sur 12 colonnes (largeur: 25,00%) pour les écrans moyennes |
| m4 | Définit 4 sur 12 colonnes (largeur: 33,33%) pour les écrans moyennes |
| m5-m11 | |
| m12 | Définit 12 de 12 colonnes (largeur: 100%). Par défaut pour les écrans de taille |
Colonnes pour les grands écrans (les ordinateurs portables typiques):
| Classe | La description |
|---|---|
| l1 | Définit 1 de 12 colonnes (largeur: 08,33%) pour les grands écrans |
| I2 | Définit 2 de 12 colonnes (largeur: 16,66%) pour les grands écrans |
| l3 | Définit 3 sur 12 colonnes (largeur: 25,00%) pour les grands écrans |
| l4 | Définit 4 sur 12 colonnes (largeur: 33,33%) pour les grands écrans |
| l5-l11 | |
| l12 | Définit 12 de 12 colonnes (largeur: 100%). Par défaut pour les grands écrans) |
Les classes ci-dessus peuvent être combinés pour créer des présentations plus dynamiques et flexibles.
Chaque classe échelles, donc si vous souhaitez définir la même largeur pour les écrans de petites, moyennes et grandes, il vous suffit de spécifier la petite classe. Et si vous voulez la même largeur sur les écrans de moyenne et grande taille, il vous suffit de spécifier la classe moyenne.
Toutefois, si vous utilisez seulement moyen et / ou de grandes classes, la largeur sera toujours transformée à 100% sur les petits écrans.
Remarque: Le nombre de colonnes doit toujours ajouter jusqu'à 12 pour chaque rangée (6 + 6, 3 + 3 + 6, 9 + 3, etc.)!
Deux colonnes de l'égalité
Deux colonnes de largeur égale (50% / 50%) sur toutes les tailles d'écran:
s6
s6
Exemple
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div> Try It Yourself » Deux colonnes Unequal
Deux colonnes de largeurs inégales (25% / 75%) sur toutes les tailles d'écran:
s3
s9
Exemple
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> Try It Yourself » Trois colonnes de l'égalité
Trois colonnes de largeur égale (33,3% / 33,3% / 33,3%) sur toutes les tailles d'écran:
s4
s4
s4
Exemple
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div> Try It Yourself » Trois Colonnes Unequal
Trois colonnes différentes de largeur (25% / 50% / 25%) sur les tablettes, les ordinateurs portables et ordinateurs de bureau. Sur les téléphones mobiles, les colonnes seront automatiquement empiler (largeur de 100%):
m3
m6
m3
Exemple
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div> Try It Yourself » Remarque: Cet exemple est le même que l' utilisation de w3 quart (m3), w3 moitié (m6), w3 quart (m3), ce qui vous avez appris dans le W3.CSS Responsive chapitre.
Six colonnes
Six colonnes de largeur égale (16% chacun) sur les tablettes, les ordinateurs portables et ordinateurs de bureau. Sur les téléphones mobiles, les colonnes seront automatiquement empiler (largeur de 100%):
m2
m2
m2
m2
m2
m2
Exemple
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div> Try It Yourself » Mixte: Mobile et les ordinateurs portables
Vous pouvez combiner les classes pour créer une mise en page dynamique et flexible. Cet exemple va produire une mise en page à deux colonnes avec un 83,34% / 16,66% (l8, l4) répartis sur de grands écrans et un 50% / 50% (s6, s6) répartis sur les petits écrans:
l8 s6
l4 s6
Exemple
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Try It Yourself » Mixte: mobiles, tablettes et ordinateurs portables
Cet exemple va produire une mise en page à trois colonnes avec un / 58,34% / 16,66% (l3, l7, I2) fendu de 25% sur les grands écrans, 50% / 25% / 25% (m6, m3, m3) répartis sur les écrans à moyen et 33,3% / 33,3% / 33,3% (s4, s4, s4) répartis sur les petits écrans:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Exemple
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Try It Yourself » Différence entre w3-ligne et w3-row-padding
La classe w3 rangée définit un conteneur rembourrée-moins, tandis que la classe w3-row-padding ajoute un rembourrage 8px gauche et à droite à chaque colonne:
w3 rangée:
w3-row-padding:
Exemple
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> Try It Yourself » Utilisation Pourcentage
20%
60%
20%
45%
55%
15%
35%
dix%
30%
dix%
Exemple
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div> Try It Yourself » Utilisation de w3 repos
150px
le repos
75px
le repos
100px
100px
le repos
trimestre
80px
le repos
trimestre
trimestre
trimestre
35%
le repos
Exemple d'utilisation de repos
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Try It Yourself »