Bootstrap vs. Pure CSS Grid: Ein Vergleichsleitfaden

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 |
+---+

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;

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";

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 |
+---+

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;

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";

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 |
+---+

Visuelles Konzept:

$grid-columns: 16;
$grid-gutter-width: 30px;

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";

Visuelles Konzept:

<div>



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

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

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