Responsives Webdesign - Frameworks
Es gibt viele kostenlose CSS-Frameworks, die Responsive Design anbieten.
Verwenden von W3.CSS
Eine großartige Möglichkeit, ein ansprechendes Design zu erstellen, ist die Verwendung eines ansprechenden Stylesheets wie W3.CSS
W3.CSS macht es einfach, Websites zu entwickeln, die in jeder Größe gut aussehen!
W3.CSS-Demo
Ändern Sie die Größe der Seite, um die Reaktionsfähigkeit zu sehen!
London
London ist die Hauptstadt von England.
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsgebiet von über 13 Millionen Einwohnern.
Paris
Paris ist die Hauptstadt von Frankreich.
Das Pariser Umland ist mit mehr als 12 Millionen Einwohnern eines der größten Ballungszentren in Europa.
Tokio
Tokio ist die Hauptstadt Japans.
Es ist das Zentrum des Großraums Tokio und die bevölkerungsreichste Metropolregion der Welt.
Beispiel
<!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>
Um mehr über W3.CSS zu erfahren, lesen Sie unser W3.CSS-Tutorial .
Bootstrap
Ein weiteres beliebtes Framework ist Bootstrap. Es verwendet HTML und CSS, um responsive Webseiten zu erstellen:
Beispiel
<!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>
Weitere Informationen zu Bootstrap finden Sie in unserem Bootstrap-Tutorial .
Schon mal von W3Schools Spaces gehört ? Hier können Sie Ihre Website von Grund auf neu erstellen oder eine Vorlage verwenden und kostenlos hosten.
Kostenlos starten ❯* Keine Kreditkarte benötigt