W3.CSS Ingebouwde responsiviteit
W3.CSS bevat een responsief, mobiel-eerst rastersysteem om de lay-out te verwerken:
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
rest
1/4
rest
100px
45px
rest
W3.CSS-responsieve klassen
Het rastersysteem van W3.CSS reageert en de kolommen worden automatisch opnieuw gerangschikt, afhankelijk van de schermgrootte:
| Klas | Beschrijving |
|---|---|
| w3-half | Beslaat 1/2 van het raam (op middelgrote en grote schermen) |
| w3-derde | Beslaat 1/3 van het venster (op middelgrote en grote schermen) |
| w3-tweederde | Beslaat 2/3 van het raam (op middelgrote en grote schermen) |
| w3-kwartaal | Neemt 1/4 van het venster in beslag (op middelgrote en grote schermen) |
| w3-driekwart | Beslaat 3/4 van het raam (op middelgrote en grote schermen) |
| w3-rust | Neemt de rest van de kolombreedte in beslag |
| w3-col | Definieert één kolom in een responsief raster met 12 kolommen |
| w3-mobiel | Voegt mobile-first responsiviteit toe aan een cel (kolom). Geeft elementen weer als blokelementen op mobiele apparaten. |
De bovenstaande responsieve klassen moeten in een w3-row- klasse (of w3-row-padding- klasse) worden geplaatst om volledig responsief te zijn.
| Klas | Beschrijving |
|---|---|
| w3-rij | Container voor responsieve klassen, zonder opvulling |
| w3-rij-opvulling | Container voor responsieve klassen, met 8px linker- en rechteropvulling |
| w3-inhoud | Container voor gecentreerde inhoud van vaste grootte |
| w3-hide-small | Verbergt inhoud op kleine schermen (minder dan 601px) |
| w3-hide-medium | Verbergt inhoud op middelgrote schermen |
| w3-verberg-groot | Verbergt inhoud op grote schermen (groter dan 992px) |
| l1 - l12 | Responsieve formaten voor grote schermen |
| m1 - m12 | Responsieve formaten voor middelgrote schermen |
| s1 - s12 | Responsieve formaten voor kleine schermen |
De w3-halve klasse
De breedte van de klasse w3-half is 1/2 van het bovenliggende element (style="width:50%").
Op schermen kleiner dan 601 pixels wordt het formaat aangepast naar 100%.
w3-half
w3-half
Voorbeeld
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
De w3-derde Klasse
De breedte van de w3-derde klasse is 1/3 van het bovenliggende element (style="width:33.33%").
Op schermen kleiner dan 601 pixels wordt het formaat aangepast naar 100%.
w3-derde
w3-derde
w3-derde
Voorbeeld
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
De w3-tweederde klasse
De breedte van de klasse w3-twothird is 2/3 van het bovenliggende element (style="width:66,66%").
Op schermen kleiner dan 601 pixels wordt het formaat aangepast naar 100%.
w3-tweederde
w3-derde
Voorbeeld
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
De w3-kwart klas
De breedte van de klasse w3-quarter is 1/4 van het bovenliggende element (style="width:25%").
Op schermen kleiner dan 601 pixels wordt het formaat aangepast naar 100%.
w3-kwartaal
w3-kwartaal
w3-kwartaal
w3-kwartaal
Voorbeeld
<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>
De w3-driekwart klasse
De breedte van de klasse w3-threequarter is 3/4 van het bovenliggende element (style="width:75%").
Op schermen kleiner dan 601 pixels wordt het formaat aangepast naar 100%.
w3-driekwart
w3-kwartaal
Voorbeeld
<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>
Combinaties
w3-kwartaal
w3-half
w3-kwartaal
w3-kwartaal
w3-kwartaal
w3-half
w3-half
w3-kwartaal
w3-kwartaal
Geneste rijen
Voorbeeld: w3-half Inside w3-half
<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>
Kolommen die rust gebruiken
De klasse w3-col definieert één kolom in een responsief raster met 12 kolommen.
De klasse w3-rest neemt de rest van de breedte in beslag:
ik ben 150px
ik ben de rest
Voorbeeld
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
Kolommen met Percentage
U kunt ook de CSS-eigenschap width gebruiken om de breedte in procenten in te stellen:
20%
60%
20%
Voorbeeld
<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>
De w3-contentklasse
De klasse w3-content definieert een container voor gecentreerde inhoud met een vaste grootte. Gebruik de CSS max-width eigenschap om de standaardbreedte (980px) te overschrijven.
Voorbeeld
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-rij vs. w3-rij-opvulling
De klasse w3-row definieert een container zonder opvulling, terwijl de klasse w3-row-padding een 8px linker- en rechteropvulling aan elke kolom toevoegt:
w3-rij:
w3-derde
w3-derde
w3-derde
w3-rij-opvulling:
w3-derde
w3-derde
w3-derde
w3-rij:
w3-rij-opvulling:
Voorbeeld
<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_snowtops.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_snowtops.jpg"></div>
</div>
Stretch gewatteerde rijen
De klasse w3-stretch verwijdert de rechter- en linkermarge van een element. Deze klasse wordt vaak gebruikt om een gewatteerde rij uit te rekken:
Een voorbeeld met w3-stretch:
Een voorbeeld zonder w3-stretch:
Voorbeeld
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
Responsief tonen / verbergen
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.