W3.CSS-casestudy
Een responsieve website vanaf nul bouwen
In dit hoofdstuk gaan we vanaf het begin een W3.CSS responsive website bouwen.
Begin eerst met een eenvoudige HTML-pagina, met een eerste viewport en een link naar W3.CSS.
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Elementen in containers plaatsen
Om algemene marges en opvulling toe te voegen, plaatst u de HTML-elementen in containers (<div class="w3-container">)
Scheid de koptekst van de rest van de inhoud met behulp van twee afzonderlijke <div>-elementen:
Voorbeeld
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Kleur klassen
Kleurklassen bepalen de kleur van elementen.
Dit voorbeeld voegt een kleur toe aan het eerste <div> element:
Voorbeeld
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Maatklassen
Grootteklassen definieert de tekstgrootte voor elementen.
Dit voorbeeld voegt een grootte toe aan beide kopelementen:
Voorbeeld
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Semantische elementen gebruiken
Als u de semantische aanbevelingen van HTML5 wilt volgen. doe alsjeblieft!
Het maakt voor W3.CSS niet uit of u <div> of <header> gebruikt.
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Responsieve lay-out met meerdere kolommen
Met W3.CSS is het eenvoudig om een responsieve lay-out met meerdere kolommen te maken.
De kolommen worden automatisch opnieuw gerangschikt wanneer ze op verschillende schermformaten worden bekeken.
Enkele rasterregels:
- Begin met een rijklasse <div class="w3-row-padding">
- Gebruik vooraf gedefinieerde klassen zoals "w3-third" om snel rasterkolommen te maken
- Plaats uw tekstinhoud binnen de rasterkolommen
Dit voorbeeld laat zien hoe u drie kolommen van gelijke breedte kunt maken:
Voorbeeld
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Dit voorbeeld laat zien hoe u vier kolommen van gelijke breedte kunt maken:
Voorbeeld
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Kolommen met verschillende breedtes
In dit voorbeeld wordt een lay-out met drie kolommen gemaakt waarbij de kolom in het midden breder is dan de eerste en laatste kolom:
Voorbeeld
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Navigatiebalken
Een navigatiebalk is een navigatiekop die boven aan de pagina wordt geplaatst.
Voorbeeld
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Paginanavigatie
Met zijnavigatie heb je verschillende opties:
- Geef altijd het navigatievenster links van de pagina-inhoud weer.
- Gebruik een inklapbare, "volautomatische" responsieve zijnavigatie.
- Open het navigatievenster over het linkerdeel van de pagina-inhoud.
- Open het navigatievenster over alle pagina-inhoud.
- Schuif de pagina-inhoud naar rechts bij het openen van het navigatievenster.
- Geef het navigatievenster aan de rechterkant weer in plaats van aan de linkerkant
Dit voorbeeld opent het navigatievenster over het linkerdeel van de pagina-inhoud:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript gebruikt om het menu te openen en te verbergen:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}