Responzivní webový design – rámce
Existuje mnoho bezplatných frameworků CSS, které nabízejí responzivní design.
Pomocí W3.CSS
Skvělý způsob, jak vytvořit responzivní design, je použít responzivní styl, jako je W3.CSS
W3.CSS usnadňuje vývoj stránek, které vypadají hezky v jakékoli velikosti!
Ukázka W3.CSS
Změňte velikost stránky, abyste viděli odezvu!
Londýn
Londýn je hlavní město Anglie.
Je to nejlidnatější město Spojeného království s metropolitní oblastí s více než 13 miliony obyvatel.
Paříž
Paříž je hlavní město Francie.
Oblast Paříže je jedním z největších populačních center v Evropě s více než 12 miliony obyvatel.
Tokio
Tokio je hlavním městem Japonska.
Je centrem oblasti Velkého Tokia a nejlidnatější metropolitní oblastí na světě.
Příklad
<!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>
Chcete-li se dozvědět více o W3.CSS, přečtěte si náš kurz W3.CSS .
Bootstrap
Dalším oblíbeným frameworkem je Bootstrap. K vytváření responzivních webových stránek používá HTML a CSS:
Příklad
<!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>
Chcete-li se o Bootstrapu dozvědět více, přejděte do našeho výukového programu Bootstrap .
Slyšeli jste někdy o W3Schools Spaces ? Zde si můžete vytvořit svůj web od začátku nebo použít šablonu a hostovat jej zdarma.
Začněte zdarma ❯* není vyžadována žádná kreditní karta