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

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!