Heim Web-Frontend CSS-Tutorial Bootstrap vs. Pure CSS Grid: Ein Vergleichsleitfaden

Bootstrap vs. Pure CSS Grid: Ein Vergleichsleitfaden

Dec 16, 2024 pm 09:20 PM

Bootstrap vs. Pure CSS Grid: A Comparison Guide

Hey tolle Leute, willkommen zurück auf meinem Blog! ?

Einführung

Lassen Sie uns tiefer in das Verständnis eintauchen, wann und warum Sie sich für Bootstrap oder reines CSS Grid entscheiden könnten. Dieser Artikel führt Sie durch die Nuancen, stellt visuelle Hilfen bereit und bietet praktische Beispiele, die Ihnen helfen, fundierte Entscheidungen für Ihre Webprojekte zu treffen.

Was Sie in diesem Artikel lernen werden?

  • Bootstrap-Grundlagen: Das Rastersystem, die Anpassung und die praktische Verwendung.

  • Pure CSS Grid: Wie es funktioniert, seine neuesten Funktionen und seine Vorteile.

  • Visueller Vergleich: Layoutbeispiele zur visuellen Erläuterung der Konzepte.

  • Reale Anwendungen: Fallstudien und Szenarien.

  • Interaktive Elemente: Codebeispiele für praktische Erfahrungen.

  • Tools und Ressourcen: Wo Sie mehr erfahren und Unterstützung erhalten.

Warum Bootstrap wählen? ?

  • Geschwindigkeit: Mit gebrauchsfertigen Klassen können Sie schnell ansprechende Layouts erstellen.

  • Konsistenz: Behält ein einheitliches Design über verschiedene Projekte hinweg bei.

  • Community & Ökosystem: Umfangreiche Dokumentation, Tutorials und Erweiterungen von Drittanbietern.

Bootstrap Grid System

Das Raster von Bootstrap basiert auf einem 12-Spalten-Layout mit reaktionsfähigen Haltepunkten:

html

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Anpassung

TL-DR: Bootstrap kann über SCSS-Variablen oder mithilfe des Bootstrap-Customize-Tools angepasst werden. So können Sie das Standardraster ändern:

$grid-columns: 16;
$grid-gutter-width: 30px;
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Wenn Sie sich bereits mit der Anpassung auskennen, überspringen Sie den nächsten Teil und fahren Sie mit Praxisfall: E-Commerce-Vorlage fort.

Anpassungsdetails :

Bootstrap bietet verschiedene Möglichkeiten, das Aussehen und Verhalten Ihrer Website anzupassen:

SCSS-Variablen

Bootstrap ist mit SCSS erstellt, was eine umfassende Anpassung durch Variablen ermöglicht:

  • Farben: Ändern Sie das primäre Farbschema, die Schaltflächen und die Hintergrundfarben.

  • Typografie: Passen Sie Schriftgrößen, -familien und -stärken an.

  • Abstände: Ändern Sie die Standardabstandsskala oder die Rasterstegbreite.

Beispiel:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Bootstrap-Anpassungstool

Für diejenigen, die mit SCSS nicht vertraut sind oder eine schnelle Anpassung wünschen:

  • Besuchen Sie den Bootstrap Customizer, wo Sie Variablen optimieren, Komponenten zum Ein- oder Ausschließen auswählen und einen benutzerdefinierten Build von Bootstrap herunterladen können.

Tipps für eine effektive Anpassung

  • Beginnen Sie mit Variablen: Wenn Sie gerade erst anfangen, ist das Ändern von Variablen die einfachste Möglichkeit zur Anpassung, ohne tief in das Framework einzutauchen.

  • Verwenden Sie den Customizer für schnelle Prototypen: Er eignet sich hervorragend zum Ausprobieren verschiedener Looks, ohne die SCSS-Dateien zu ändern.

  • Erstellen Sie einen benutzerdefinierten Build: Wenn Sie an einem Projekt mit bestimmten Anforderungen arbeiten, kann das Erstellen eines benutzerdefinierten Builds von Bootstrap die Dateigröße reduzieren, indem nicht verwendete Komponenten entfernt werden.

  • Sass Partial Files: Bootstrap verwendet Teildateien für jede Komponente. Sie können diese überschreiben, indem Sie in Ihrem Projekt eigene Teiltöne mit demselben Namen erstellen.

Durch die Bereitstellung dieser zusätzlichen Details erhalten Leser ein klareres Bild des Anpassungsprozesses, von einfachen Variablenänderungen bis hin zur Erstellung einer personalisierteren Version von Bootstrap.

Realer Anwendungsfall: E-Commerce-Vorlage ?

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Bitte schauen Sie hier auf Codepen nach, wo ich das vollständige Beispiel habe.

Der HTML-Code (im Codepen-Beispiel von oben) verwendet Bootstrap-Klassen, um ein Layout zu erstellen mit:

  • Eine feste obere Navigationsleiste.
  • Ein Rastersystem innerhalb des Hauptinhaltsbereichs zur Aufteilung in eine 8-spaltige Produktliste und eine 4-spaltige Seitenleiste für den Warenkorb.
  • Benutzerdefiniertes CSS für zusätzliche Stile wie Ränder, Polsterung und Hintergrundfarben, um das Aussehen der Produkte und des Warenkorbs zu verbessern.

Die benutzerdefinierten Stile bieten einige grundlegende Stile, aber die Standardstile von Bootstrap übernehmen die meiste Arbeit in Bezug auf reaktionsfähiges Design und Komponentenstil. Denken Sie daran, dass Bootstrap hochgradig anpassbar ist, sodass Sie diese Stile einfach ändern oder SCSS verwenden können, um Variablen für ein individuelleres Erscheinungsbild zu ändern.

Warum reines CSS wählen? ?

  • Kontrolle: Vollständige Gestaltungsfreiheit ohne Rahmenbeschränkungen.

  • Leistung: Kleinere Dateigrößen und keine externen Abhängigkeiten.

  • Moderne Funktionen: Nutzen Sie die neuesten CSS-Funktionen wie Subgrid- und Containerabfragen.

CSS Grid Setup: CSS Grid ermöglicht komplexe Layouts mit minimalem Markup:

$grid-columns: 16;
$grid-gutter-width: 30px;
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Visuell:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Neueste CSS-Funktionen

  • Untergitter: TLDR Zum Ausrichten verschachtelter Gitter innerhalb eines übergeordneten Gitters.

  • Containerabfragen: TLDR Für Komponenten, die auf ihre eigene Größe und nicht auf das Ansichtsfenster reagieren.

Untergitter

Stellen Sie sich vor, Sie haben ein großes Gitter, in dem Sie einige Kisten platziert haben (wie einen Fotorahmen an einer Wand). Nun möchten Sie kleinere Kisten in eine dieser großen Kisten stellen, aber Sie möchten, dass diese kleineren Kisten perfekt mit den Linien des großen Gitters übereinstimmen.

Subgrid ist so, als ob Sie in Ihrer großen Schachtel ein transparentes Gitterpapier hätten, das dem Muster des großen Wandgitters entspricht. Auf diese Weise können Sie Ihre kleinen Kisten beim Platzieren nicht nur innerhalb der großen Kiste, sondern auch in Bezug auf die gesamte Wand ausrichten.

Beispiel:

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Visuelles Konzept:

$grid-columns: 16;
$grid-gutter-width: 30px;
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Containerabfragen

Stellen Sie sich Containerabfragen so vor, als würden Sie jedem Kasten an Ihrer Wand die Möglichkeit geben, anhand seiner eigenen Größe zu entscheiden, wie er aussehen soll, und nicht nur anhand der Größe der Wand (Ansichtsfenster).

Wenn Sie eine Website responsiv gestalten, sagen Sie ihr normalerweise, dass sie sich basierend auf der Breite des gesamten Bildschirms ändern soll. Was aber, wenn ein Teil Ihrer Seite, beispielsweise eine Seitenleiste, breiter oder schmaler wird? Mit Containerabfragen kann diese Seitenleiste ihre eigenen Inhalte anpassen, ohne dass sich dies auf den Rest der Seite auswirkt.

Beispiel:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Visuelles Konzept:

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+--------+--------+
|Product |Cart    |
|List    |Sidebar |
+--------+--------+

Nach dem Login kopieren

Das bedeutet, dass sich jede Komponente unabhängig anpassen kann, wodurch Ihr Design modularer und flexibler wird.

Fallstudie: Persönlicher Blog ?

Bootstrap könnte ausgewählt werden für:

  • Schnelle Einrichtung: Wenn Sie eine Vorlage oder ein Starterkit für den schnellen Start verwenden möchten.

Pure CSS Grid wäre vorzuziehen für:

  • Benutzerdefiniertes Design: Wenn Sie ein einzigartiges Layout wünschen, das nicht den Standardeinstellungen von Bootstrap entspricht.

Beispiel für Codepen:

(Bitte überprüfen Sie den Link unten und holen Sie sich den Code.)

Der Code im Codepen-Beispiel richtet ein grundlegendes Blog-Layout mit einer Kopfzeile, einer Navigationsleiste, einem Hauptinhaltsbereich, einer Seitenleiste für aktuelle Beiträge und einer Fußzeile ein. Es verwendet CSS Grid für das Layout und enthält eine Medienabfrage für die Reaktionsfähigkeit.

Wann man den jeweiligen Ansatz wählt

  • Bootstrap: Perfekt für Projekte, die eine schnelle Bereitstellung erfordern, bei denen die Designkonsistenz über verschiedene Teile der Website hinweg entscheidend ist, oder wenn Sie in einem Team arbeiten, das mit Bootstrap vertraut ist.

  • Reines CSS: Wählen Sie diese Option, wenn Sie die volle Kontrolle über Ihr Design wünschen, Abhängigkeiten reduzieren möchten oder wenn Sie bereit sind, die erweiterten Funktionen von modernem CSS zu nutzen.

Tools und Ressourcen ?

Bootstrap

  • Bootstrap-Dokumentation

  • Bootstrap-Customizer

  • Bootstrap-Themen

Reines CSS-Raster

  • MDN-Webdokumente für CSS Grid

  • CSS Grid Guide von CSS-Tricks

  • Raster nach Beispiel

Fazit

Bei der Wahl zwischen Bootstrap und reinem CSS Grid geht es nicht darum, welches besser ist, sondern darum, was zu den Anforderungen Ihres Projekts und Ihrem Kenntnisstand passt. Bootstrap bietet einen strukturierten Ansatz, der sich hervorragend für Anfänger oder für Projekte eignet, die eine schnelle Entwicklung erfordern. Pure CSS Grid bietet die Leinwand für diejenigen, die ihre Layouts mit Präzision und Kreativität zeichnen möchten.

Wenn Sie auf Ihrem Weg zur Webentwicklung vorankommen, werden Sie feststellen, dass es manchmal die beste Wahl ist, beides zu kombinieren oder je nach Projektanforderungen von einem zum anderen zu wechseln.

Entdecken Sie weiter, lernen Sie weiter, programmieren Sie weiter! ?


? Hallo, ich bin Eleftheria, Community Manager, Entwicklerin, Rednerin und Content-Erstellerin.

? Wenn Ihnen dieser Artikel gefallen hat, denken Sie darüber nach, ihn zu teilen.

? Alle Links | X | LinkedIn

Das obige ist der detaillierte Inhalt vonBootstrap vs. Pure CSS Grid: Ein Vergleichsleitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Ein bisschen auf CI/CD Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Apr 02, 2025 am 04:27 AM

Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Vergleich von Browsern für reaktionsschnelles Design Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

So verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen So verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen Apr 02, 2025 pm 06:29 PM

CSS Grid ist eine Sammlung von Eigenschaften, die das Layout einfacher machen als jemals zuvor. Wie alles andere ist es eine kleine Lernkurve, aber das Gitter ist

Google -Schriftarten variable Schriftarten Google -Schriftarten variable Schriftarten Apr 09, 2025 am 10:42 AM

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen

See all articles