Responsief webdesign - Frameworks
Er zijn veel gratis CSS Frameworks die Responsive Design bieden.
W3.CSS gebruiken
Een geweldige manier om een responsief ontwerp te maken, is door een responsief stijlblad te gebruiken, zoals W3.CSS
W3.CSS maakt het gemakkelijk om sites te ontwikkelen die er op elk formaat goed uitzien!
W3.CSS-demo
Verklein de pagina om de responsiviteit te zien!
Londen
Londen is de hoofdstad van Engeland.
Het is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 13 miljoen inwoners.
Parijs
Parijs is de hoofdstad van Frankrijk.
De omgeving van Parijs is een van de grootste bevolkingscentra van Europa, met meer dan 12 miljoen inwoners.
Tokio
Tokio is de hoofdstad van Japan.
Het is het centrum van de Greater Tokyo Area en het dichtstbevolkte grootstedelijke gebied ter wereld.
Voorbeeld
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div
class="w3-container w3-blue">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Lees onze W3.CSS-zelfstudie voor meer informatie over W3.CSS .
Bootstrap
Een ander populair framework is Bootstrap. Het gebruikt HTML en CSS om responsieve webpagina's te maken:
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white
text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Ga voor meer informatie over Bootstrap naar onze Bootstrap-zelfstudie .
Ooit gehoord van W3Schools Spaces ? Hier kunt u uw website helemaal opnieuw maken of een sjabloon gebruiken en deze gratis hosten.
Ga gratis aan de slag* geen kredietkaart nodig