Duyarlı Web Tasarımı - Çerçeveler
Duyarlı Tasarım sunan birçok ücretsiz CSS Çerçevesi vardır.
W3.CSS'yi kullanma
Duyarlı bir tasarım oluşturmanın harika bir yolu, W3.CSS gibi duyarlı bir stil sayfası kullanmaktır.
W3.CSS, her boyutta güzel görünen siteler geliştirmeyi kolaylaştırır!
W3.CSS Demosu
Duyarlılığı görmek için sayfayı yeniden boyutlandırın!
Londra
Londra, İngiltere'nin başkentidir.
13 milyonun üzerinde nüfusu ile Birleşik Krallık'ın en kalabalık şehridir.
Paris
Paris, Fransa'nın başkentidir.
Paris bölgesi, 12 milyondan fazla nüfusuyla Avrupa'nın en büyük nüfus merkezlerinden biridir.
Tokyo
Tokyo, Japonya'nın başkentidir.
Büyük Tokyo Bölgesi'nin merkezi ve dünyanın en kalabalık metropol bölgesidir.
Örnek
<!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>
W3.CSS hakkında daha fazla bilgi edinmek için W3.CSS Eğitimimizi okuyun .
Önyükleme
Bir diğer popüler çerçeve ise Bootstrap. Duyarlı web sayfaları oluşturmak için HTML ve CSS kullanır:
Örnek
<!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>
Bootstrap hakkında daha fazla bilgi edinmek için Bootstrap Eğitimimize gidin .
W3Schools Spaces'ı hiç duydunuz mu? Burada web sitenizi sıfırdan oluşturabilir veya bir şablon kullanabilir ve ücretsiz olarak barındırabilirsiniz.
Ücretsiz başlayın ❯* Kredi kartına gerek yok