CSS-Layout-Framework enthüllt: Analyse von fünf beliebten Frameworks
Einführung:
Im Prozess des Webdesigns und der Webentwicklung war die Erzielung eines guten Layouts schon immer eine wichtige Herausforderung. Das CSS-Layout-Framework hilft uns, komplexe Layouts einfacher zu erstellen und verbessert die Entwicklungseffizienz durch die Bereitstellung leistungsstarker Tools und Komponenten. In diesem Artikel untersuchen wir fünf beliebte CSS-Layout-Frameworks und stellen konkrete Codebeispiele bereit.
1. Bootstrap
Bootstrap ist derzeit eines der beliebtesten CSS-Layout-Frameworks. Es bietet eine große Anzahl an Stilen und Komponenten, die es uns ermöglichen, schnell responsive Webseiten zu erstellen. Unten sehen Sie ein einfaches Beispiel, das die Verwendung von Bootstrap zum Implementieren eines Seitenlayouts zeigt, das eine Navigationsleiste, einen Inhaltsbereich und Copyright-Informationen unten enthält.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
<title>Bootstrap Layout Example</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="col-md-4">
<h3>Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">© 2020. All rights reserved.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
</body>
</html>Nach dem Login kopieren
2. Foundation
Foundation ist ein weiteres beliebtes CSS-Layout-Framework, das ebenfalls eine Fülle von Komponenten und Stilen bietet. Nachfolgend finden Sie ein Beispiel für ein mit Foundation implementiertes Grundlayout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
<title>Foundation Layout Example</title>
</head>
<body>
<nav class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">Logo</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="grid-container">
<div class="grid-x">
<div class="cell medium-8">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="cell medium-4">
<h3>Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer>
<div class="grid-container">
<div class="grid-x">
<div class="cell">
<p>© 2020. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>Nach dem Login kopieren
3. Semantic UI
Semantic UI ist ein CSS-Layout-Framework, das sich auf Semantik konzentriert. Seine Benennung und Verwendung sind sehr intuitiv. Unten finden Sie ein Beispiel für ein grundlegendes Layout, das mithilfe der semantischen Benutzeroberfläche implementiert wurde.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
<title>Semantic UI Layout Example</title>
</head>
<body>
<div class="ui inverted menu">
<a class="active item">Logo</a>
<a class="item" href="#">Home</a>
<a class="item" href="#">About</a>
<a class="item" href="#">Services</a>
<a class="item" href="#">Contact</a>
</div>
<div class="ui container">
<div class="ui grid">
<div class="eleven wide column">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="five wide column">
<h3>Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<div class="ui inverted vertical footer segment">
<div class="ui container">
<p>© 2020. All rights reserved.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>
</body>
</html>Nach dem Login kopieren
4. Bulma ist ein leichtes CSS-Layout-Framework. Sein Design ist einfach und schön, einfach zu verwenden und anzupassen. Unten finden Sie ein Beispiel für ein mit Bulma implementiertes Grundlayout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
<title>Bulma Layout Example</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">Logo</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Services</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>
<div class="container">
<div class="columns">
<div class="column is-three-quarters">
<h1 class="title">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="column">
<h3 class="subtitle">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>© 2020. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma"></script>
</body>
</html>Nach dem Login kopieren
5. Tailwind CSS
Tailwind CSS ist ein hochgradig anpassbares CSS-Framework, das eine Fülle praktischer Klassen bereitstellt, die direkt in HTML verwendet werden können. Unten finden Sie ein Beispiel für ein grundlegendes Layout, das mit Tailwind CSS implementiert wurde.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
<title>Tailwind CSS Layout Example</title>
</head>
<body>
<nav class="bg-gray-200">
<div class="container mx-auto">
<ul class="flex">
<li class="p-4">Logo</li>
<li class="p-4"><a href="#">Home</a></li>
<li class="p-4"><a href="#">About</a></li>
<li class="p-4"><a href="#">Services</a></li>
<li class="p-4"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container mx-auto">
<div class="flex">
<div class="w-3/4 p-8">
<h1 class="text-4xl">Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="w-1/4 p-8">
<h3 class="text-2xl">Side bar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
<footer class="bg-gray-200">
<div class="container mx-auto p-8">
<p>© 2020. All rights reserved.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
// Tailwind CSS does not require JavaScript
</script>
</body>
</html>Nach dem Login kopieren
Fazit:
In diesem Artikel werden fünf beliebte CSS-Layout-Frameworks vorgestellt, nämlich Bootstrap, Foundation, Semantic UI, Bulma und Tailwind CSS. Durch den Einsatz dieser Frameworks können wir komplexe Webseitenlayouts effizienter umsetzen. Jedes Framework hat seine eigenen einzigartigen Eigenschaften und seinen eigenen Stil. Wählen Sie basierend auf Ihren tatsächlichen Anforderungen das Framework aus, das zu Ihnen passt.
Das obige ist der detaillierte Inhalt vonEntdecken Sie fünf beliebte CSS-Layout-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
