Classes utilitaires
La plupart des W3.CSS est construit autour des classes d'utilitaires fournissant un rembourrage, les marges, la taille et le positionnement.
Classes de Rembourrage
Les classesde taille w3 padding- ajoute padding à tout élément HTML:
La classe w3-padding-jumbo ajoute 32px haut et en bas et 64px gauche et à droite.
La classe w3-padding-XXLarge ajoute 24px haut et en bas et 48px gauche et à droite.
La classe w3-padding-xlarge ajoute 16px haut et en bas et 32px gauche et à droite.
La classe w3-padding-large ajoute 12px haut et en bas et 24px gauche et à droite.
La classe w3-padding-medium ajoute 8px haut et en bas et 16px gauche et à droite.
La classe w3-padding-petite ajoute top 4px et en bas et 8px gauche et à droite.
La classe w3-padding-tiny ajoute top 2px et en bas et 4px gauche et à droite.
Exemple
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Try It Yourself » Les classesde nombres hor- w3-padding-ajoute horizontale ( en haut et en bas) padding à tout élément HTML:
La classe w3-padding-hor-4 ajoute 4px padding haut et en bas.
La classe w3-padding-hor-8 ajoute 8px padding haut et en bas.
La classe w3-padding-hor-16 ajoute 16px en haut et en bas de rembourrage.
La classe w3-padding-hor-32 ajoute 32px en haut et en bas de rembourrage.
La classe w3-padding-hor-64 ajoute 64px en haut et en bas de rembourrage.
Exemple
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Try It Yourself » Les classesde nombres w3-padding-ver- ajoute vertical (gauche et droite) padding à tout élément HTML:
La-ver-w3-padding 4 classe ajoute padding 4px gauche et à droite.
La-ver-w3-padding 8 classe ajoute padding 8px gauche et à droite.
Le w3-padding-ver-16 classe ajoute 16x padding gauche et à droite.
Le w3-padding-ver-32 classe ajoute 32px padding gauche et à droite.
La classe w3-padding-hor-48 ajoute 64px padding gauche et à droite.
Exemple
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Try It Yourself » Classes de marge
Les classesw3 marge ajoutent des marges à un élément:
La classe w3 marge ajoute 16px marge sur tous les côtés d'un élément.
La classe w3-margin-bottom ajoute une marge inférieure 16px à un élément.
Le w3-margin-left classe ajoute une 16px marge gauche à un élément.
La classe w3-margin-right ajoute une marge de droite 16px à un élément.
La classe w3-margin-top ajoute une marge supérieure 16px à un élément.
Exemple
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Try It Yourself » Dimensionnement Classes
La classe w3- taille modifie la taille de police d'un élément:
Je suis petit (en utilisant w3-tiny)
Je petite (en utilisant w3-petit)
Je suis moyen. Le défaut.
Je grand (en utilisant w3-large)
Je suis xlarge (en utilisant w3-xlarge)
Exemple
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> Try It Yourself » Vous pouvez en savoir plus sur le dimensionnement des classes dans le chapitre Typographie W3.CSS .
Arrondir Classes
La classe de taille w3-ronde ajoute des bordures arrondies à un élément:
Exemple
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Try It Yourself » Le Cercle de classe
La Classe Centre
La classe w3 centre centres un élément:
Exemple
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Try It Yourself » Classes flottant
La classe w3 gauche flotte un élément vers la gauche, la classe w3 droite flotte un élément vers la droite:
Exemple
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> Try It Yourself » Afficher / Masquer les classes
Le w3-hide-petite | moyenne | grande classe se cache un élément sur une taille d'écran.
Note: Redimensionner la fenêtre du navigateur pour comprendre comment il fonctionne:
Exemple
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> Try It Yourself »