Responsiewe webontwerp - raamwerke
Daar is baie gratis CSS-raamwerke wat responsiewe ontwerp bied.
Gebruik W3.CSS
'n Goeie manier om 'n responsiewe ontwerp te skep, is om 'n responsiewe stylblad te gebruik, soos W3.CSS
W3.CSS maak dit maklik om webwerwe te ontwikkel wat in enige grootte mooi lyk!
W3.CSS Demo
Verander die grootte van die bladsy om die reaksie te sien!
Londen
Londen is die hoofstad van Engeland.
Dit is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 13 miljoen inwoners.
Parys
Parys is die hoofstad van Frankryk.
Die Parys-gebied is een van die grootste bevolkingsentrums in Europa, met meer as 12 miljoen inwoners.
Tokio
Tokio is die hoofstad van Japan.
Dit is die middelpunt van die Groter Tokio-gebied, en die mees bevolkte metropolitaanse gebied ter wêreld.
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>
Om meer te wete te kom oor W3.CSS, lees ons W3.CSS Tutoriaal .
Bootstrap
Nog 'n gewilde raamwerk is Bootstrap. Dit gebruik HTML en CSS om responsiewe webblaaie te maak:
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>
Om meer te wete te kom oor Bootstrap, gaan na ons Bootstrap-tutoriaal .
Al ooit gehoor van W3Schools Spaces ? Hier kan jy jou webwerf van nuuts af skep of 'n sjabloon gebruik en dit gratis aanbied.
Begin gratis ❯* geen kredietkaart benodig nie