Heim > Artikel > Web-Frontend > Erfahren Sie mehr über fünf häufig verwendete CSS-Layout-Frameworks

Erfahren Sie mehr über fünf häufig verwendete CSS-Layout-Frameworks

WBOYOriginal: 2024-01-16 09:20:17570Durchsuche

CSS-Layout-Framework: Entdecken Sie die fünf häufig verwendeten Layout-Frameworks

Einführung:
Im Webdesign ist das Layout ein entscheidender Teil. Das CSS-Layout-Framework kann uns dabei helfen, schnell Webseiten mit unterschiedlichen Layoutstilen zu erstellen. In diesem Artikel werden fünf häufig verwendete CSS-Layout-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, diese Frameworks besser zu verstehen und zu verwenden.

1. Bootstrap:
Bootstrap ist derzeit eines der beliebtesten CSS-Layout-Frameworks. Es verfügt über umfangreiche Komponenten und leistungsstarke Reaktionsfunktionen, die uns dabei helfen können, schnell moderne Webseiten zu erstellen. Hier ist ein einfacher Beispielcode, der zeigt, wie Sie mit Bootstrap ein allgemeines Webseitenlayout implementieren:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">左侧栏</div>
      <div class="col-md-6">中间内容</div>
      <div class="col-md-3">右侧栏</div>
    </div>
  </div>
</body>
</html>

Der obige Code verwendet das Rastersystem von Bootstrap, um die Seite in drei Spalten zu unterteilen: die linke Spalte, den mittleren Inhalt und die rechte Seitenleiste und passt sich automatisch an unterschiedliche Bildschirmgrößen an.

2. Semantische Benutzeroberfläche:
Semantische Benutzeroberfläche ist ein weiteres beliebtes und benutzerfreundliches CSS-Layout-Framework. Es stellt semantische Klassennamen bereit, die den Code lesbarer und wartbarer machen können. Hier ist ein Codebeispiel für die Verwendung von Semantic UI:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
  <div class="ui grid">
    <div class="three column row">
      <div class="column">左侧栏</div>
      <div class="column">中间内容</div>
      <div class="column">右侧栏</div>
    </div>
  </div>
</body>
</html>

Der obige Code verwendet das Rastersystem von Semantic UI, unterteilt die Seite in drei Spalten und verwendet semantische Klassennamen, um den Code besser lesbar zu machen.

3. Foundation:
Foundation ist ein flexibles und leistungsstarkes CSS-Framework, das nicht nur Layoutfunktionen enthält, sondern auch viele UI-Komponenten bereitstellt. Hier ist ein Codebeispiel mit Foundation:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-x">
      <div class="cell small-4">左侧栏</div>
      <div class="cell small-4">中间内容</div>
      <div class="cell small-4">右侧栏</div>
    </div>
  </div>
</body>
</html>

Der obige Code verwendet das Rastersystem von Foundation, um die Seite in drei Spalten zu unterteilen und verwendet unterschiedliche Klassennamen, um die Breite der Spalten zu definieren.

4. PureCSS:
PureCSS ist ein leichtes CSS-Framework, das hauptsächlich zum schnellen Erstellen einfacher Webseitenlayouts verwendet wird. Obwohl die Funktionalität relativ einfach ist, ist der Einstieg und die Anpassung einfach. Hier ist ein Codebeispiel mit PureCSS:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css">
</head>
<body>
  <div class="pure-g">
    <div class="pure-u-1-3">左侧栏</div>
    <div class="pure-u-1-3">中间内容</div>
    <div class="pure-u-1-3">右侧栏</div>
  </div>
</body>
</html>

Der obige Code verwendet das Rastersystem von PureCSS, um die Seite in drei Spalten zu unterteilen und die Breite der Spalten mithilfe von Klassennamen anzugeben.

5. Tailwind CSS:
Tailwind CSS ist ein brandneues CSS-Framework, das eine andere Methode als herkömmliche Frameworks verwendet und Stile durch die Kombination von Klassennamen definiert. Hier ist ein Codebeispiel mit Tailwind CSS:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@1.5.1/dist/tailwind.min.css">
</head>
<body>
  <div class="grid grid-cols-3">
    <div class="col-span-1">左侧栏</div>
    <div class="col-span-1">中间内容</div>
    <div class="col-span-1">右侧栏</div>
  </div>
</body>
</html>

Der obige Code verwendet das Rastersystem von Tailwind CSS, um die Seite in drei Spalten zu unterteilen und die Breite der Spalten durch Klassennamen zu definieren.

Fazit:
Durch die Einleitung dieses Artikels haben wir fünf häufig verwendete CSS-Layout-Frameworks kennengelernt, nämlich Bootstrap, Semantic UI, Foundation, PureCSS und Tailwind CSS. Sie haben jeweils ihre eigenen Eigenschaften, und Sie können je nach Bedarf das geeignete Framework für das Webseitenlayout auswählen. Ich hoffe, dass die Leser diese Layout-Frameworks durch die Einführung und Codebeispiele dieses Artikels besser beherrschen und anwenden können.

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über fünf häufig verwendete CSS-Layout-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css bootstrap ui Foundation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Schritte zum Einführen von CSS-Stilen in Webseiten mithilfe des CI-FrameworksNächster Artikel：Schritte zum Einführen von CSS-Stilen in Webseiten mithilfe des CI-Frameworks

In Verbindung stehende Artikel

Mehr sehen