Die Container-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-Behälter | Container für HTML-Inhalt (fügt 16px padding links und rechts) | Versuch es |
| Wird mit Farbklassen | Versuch es | |
| Verwendet als Kopf | Versuch es | |
| Verwendet als Fußzeile | Versuch es | |
| Verwendet mit w3-leftbar | Versuch es | |
| Verwendet mit w3-bottombar | Versuch es | |
| w3 Schnitt | Container für HTML-Inhalt (fügt 16px Rand oben und unten) | Versuch es |
| w3-Abzeichen | Rund Abzeichen 8 | Versuch es |
| w3-tag | Rechteckige Tag später mehr! | Versuch es |
| w3-ul | Ungeordnete Liste | Versuch es |
| w3-display-Behälter | Container für w3-Display- Klassen (Position ein Element in der oben links, oben rechts, unten links oder unten rechts oder in der Mitte des Behälters) | Versuch es |
| w3-Bild | Veraltete. Verwenden Sie w3-display-Container statt. | Versuch es |
| w3-blockquote | Entfernt in 2.0 (Verwendung w3-leftbar statt) | Versuch es |
| w3-Code | Code Container | Versuch es |
| w3-progress-Container | Fortschrittsbalken Behälter | Versuch es |
Tabellenklassen
| Klasse | Definiert | |
|---|---|---|
| w3-Tisch | Container für eine HTML-Tabelle | Versuch es |
| w3-gestreift | Gestreifte Tabelle | Versuch es |
| w3-Grenze | Grenzt Tisch | Versuch es |
| w3 umrandete | Grenzt Linien | Versuch es |
| w3-zentriert | zentriert Tisch | Versuch es |
| w3-hoverable | Hoverable Tisch | Versuch es |
| w3-table-all | Alle Eigenschaften festlegen | Versuch es |
| Mit w3-gestreift, w3-Grenze, und w3 umrandete | Versuch es | |
| Mit farbigen Kopf | Versuch es | |
| Mit w3-Verantwortlichen | Versuch es | |
| Mit w3-tiny | Versuch es | |
| Mit w3-small | Versuch es | |
| Mit w3-large | Versuch es | |
| Mit w3-xlarge | Versuch es | |
| Mit w3-xxlarge | Versuch es | |
| Mit w3-XXXLarge | Versuch es | |
| Mit Farbe | Versuch es | |
| Mit w3-Jumbo | Versuch es |
Karten-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-Karte | Container für alle HTML-Inhalte (mit Rahmen) | Versuch es |
| w3-card-2 | Container für alle HTML-Inhalte (2px umrandeten Schatten) | Versuch es |
| w3-Card-4 | Container für alle HTML-Inhalte (4px umrandeten Schatten) | Versuch es |
| w3-Card-8 | Container für alle HTML-Inhalte (8px umrandeten Schatten) | Versuch es |
| w3-Card-12 | Container für alle HTML-Inhalte (12px grenzte Schatten) | Versuch es |
| w3-Card-16 | Container für alle HTML-Inhalte (16px grenzte Schatten) | Versuch es |
| w3-Card-24 | Container für alle HTML-Inhalte (24px grenzte Schatten) | Versuch es |
Responsive Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-Reihe | Container für eine Reihe von Flüssigkeits ansprechenden Inhalt | Versuch es |
| w3-Reihe-Polsterung | Row, in der alle Spalten einen Standard Polsterung haben | Versuch es |
| w3-Gehalt | Behälter für feste Größe zentriert Inhalt | Versuch es |
| w3-Hälfte | Die Hälfte (1/2) Bildschirm Spalte Behälter | Versuch es |
| w3 Drittel | Dritte (1/3) Bildschirm Spalte Behälter | Versuch es |
| w3-twothird | Zwei Drittel (2/3) Bildschirm Spalte Behälter | Versuch es |
| w3-Viertel | Viertel (1/4) Bildschirm Spalte Behälter | Versuch es |
| w3-Dreiviertel | Drei Viertel (3/4) Bildschirm Spalte Container | Versuch es |
| w3-col | Spalte Container für jeden HTML-Inhalt | Versuch es |
| l1 - l12 | Responsive Größen für große Bildschirme | Versuch es |
| m1 - m12 | Responsive Größen für mittlere Bildschirme | Versuch es |
| s1 - s12 | Responsive Größen für kleine Bildschirme | Versuch es |
| w3-hide-small | Verstecken Inhalt auf kleinen Bildschirmen (weniger als 601px) | Versuch es |
| w3-hide-Medium | Ausblenden Inhalt auf dem Medium-Bildschirme | Versuch es |
| w3-hide-large | Verstecken Inhalt auf großen Bildschirmen (größer als 992px) | Versuch es |
Navigation Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-navbar | Navigationsleiste | Versuch es |
| Klapp-Navigationsleiste | Versuch es | |
| w3-topnav | Top Navigationsleiste | Versuch es |
| w3-sidenav | Seitennavigationsleiste | Versuch es |
| Seitennavigationsleiste Hauptinhalt überlagert | Versuch es | |
| Seitennavigationsleiste alle Hauptinhalt überlagert | Versuch es | |
| Seitennavigationsleiste Hauptinhalt nach rechts verschoben | Versuch es | |
| Seitennavigationsleiste mit einem Overlay-Hintergrund | Versuch es | |
| w3-Zusammenbruch | Vollautomatische ansprechende Seite Navigation | Versuch es |
| w3-dropnav | Dropdown-Navigation | Versuch es |
| w3-Drop-Down-Klick | Anklickbare Dropdown-Element | Versuch es |
| w3-Drop-Down-Hover | Hoverable Drop-down-Element | Versuch es |
| Hoverable Drop-down-Element (verwendet in w3-navbar) | Versuch es | |
| Hoverable Drop-down-Element (verwendet in w3-sidenav) | Versuch es | |
| Hoverable Drop-down-Element (verwendet in w3-topnav) | Versuch es | |
| w3-Akkordeon | Verstecken und zusammenklappbar Inhalt | Versuch es |
| Klickbare Akkordeon und Drop-Down verwendet in w3-sidenav | Versuch es | |
| w3-Paginierung | Paginierung Links | Versuch es |
Button-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-btn | Rechteckige HTML-Schaltfläche | Versuch es |
| Rechteckige HTML-Schaltfläche mit Welleneffekt | Versuch es | |
| w3-btn-Schwimm | Rund Floating-Taste | Versuch es |
| Rund Floating-Taste mit Welleneffekt | Versuch es | |
| w3-btn-Gruppe | gruppierte Tasten | Versuch es |
| w3-btn-Block | Voller Breite Tasten (100%) | Versuch es |
Eingangsklassen
| Klasse | Definiert | |
|---|---|---|
| w3-Form | Das gleiche wie w3-Polsterung | Versuch es |
| Eingabeformular als Karte | Versuch es | |
| w3-Eingang | Eingabeelemente | Versuch es |
| Eingabeelemente (Top-Labels) | Versuch es | |
| Eingabeelemente (Boden-Etiketten) | Versuch es | |
| w3-Gruppe | Gruppe von HTML-Elementen | Versuch es |
| w3-label | Eingangsbezeichnung | Versuch es |
| w3-validate | Dieser Test prüft Eingang (Ändert die Farbe, wenn eine ungültige Eingabe) | Versuch es |
| w3-Check | Checkbox Eingabetyp | Versuch es |
| w3-Radio | Radio-Eingabetyp | Versuch es |
| w3-select | Eingangswahl Element | Versuch es |
| w3-belebtes-Eingang | Belebt die Breite eines Eingangs auf 100% | Versuch es |
Modal Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-modal | Modal Behälter | Versuch es |
| w3-modal-Gehalt | Modal Pop-up-Element | Versuch es |
| w3-Tooltip | Tooltip Element | Versuch es |
| w3-Text | Tooltip Text | Versuch es |
| Tooltip inline | Versuch es |
Animationsklassen
| Klasse | Definiert | |
|---|---|---|
| w3-belebtes-top | Animiert ein Element von oben -300px auf 0px | Versuch es |
| w3-belebtes-links | Animiert ein Element von links -300px zu 0px | Versuch es |
| w3-belebtes-bottom | Animiert ein Element aus dem Boden -300px zu 0px | Versuch es |
| w3-belebtes-Recht | Animiert ein Element von rechts -300px zu 0px | Versuch es |
| w3-belebtes-Opazität | Animiert eine Undurchlässigkeit des Elements von 0 bis 1 | Versuch es |
| w3-belebtes-Zoom | Animiert ein Element aus 0 bis 100% in der Größe | Versuch es |
| w3-belebtes-Fading | Animiert eine Undurchlässigkeit des Elements von 0 bis 1 und 1 bis 0 (Überblendungen in und out) | Versuch es |
| w3-Spin | Spin ein Symbol, um 360 Grad | Versuch es |
| Spin jedes Element, um 360 Grad | Versuch es | |
| w3-belebtes-Eingang | Belebt die Breite eines Eingabefeldes auf 100% | Versuch es |
Utility-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-tiny | Gibt eine Schriftgröße von 10 Pixeln | Versuch es |
| w3-small | Gibt eine Schriftgröße von 12 Pixel | Versuch es |
| w3-large | Gibt eine Schriftgröße von 20 Pixeln | Versuch es |
| w3-xlarge | Gibt eine Schriftgröße von 24 Pixeln | Versuch es |
| w3-xxlarge | Gibt eine Schriftgröße von 32 Pixel | Versuch es |
| w3-XXXLarge | Gibt eine Schriftgröße von 48 Pixel | Versuch es |
| w3-Jumbo | Gibt eine Schriftgröße von 64 Pixeln | Versuch es |
| w3-slim | Gibt einen schlankeren Text | Versuch es |
| w3 weit | Gibt einen größeren Text | Versuch es |
| w3-vertical | Gibt vertikalen Text | Versuch es |
| w3-top | Fixed Content auf der Seite | Versuch es |
| w3-Zentrum | zentriert Inhalt | Versuch es |
| w3-Kreis | eingekreist Inhalt | Versuch es |
| w3-hide | Versteckte Inhalte (display: none) | Versuch es |
| w3-Show | Inhalt anzeigen (display: block) | Versuch es |
| w3-show-Block | Alias von w3-show (display: block) | Versuch es |
| w3-show-inline-block | Inhalt anzeigen als inline-block (display: inline-block) | Versuch es |
| w3-hide-small | Verstecken Inhalt auf kleinen Bildschirmen (weniger als 601px) | Versuch es |
| w3-hide-Medium | Ausblenden Inhalt auf dem Medium-Bildschirme | Versuch es |
| w3-hide-large | Verstecken Inhalt auf großen Bildschirmen (größer als 992px) | Versuch es |
| w3-links | Linke eingestellten Inhalt | Versuch es |
| w3-Recht | Rechts eingestellten Inhalt | Versuch es |
| w3-left-align | Links ausgerichteter Text | Versuch es |
| w3-right-align | Rechts bündiger Text | Versuch es |
| w3-rechtfertigen | Rechts und links ausgerichteten Text | Versuch es |
| w3-display-Behälter | Container für w3-Display- Klassen (position: relative) | Versuch es |
| w3-display-topleft | Position Inhalt in der linken oberen Ecke | Versuch es |
| w3-display-topright | Position Inhalt in der rechten oberen Ecke | Versuch es |
| w3-display-bottom | Position Inhalt in der unteren linken Ecke | Versuch es |
| w3-display-bottom | Position Gehalt in der unteren rechten Ecke | Versuch es |
| w3-Display-Mitte | Position Inhalt in der Mitte (horizontal und vertikal) | Versuch es |
| w3-display-topmiddle | Position Inhalt in der Mitte an der Oberseite des Elements | Versuch es |
| w3-display-bottommiddle | Position Inhalt in der Mitte an der Unterseite des Elements | Versuch es |
| w3-serif | Ändert die Schriftart Serif | Versuch es |
| w3-Opazität | Fügt Undurchsichtigkeit Text | Versuch es |
| Fügt Opazität auf ein beliebiges Element | Versuch es | |
| w3-Overlay | Erstellt eine Überlagerungseffekt | Versuch es |
| w3-text-shadow | Fügt Schatten zum Text | Versuch es |
Farbklassen
| Klasse | Definiert | |
|---|---|---|
| w3-rot | Hintergrundfarbe rot | Versuch es |
| w3-pink | Hintergrundfarbe rosa | Versuch es |
| w3-lila | Hintergrundfarbe lila | Versuch es |
| w3-tief-lila | Hintergrundfarbe dunkellila | Versuch es |
| w3-Indigo | Hintergrundfarbe Indigo | Versuch es |
| w3-blau | Hintergrundfarbe blau | Versuch es |
| w3-hellblau | Hintergrundfarbe hellblau | Versuch es |
| w3-cyan | Hintergrundfarbe Cyan | Versuch es |
| w3-aqua | Hintergrundfarbe aqua | Versuch es |
| w3-teal | Hintergrundfarbe blaugrün | Versuch es |
| w3-grün | Hintergrundfarbe grün | Versuch es |
| w3-hellgrün | Hintergrundfarbe hellgrün | Versuch es |
| w3-Kalk | Hintergrundfarbe Kalk | Versuch es |
| w3-Sand | Hintergrundfarbe Sand | Versuch es |
| w3-khaki | Hintergrundfarbe khaki | Versuch es |
| w3-gelb | Hintergrundfarbe gelb | Versuch es |
| w3-Bernstein | Hintergrundfarbe amber | Versuch es |
| w3-Orange | Hintergrundfarbe Orange | Versuch es |
| w3-deep-Orange | Hintergrundfarbe dunkelorange | Versuch es |
| w3-blau-grau | Hintergrundfarbe blau grau | Versuch es |
| w3-braun | Hintergrundfarbe braun | Versuch es |
| w3-hellgrau | Hintergrundfarbe hellgrau | Versuch es |
| w3-grau | Hintergrundfarbe grau | Versuch es |
| w3-dunkelgrau | Hintergrundfarbe dunkelgrau | Versuch es |
| w3-schwarz | Hintergrundfarbe schwarz | Versuch es |
| w3-blass-rot | Hintergrundfarbe blass rot | Versuch es |
| w3-blass-gelb | Hintergrundfarbe hellgelben | Versuch es |
| w3-blass-grün | Hintergrundfarbe hellgrün | Versuch es |
| w3-blass-blau | Hintergrundfarbe hellblauen | Versuch es |
| w3-transparent | Transparent Hintergrund-Farbe |
Hover-Klassen
Alle oben genannten Farben können auch als Hover-Klassen verwendet werden:
| Klasse | Definiert | |
|---|---|---|
| w3-Hover-weiß | Hover Farbe weiß | Versuch es |
| w3-Hover-schwarz | Hover Farbe schwarz | Versuch es |
| w3-Hover-rot | Hover Farbe Rot | Versuch es |
| w3-Hover-blau | Hover Farbe blau | Versuch es |
| w3-Hover-grün | Hover Farbe grün | Versuch es |
| w3-Hover-aqua | Hover Farbe aqua | Versuch es |
| w3-Hover-Orange | Hover Farbe Orange | Versuch es |
| w3-Hover-grau | Hover Farbe grau | Versuch es |
| w3-Hover-blass-grün | Hover Farbe hellgrün | Versuch es |
| w3-Hover-Text-rot | Bewegen Sie den Mauszeiger Textfarbe rot | Versuch es |
| w3-Hover-Text-rot | Bewegen Sie den Mauszeiger Textfarbe blau | Versuch es |
| w3-Hover-Text-grün | Bewegen Sie den Mauszeiger Textfarbe grün | Versuch es |
| w3-Hover-Text-lila | Hover-Text-Farbe lila | Versuch es |
| w3-Hover-Borderline Farbe | Hover Rahmenfarbe | Versuch es |
| w3-Hover-Opazität | Fügt Transparenz zu einem Element auf schweben (60% Opazität) | Versuch es |
| w3-Hover-Schatten | Fügt Schatten auf ein Element auf schweben | Versuch es |
| w3-Hover-none | Entfernt Hover-Effekte aus einem Element | Versuch es |
Round Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-Runde | Element abgerundet (border-radius) 4px | Versuch es |
| w3-Runde-small | Element abgerundet (border-radius) 2px | Versuch es |
| w3-round-Medium | Element abgerundet (border-radius) 4px | Versuch es |
| w3-round-large | Element abgerundet (border-radius) 8px | Versuch es |
| w3-round-xlarge | Element abgerundet (border-radius) 16px | Versuch es |
| w3-round-xxlarge | Element abgerundet (border-radius) 32px | Versuch es |
| w3-round-Jumbo | Element abgerundet (border-radius) 64px | Versuch es |
Padding-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-padding-0 | Entfernt alle Polsterung aus einem Element | Versuch es |
| w3-Polsterung | Padding 8px oben und unten, und 16px links und rechts. | Versuch es |
| w3-padding-tiny | Padding 2px oben und unten, und 4px links und rechts. | Versuch es |
| w3-padding-small | Padding 4px oben und unten, und 8px links und rechts. | Versuch es |
| w3-padding-Medium | Padding 8px oben und unten, und 16px links und rechts. | Versuch es |
| w3-padding-Groß | Padding 12px oben und unten, und 24px links und rechts. | Versuch es |
| w3-padding-xlarge | Padding 16px oben und unten, und 32px links und rechts. | Versuch es |
| w3-padding-xxlarge | Padding 24px oben und unten, und 48px links und rechts. | Versuch es |
| w3-padding-Jumbo | Padding 32px oben und unten, und 64px links und rechts. | Versuch es |
| w3-padding-top | Padding oben 8px | Versuch es |
| w3-padding-right | Padding rechts 16px | Versuch es |
| w3-padding-bottom | Padding unten 8px | Versuch es |
| w3-padding-left | Padding links 16px | Versuch es |
| w3-padding-hor-4 | Padding 4px oben und unten | Versuch es |
| w3-padding-hor-8 | Padding 8px oben und unten | Versuch es |
| w3-padding-hor-12 | Padding 12px oben und unten | Versuch es |
| w3-padding-hor-16 | Padding 16px oben und unten | Versuch es |
| w3-padding-hor-24 | Padding 24px oben und unten | Versuch es |
| w3-padding-hor-32 | Padding 32px oben und unten | Versuch es |
| w3-padding-hor-48 | Padding 48px oben und unten | Versuch es |
| w3-padding-hor-64 | Padding 64px oben und unten | Versuch es |
| w3-padding-hor-128 | Padding 128px oben und unten | Versuch es |
| w3-padding-ver-4 | Padding 4px links und rechts. | Versuch es |
| w3-padding-ver-8 | Padding 8px links und rechts. | Versuch es |
| w3-padding-ver-16 | Padding 16px links und rechts. | Versuch es |
| w3-padding-ver-24 | Padding 24px links und rechts. | Versuch es |
| w3-padding-ver-32 | Padding 32px links und rechts. | Versuch es |
| w3-padding-ver-48 | Padding 48px links und rechts. | Versuch es |
| w3-padding-ver-64 | Padding 64px links und rechts. | Versuch es |
Margin-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-margin-0 | Entfernt alle Ränder von einem Element | Versuch es |
| w3-Marge | Margin 16px | Versuch es |
| w3-margin-top | Margin oben 16px | Versuch es |
| w3-margin-right | Margin rechts 16px | Versuch es |
| w3-margin-bottom | Margin Boden 16px | Versuch es |
| w3-margin-left | Margin links 16px | Versuch es |
Border-Klassen
| Klasse | Definiert | |
|---|---|---|
| w3-Grenze | Grenzen (oben, rechts, unten, links) | Versuch es |
| w3-border-top | Border oben | Versuch es |
| w3-border-right | Border Recht | Versuch es |
| w3-border-bottom | Border bottom | Versuch es |
| w3-border-left | Border links | Versuch es |
| w3-border-0 | Entfernt alle Grenzen | Versuch es |
| w3-Borderline Farbe | Zeigt alle definierten Grenzen in einer bestimmten Farbe (wie rot, usw.) | Versuch es |
| w3-bottombar | Fügt eine starke untere Grenze (bar) zu einem Element | Versuch es |
| w3-leftbar | Fügt einen dicken linken Rand (bar) zu einem Element | Versuch es |
| w3-rightbar | Fügt einen dicken rechten Rand (bar) zu einem Element | Versuch es |
| w3-topbar | Fügt einen dicken oberen Rand (bar) zu einem Element | Versuch es |
| w3-Hover-Borderline Farbe | Hoverable Rahmenfarbe | Versuch es |