Derniers tutoriels de développement web
 

W3.CSS Grille Fluid Responsive


Grille Responsive

W3.CSS supporte une grille de fluide réactif 12 de colonne.

Redimensionner la page pour voir l'effet!

1
2
3
4
5
6
7
8
9
dix
11
12

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.

1
2
3
4
5
6
7
8
9
dix
11
12

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 »