Desain Web Responsif - Kerangka
Ada banyak Kerangka CSS gratis yang menawarkan Desain Responsif.
Menggunakan W3.CSS
Cara yang bagus untuk membuat desain responsif, adalah dengan menggunakan lembar gaya responsif, seperti W3.CSS
W3.CSS memudahkan untuk mengembangkan situs yang terlihat bagus dalam berbagai ukuran!
Demo W3.CSS
Ubah ukuran halaman untuk melihat responsivitas!
London
London adalah ibu kota Inggris.
Ini adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Paris
Paris adalah ibu kota Prancis.
Wilayah Paris adalah salah satu pusat populasi terbesar di Eropa, dengan lebih dari 12 juta penduduk.
Tokyo
Tokyo adalah ibu kota Jepang.
Ini adalah pusat Wilayah Tokyo Raya, dan wilayah metropolitan terpadat di dunia.
Contoh
<!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>
Untuk mempelajari lebih lanjut tentang W3.CSS, baca Tutorial W3.CSS kami .
Bootstrap
Kerangka kerja populer lainnya adalah Bootstrap. Ini menggunakan HTML dan CSS untuk membuat halaman web responsif:
Contoh
<!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>
Untuk mempelajari lebih lanjut tentang Bootstrap, buka Tutorial Bootstrap kami .
Pernah mendengar tentang W3Schools Spaces ? Di sini Anda dapat membuat situs web Anda dari awal atau menggunakan template, dan menghostingnya secara gratis.
Mulai gratis* tidak perlu kartu kredit