RWD freymvorklari

Moslashuvchan dizayn taklif qiluvchi ko‘plab bepul CSS freymvorklari mavjud.

W3.CSS dan foydalanish

Moslashuvchan dizayn yaratishning ajoyib usuli — W3.CSS kabi moslashuvchan uslublar jadvalidan foydalanishdir

W3.CSS har qanday o‘lchamda chiroyli ko‘rinadigan saytlar yaratishni osonlashtiradi!

W3.CSS namoyishi

Moslashuvchanlikni (responsiveness) ko‘rish uchun sahifa o‘lchamini o‘zgartiring!

London

London — Angliyaning poytaxti.

U Birlashgan Qirollikning eng ko‘p aholisi shahri bo‘lib, metropoliten hududida 13 milliondan ortiq aholi yashaydi.

Parij

Parij — Fransiyaning poytaxti.

Parij hududi Yevropadagi eng yirik aholi markazlaridan biri bo‘lib, 12 milliondan ortiq aholi yashaydi.

Tokio

Tokio — Yaponiyaning poytaxti.

U Katta Tokio hududining markazi va dunyodagi eng ko‘p aholisi metropoliten hududidir.

Misol

<!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>

O‘zingiz sinab ko‘ring »

W3.CSS haqida ko‘proq bilish uchun W3.CSS darsligimizni o‘qing.

Bootstrap

Yana bir mashhur freymvork — Bootstrap. U moslashuvchan veb-sahifalar yaratish uchun HTML va CSS’dan foydalanadi:

Misol

<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>

O‘zingiz sinab ko‘ring »

Bootstrap haqida ko‘proq bilish uchun Bootstrap darsligimizga murojaat qiling.

W3Schools Spaces haqida eshitganmisiz? Bu yerda veb-saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz mumkin.

Bepul boshlang ❯

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish