Mise en page W3.CSS
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Classes de mise en page W3.CSS
W3.CSS version 2.90 / 2.91 a introduit les classes suivantes pour la mise en page "en colonne":
| Classer | La description |
|---|---|
| w3-cell-row | Conteneur pour cellules (colonnes). |
| cellule w3 | Cellule de mise en page (colonne). |
| w3-cell-top | Aligne le contenu en haut d'une cellule (colonne). |
| w3-cell-milieu | Aligne le contenu au milieu vertical d'une cellule (colonne). |
| w3-cell-bottom | Aligne le contenu au bas d'une cellule (colonne). |
| w3-mobile | Ajoute la réactivité mobile d'abord à une cellule (colonne). Affiche les éléments sous forme d'éléments de bloc sur les appareils mobiles. |
Les classes de disposition remplacent les classes de disposition obsolètes.
Le nouveau classeur de mise en page est plus polyvalent et plus facile à utiliser.
Les classes de mise en page obsolètes sont répertoriées au bas de cette page.
Éléments de bloc HTML
À l'origine, les éléments de bloc HTML (comme les éléments <div>) s'affichent sous forme de blocs verticaux :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Cellules de mise en page
La classe w3-cell redéfinit les éléments de bloc pour qu'ils s'affichent horizontalement (comme les cellules de tableau) :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Conteneur de mise en page
Le w3-cell-row est un conteneur pour les cellules (colonnes).
La largeur du conteneur w3-cell-row définit la largeur totale de toutes les cellules contenues.
La largeur par défaut est de 100 % :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Si vous modifiez la largeur du conteneur de cellules, cela réduira la largeur totale des cellules contenues :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Les cellules de mise en page s'ajustent automatiquement
La classe w3-cell a une très belle norme d'auto-ajustement intégrée. Les éléments côte à côte s'ajusteront automatiquement à la largeur nécessaire :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS. Bonjour mise en page W3.CSS.
Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Ajuster les cellules de disposition à la même hauteur
Les éléments w3-cell côte à côte s'ajusteront également automatiquement à la même hauteur :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Mise en page réactive
La classe w3-mobile ajoute la première réactivité mobile à tout élément HTML.
Utilisé avec w3-cell, il affichera les colonnes de mise en page verticalement sur les petits écrans/téléphones mobiles et horizontalement sur les écrans moyens/grands.
Sur écrans moyens et grands :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Sur petits écrans :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Alignement facile
La classe w3-cell facilite l'alignement du texte.
Il existe 3 classes d'alignement différentes :
- w3-cell-top (par défaut)
- w3-cell-milieu
- w3-cell-bottom
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
La classe w3-cell-row étire les éléments pour s'adapter à la largeur de la page :
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Bonjour mise en page W3.CSS.
Exemple
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Classes de disposition de table W3.CSS obsolètes
| w3-layout-container | Utilisez w3-cell-row à la place. |
| w3-layout-row | |
| w3-layout-cell | Utilisez w3-cell à la place. |
| w3-layout-top | Utilisez w3-cell-top à la place. |
| w3-layout-milieu | Utilisez plutôt w3-cell-middle. |
| w3-mise en page-bas | Utilisez w3-cell-bottom à la place. |
| w3-layout-col | Utilisez plutôt w3-mobile. |
Les classes obsolètes seront supprimées de W3.CSS dans la version 4.0.