Responsive Grid
W3.CSS unterstützt eine 12-Säule ansprechende Fluid Grid.
Ändern der Größe der Seite den Effekt zu sehen!
Dieser Teil wird 12 Spalten auf einem kleinen Bildschirm, 4 auf einem Medium Bildschirm und 3 auf einem großen Bildschirm einnehmen.
Dieser Teil wird 12 Spalten auf einem kleinen Bildschirm, 8 auf einem Medium Bildschirm und 9 auf einem großen Bildschirm einnehmen.
Beispiel
<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> Versuch es selber " Responsive Reihen
W3.CSS des Grid-System reagiert, und die Spalten neu zu ordnen, automatisch in Abhängigkeit von der Bildschirmgröße: Auf einem großen Bildschirm, um es mit dem in drei Spalten organisiert Inhalte besser aussehen könnte, aber auf einem kleinen Bildschirm wäre es besser, wenn der Inhalt Elemente wurden auf die aufeinander gestapelt sind.
Spalten müssen in einer Reihe liegen vollständig zu reagieren.
| Klasse | Beschreibung |
|---|---|
| w3-Reihe | Definiert eine Polsterung lose Behälter für reaktions Spalten. |
| w3-Reihe-Polsterung | Definiert einen gepolsterten Behälter für reaktions Spalten. |
| w3-col | Definiert eine Spalte mit Unterklassen |
w3-col hat die folgenden Unterklassen:
Spalten für kleine Bildschirme (typische Smartphones):
| Klasse | Beschreibung |
|---|---|
| s1 | Definiert 1 von 12 Spalten (Breite: 08.33%) für kleine Bildschirme |
| s2 | Definiert 2 von 12 Spalten (Breite: 16,66%) für kleine Bildschirme |
| s3 | Definiert 3 von 12 Spalten (Breite: 25,00%) für kleine Bildschirme |
| s4 | Definiert 4 von 12 Spalten (Breite: 33,33%) für kleine Bildschirme |
| s5-s11 | |
| s12 | Definiert 12 von 12 Spalten (Breite: 100%). Standard für kleine Bildschirme |
Spalten für mittlere Bildschirme (typische Tabletten):
| Klasse | Beschreibung |
|---|---|
| m1 | Definiert 1 von 12 Spalten (Breite: 08.33%) für mittlere Bildschirme |
| m2 | Definiert 2 von 12 Spalten (Breite: 16,66%) für mittlere Bildschirme |
| m3 | Definiert 3 von 12 Spalten (Breite: 25,00%) für mittlere Bildschirme |
| m4 | Definiert 4 von 12 Spalten (Breite: 33,33%) für mittlere Bildschirme |
| m5-m11 | |
| m12 | Definiert 12 von 12 Spalten (Breite: 100%). Standard für mittlere Bildschirme |
Spalten für große Bildschirme (typische Laptops):
| Klasse | Beschreibung |
|---|---|
| l1 | Definiert 1 von 12 Spalten (Breite: 08.33%) für große Bildschirme |
| l2 | Definiert 2 von 12 Spalten (Breite: 16,66%) für große Bildschirme |
| l3 | Definiert 3 von 12 Spalten (Breite: 25,00%) für große Bildschirme |
| l4 | Definiert 4 von 12 Spalten (Breite: 33,33%) für große Bildschirme |
| l5-l11 | |
| l12 | Definiert 12 von 12 Spalten (Breite: 100%). Standard für große Bildschirme) |
Die Klassen können oben kombiniert werden dynamischer und flexibler Layouts zu erstellen.
Jede Klasse skaliert, so dass , wenn Sie die gleiche Breite für kleine, mittlere und große Bildschirme einstellen möchten, müssen Sie nur die kleine Klasse zu spezifizieren. Und wenn Sie die gleiche Breite auf mittlere und große Bildschirme wollen, müssen Sie nur die Mittelklasse zu spezifizieren.
Wenn Sie jedoch nur Medium und / oder große Klassen, wird die Breite immer auf 100% auf kleinen Bildschirmen zu transformieren.
Hinweis: Die Anzahl der Spalten sollte immer summieren sich zu 12 für jede Zeile (6 + 6, 3 + 3 + 6, 9 + 3, etc.)!
Zwei gleiche Spalten
Zwei Spalten gleicher Breite (50% / 50%) auf allen Bildschirmgrößen:
s6
s6
Beispiel
<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> Versuch es selber " Zwei Ungleiche Spalten
Zwei Säulen der ungleichen Breite (25% / 75%) auf alle Bildschirmgrößen:
s3
s9
Beispiel
<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> Versuch es selber " Drei gleiche Spalten
Drei Spalten gleicher Breite (33,3% / 33,3% / 33,3%) auf allen Bildschirmgrößen:
s4
s4
s4
Beispiel
<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> Versuch es selber " Drei Ungleiche Spalten
Drei verschiedene Breiten Säulen (25% / 50% / 25%) auf Tablets, Laptops und Desktops. Bei den Mobiltelefonen, stapeln die Spalten automatisch (100% Breite):
m3
m6
m3
Beispiel
<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> Versuch es selber " Hinweis: Dieses Beispiel ist das gleiche wie mit w3-Viertel (m3), w3 Hälfte (m6), w3 Viertel (m3), die Sie in dem gelernten W3.CSS Responsive Kapitel.
sechs Spalten
Sechs Spalten gleicher Breite (jeweils 16%) auf Tablets, Laptops und Desktops. Bei den Mobiltelefonen, stapeln die Spalten automatisch (100% Breite):
m2
m2
m2
m2
m2
m2
Beispiel
<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> Versuch es selber " Mixed: Mobile und Laptops
Sie können Klassen kombinieren, um ein dynamisches und flexibles Layout zu erstellen. In diesem Beispiel wird eine zweispaltige Layout mit einer 83,34% / 16,66% (l8, l4) split auf großen Bildschirmen und einer 50% / 50% (s6, s6) split auf kleinen Bildschirmen zu produzieren:
l8 s6
l4 s6
Beispiel
<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> Versuch es selber " Mixed: Mobile, Tablets und Laptops
In diesem Beispiel wird eine drei-Spalten-Layout mit einer 25% / 58,34% / 16,66% (l3, l7, l2) split auf großen Bildschirmen zu produzieren, 50% / 25% / 25% (m6, m3, m3) split auf mittlere Bildschirme und eine 33,3% / 33,3% / 33,3% (s4, s4 s4) split auf kleinen Bildschirmen:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Beispiel
<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> Versuch es selber " Der Unterschied zwischen w3-Reihe und w3-Reihe-Polsterung
Die w3-Reihe-Klasse definiert einen gepolsterten losen Behälter, während der w3-Reihe-padding-Klasse jeder Spalte eine 8px linke und rechte Polsterung fügt hinzu:
w3-Reihe:
w3-Reihe-padding:
Beispiel
<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> Versuch es selber " Mit Prozent
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Beispiel
<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> Versuch es selber " Mit w3-Rest
150px
sich ausruhen
75px
sich ausruhen
100px
100px
sich ausruhen
Quartal
80px
sich ausruhen
Quartal
Quartal
Quartal
35%
sich ausruhen
Beispiel Rest mit
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Versuch es selber "