Utility-Klassen
Die meisten W3.CSS ist um Utility-Klassen bieten Polsterung, Margen, Größen gebaut und Positionierung.
Padding-Klassen
Diew3-padding- Größenklassen fügt Polsterung an jedem beliebigen HTML - Element:
Die w3-padding-Jumbo-Klasse fügt 32px oben und unten und 64px links und rechts.
Die w3-padding-xxlarge Klasse fügt 24px oben und unten und 48px links und rechts.
Die w3-padding-xlarge Klasse fügt 16px oben und unten und 32px links und rechts.
Die w3-padding-große Klasse fügt 12px oben und unten und 24px links und rechts.
Die w3-padding-Medium-Klasse fügt 8px oben und unten und 16px links und rechts.
Die w3-padding-kleine-Klasse fügt 4px oben und unten und 8px links und rechts.
Die w3-padding-tiny-Klasse fügt 2px oben und unten und 4px links und rechts.
Beispiel
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Versuch es selber " Diew3-padding-hormone Anzahl Klassen fügt horizontal (oben und unten) Polsterung an jedem beliebigen HTML - Element:
Die w3-padding-hor-4-Klasse fügt 4px oben und unten Polsterung.
Die w3-padding-hor-8-Klasse fügt 8px oben und unten Polsterung.
Die w3-padding-hor-16-Klasse fügt 16px oben und unten Polsterung.
Die w3-padding-hor-32-Klasse fügt 32px oben und unten Polsterung.
Die w3-padding-hor-64-Klasse fügt 64px oben und unten Polsterung.
Beispiel
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Versuch es selber " Diew3-padding-Ver- Anzahl Klassen fügt vertikale (links und rechts) Polsterung an jedem beliebigen HTML - Element:
Die w3-padding-ver-4-Klasse fügt 4px linken und rechten Polsterung.
Die w3-padding-ver-8-Klasse fügt 8px linken und rechten Polsterung.
Die w3-padding-ver-16-Klasse fügt 16x linken und rechten Polsterung.
Die w3-padding-ver-32-Klasse fügt 32px linken und rechten Polsterung.
Die w3-padding-hor-48-Klasse fügt 64px links und rechts Polsterung.
Beispiel
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Versuch es selber " Margin-Klassen
Diew3-Margin - Klassen hinzufügen Margen auf ein Element:
Die w3-Margin-Klasse fügt 16px-Marge auf allen Seiten eines Elements.
Die w3-margin-bottom-Klasse fügt eine 16px unteren Rand auf ein Element.
Die w3-margin-left-Klasse fügt eine 16px linken Rand auf ein Element.
Die w3-margin-right-Klasse fügt eine 16px rechten Rand auf ein Element.
Die w3-margin-top-Klasse fügt eine 16px oberen Rand zu einem Element.
Beispiel
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Versuch es selber " Sizing Klassen
Die w3- Größenklasse ändert sich die Schriftgröße eines Elements:
Ich bin klein (mit w3-tiny)
Ich bin klein (mit w3-small)
Ich bin Medium. Der Standard.
Ich bin groß (mit w3-large)
Ich bin xlarge (w3-xlarge verwenden)
Beispiel
<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> Versuch es selber " Sie können mehr über Größenklassen im Kapitel lesen W3.CSS Typografie .
Abgerundet Klassen
Die w3-rund- Größenklasse fügt abgerundete Ränder auf ein Element:
Beispiel
<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>
Versuch es selber " Die Circle-Klasse
Das Zentrum Klasse
Die w3-Center - Klasse - Zentren ein Element:
Beispiel
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Versuch es selber " Schwimmdock Klassen
Die w3-links - Klasse schwebt ein Element auf der linken Seite der w3-Rechts - Klasse schwebt ein Element nach rechts:
Beispiel
<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> Versuch es selber " Show / Hide Klassen
Die w3-hide-small | medium | große Klasse verbirgt sich ein Element auf eine bestimmte Bildschirmgröße.
Hinweis: Ändern Sie die Größe des Browser - Fensters zu verstehen , wie es funktioniert:
Beispiel
<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> Versuch es selber "