W3.CSS- containers
Dit is mijn kop
Dit is mijn artikel
Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin. Dit artikel is lichtgrijs en de tekst is bruin.
Dit is mijn voettekst
De containerklasse
De klasse w3-container voegt een 16px linker- en rechteropvulling toe aan elk HTML-element.
De klasse w3-container is de perfecte klasse om te gebruiken voor alle HTML-containerelementen zoals:
<div>, <article>, <section>, <header>, <footer>, <form> en meer.
Containers bieden gelijkheid
De w3-container biedt gelijkheid voor alle HTML-containerelementen:
- Gemeenschappelijke marges
- Gemeenschappelijke opvullingen
- Algemene uitlijningen
- Veelvoorkomende lettertypen
- Veel voorkomende kleuren
Om een container te gebruiken, voegt u gewoon een w3-containerklasse toe aan elk element:
Voorbeeld
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Om een kleur toe te voegen, voegt u gewoon een w3 -kleurklasse toe :
Voorbeeld
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Kopteksten en voetteksten
De klasse w3-container kan worden gebruikt om headers op te maken:
koptekst
Voorbeeld
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Voorbeeld
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Er is geen verschil in de manier waarop W3.CSS <div>- en <header>-elementen behandelt.
De klasse w3-container kan worden gebruikt om voetteksten op te maken:
Voorbeeld
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Voorbeeld
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Veel webpagina's gebruiken <div>-elementen in plaats van <header>- en <footer>-elementen.
Artikelen en secties
De klasse w3-container kan worden gebruikt om <article>- en <section>-elementen op te maken:
Voorbeeld
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Veel webpagina's gebruiken <div>-elementen in plaats van <article>- en <section>-elementen.
Voorbeeld webpagina
koptekst
Een auto is een zelfaangedreven motorvoertuig op wielen dat wordt gebruikt voor transport. De meeste definities van de term specificeren dat auto's zijn ontworpen om voornamelijk op de weg te rijden. (Wikipedia)
Voorbeeld met HTML <div>-elementen
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
Voorbeeld met semantische HTML-elementen
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
Opvulling van containers
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>