Responsive Klassen
W3.CSS umfasst eine ansprechende, mobile erste Grid-System, das Layout zu handhaben:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
sich ausruhen
1/4
sich ausruhen
100px
45px
sich ausruhen
W3.CSS des Grid-System reagiert, und die Spalten werden automatisch neu zu ordnen, auf die Bildschirmgröße abhängig:
| Klasse | Beschreibung |
|---|---|
| w3-Hälfte | Belegt 1/2 des Fensters (auf mittlere und große Bildschirme) |
| w3 Drittel | Belegt 1/3 des Fensters (auf mittlere und große Bildschirme) |
| w3-twothird | Belegt 2/3 des Fensters (auf mittlere und große Bildschirme) |
| w3-Viertel | Belegt 1/4 des Fensters (auf mittlere und große Bildschirme) |
| w3-Dreiviertel | Belegt 3/4 des Fensters (auf mittlere und große Bildschirme) |
| w3-Rest | Definiert den Rest einer Zeile |
| w3-col | Definiert eine Spalte in einer 12-Säule ansprechende Fluid Grid (mehr in einem späteren Kapitel) |
Responsive Reihen
Responsive Klassen müssen in einer w3-Reihe platziert werden, vollständig zu reagieren.
| Klasse | Beschreibung |
|---|---|
| w3-Reihe | Definiert eine Polsterung lose Behälter für ansprechende Klassen. |
| w3-Reihe-Polsterung | Definiert einen gepolsterten Behälter für ansprechende Klassen. |
Die w3 Hälfte der Klasse
Die Breite der w3-Hälfte Klasse 1/2 des Elternelements (style = "width: 50%").
Auf kleinen Bildschirmen * ändert die Größe auf 100%.
w3-Hälfte
w3-Hälfte
Beispiel
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Versuch es selber " Die w3 Drittel Klasse
Die Breite der w3-dritte Klasse 1/3 des Elternelements (style = "width: 33,33%").
Auf kleinen Bildschirmen * ändert die Größe auf 100%.
w3 Drittel
w3 Drittel
w3 Drittel
Beispiel für die Verwendung w3 Drittel
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Versuch es selber " Die w3-twothird Klasse
Die Breite der w3-twothird Klasse 2/3 des Elternelements (style = "width: 66,66%").
Auf kleinen Bildschirmen * ändert die Größe auf 100%.
w3-twothird
w3 Drittel
Beispiel für die Verwendung w3 Drittel
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Versuch es selber " Die w3-Viertel-Klasse
Die Breite der w3-Viertel Klasse 1/4 des Elternelements (style = "width: 25%").
Auf kleinen Bildschirmen * ändert die Größe auf 100%.
w3-Viertel
w3-Viertel
w3-Viertel
w3-Viertel
Beispiel für die Verwendung w3-Viertel
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Versuch es selber " Die w3-Klasse Dreiviertel
Die Breite der w3-Dreiviertel - Klasse ist 3/4 des Elternelements (style = "width: 75%").
Auf kleinen Bildschirmen * ändert die Größe auf 100%.
w3-Viertel
w3-Viertel
Beispiel für die Verwendung w3-Dreiviertel
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Versuch es selber " Kombinationen
w3-Viertel
w3-Hälfte
w3-Viertel
w3-Viertel
w3-Viertel
w3-Hälfte
w3-Hälfte
w3-Viertel
w3-Viertel
Verschachtelte Zeilen
Beispiel: w3 Hälfte Innen w3-Hälfte
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Versuch es selber " Columns ReST
Ich bin 150px
Ich bin der Rest
Beispiel für die Verwendung w3-Rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Versuch es selber " Spalten unter Verwendung von Percent
20%
60%
20%
Beispiel für die Verwendung Prozent
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Versuch es selber " Der w3-Gehalt Klasse
Die w3-Content - Klasse definiert einen Container für feste Größe zentriert Inhalt:
Beispiel
<body class="w3-content" style="max-width:500px">
page content...
</body> 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 " 12-Säule ansprechende Fluid Grid
W3.CSS unterstützt auch eine erweiterte 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.
Sie werden mehr über das Fluid Grid in einem späteren Kapitel lernen.
* Bildschirmauflösung
Die Einbau-Reaktionsfähigkeit W3.CSS verwendet die DP Größe eines Bildschirms.
W3.CSS wird ein iPhone 6 mit einer Auflösung von 750 x 1334 Pixel als ein kleiner Bildschirm von 375 x 667 Pixel zu behandeln.
Kleine Bildschirme sind weniger als 601 Pixel DP, mittlere Bildschirme sind weniger als 993 Pixel DP.
Im Folgenden finden Sie eine Liste der typischen Geräteauflösungen und DP Größen gemeldet:
iPhone 4
Lösung
640 x 960
DP
320 x 480
iPhone 5
Lösung
640 x 1136
DP
320 x 528
iPhone 6
Lösung
750 x 1334
DP
375 x 667
Iphone 6s
Lösung
1080 x 1920
DP
414 x 736
Galaxy S6
Lösung
1440 x 2560
DP
360 x 640
Anmerkung 4
Lösung
1440 x 2560
DP
400 x 853
Nexus 6
Lösung
1440 x 2560
DP
411 x 731
Ipad Mini
Lösung
768 x 1024
DP
768 x 1024
iPad
Lösung
1536 x 2048
DP
728 x 1024
Typische Laptop
Lösung
1366 x 768
DP
1366 x 768
Typische Desktop-
Lösung
1920 x 1080
DP
1920 x 1080