W3.CSS Gevallestudie
Bou 'n responsiewe webwerf van nuuts af
In hierdie hoofstuk sal ons 'n W3.CSS-responsiewe webwerf van nuuts af bou.
Begin eers met 'n eenvoudige HTML-bladsy, met 'n aanvanklike viewport en 'n skakel na 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>
Plaas elemente in houers
Om algemene kantlyne en opvulling by te voeg, plaas die HTML-elemente in houers (<div class="w3-container">)
Skei die kopskrif van die res van die inhoud deur twee afsonderlike <div>-elemente te gebruik:
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 Klasse
Kleurklasse definieer die kleur van elemente.
Hierdie voorbeeld voeg 'n kleur by die 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>
Grootte Klasse
Grootteklasse definieer die teksgrootte vir elemente.
Hierdie voorbeeld voeg 'n grootte by beide kopelemente:
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>
Gebruik semantiese elemente
As jy daarvan hou om die HTML5 semantiese aanbevelings te volg. asseblief doen!
Dit maak nie saak vir W3.CSS of jy <div> of <header> gebruik nie.
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>
Meerkolom-responsiewe uitleg
Met W3.CSS is dit maklik om 'n multikolom-responsiewe uitleg te skep.
Die kolomme sal hulself outomaties herrangskik wanneer dit op verskillende skermgroottes gekyk word.
Sommige roosterreëls:
- Begin met 'n ryklas <div class="w3-row-padding">
- Gebruik vooraf gedefinieerde klasse soos "w3-third" om vinnig roosterkolomme te maak
- Plaas jou teksinhoud binne die roosterkolomme
Hierdie voorbeeld wys hoe om drie kolomme van gelyke breedte te skep:
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>
Hierdie voorbeeld wys hoe om vier kolomme van gelyke breedte te skep:
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>
Kolomme met verskillende breedtes
Hierdie voorbeeld skep 'n drie-kolom uitleg waar die kolom in die middel wyer is as die eerste en laaste 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>
Navigasiebalke
'n Navigasiebalk is 'n navigasie-opskrif wat bo-aan die bladsy geplaas word.
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>
Bladsynavigasie
Met synavigasie het jy verskeie opsies:
- Vertoon altyd die navigasiepaneel aan die linkerkant van die bladsyinhoud.
- Gebruik 'n opvoubare, "ten volle outomatiese" responsiewe synavigasie.
- Maak die navigasiepaneel oop oor die linkerdeel van die bladsyinhoud.
- Maak die navigasiepaneel oop oor al die inhoud van die bladsy.
- Skuif die bladsy-inhoud na regs wanneer die navigasiepaneel oopgemaak word.
- Vertoon die navigasiepaneel aan die regterkant in plaas van die linkerkant
Hierdie voorbeeld maak die navigasievenster oor die linkerdeel van die bladsyinhoud oop:
<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 wat gebruik word om die spyskaart oop te maak en te versteek:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}