W3.CSS - Een mobiele app bouwen
Films 2014
Bevroren
De reacties op de animaties waren belachelijk.
De fout in onze sterren
Ontroerend, aangrijpend en echt goed gemaakt.
De Wrekers
Een enorm succes voor Marvel en Disney.
Een eenvoudige mobiele pagina maken
De pro-versie van W3.CSS is perfect voor mobiele apps. Het is klein en erg snel.
Voorbeeld
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>
<!-- Content here -->
</body>
</html>
Content toevoegen
Voorbeeld (met klassieke HTML-elementen)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>
<div class="w3-cell-row">
<div class="w3-cell">
<img
src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div>
Voorbeeld (met semantische HTML-elementen)
<header class="w3-container">
<h1>Header</h1>
</header>
<div class="w3-cell-row">
<div class="w3-cell">
<img
src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="w3-container">
<h3>Footer</h3>
</footer>
</body>
</html>
Een kleurenthema toevoegen
Voorbeelden
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-red.css">
Lees meer over kleurthema's in W3.CSS Kleurthema's .
Voeg meer stijl toe
Voorbeeld
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3>
Add Side Navigation
Example
<nav class="w3-sidebar w3-bar-block w3-card" style="width:30%">
<div class="w3-red">
<a href="#" onclick="closeSidebar()"
class="w3-button w3-display-topright w3-xlarge">X</a>
<div
class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg"
alt="avatar">
</div>
</div>
<a
class="w3-bar-item w3-button"
href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a
class="w3-bar-item w3-button" href="#">Messages</a>
</nav>
<script>
function openSidebar() {
document.getElementById("mySidebar").style.display = "block";
}
function closeSidebar() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
Fixed Navigation, Header and Footer
Example
<header
class="w3-top">
<nav
class="w3-top">
<footer
class="w3-bottom">