Willkommen zum zweiten Teil meiner Styling-Serie, in dem ich einige beliebte Styling-Bibliotheken/Frameworks durchgehe. In diesem Blog gehen wir auf Bootstrap ein. Bootstrap ist ein leistungsstarkes Open-Source-Frontend-Framework, das die Erstellung von Websites schneller und einfacher macht, indem es ein intuitives Rastersystem, UI-Komponenten und eine umfangreiche Palette an Dienstprogrammen bereitstellt.

Aufstellen

Bevor wir auf einige der Funktionen eingehen, müssen wir natürlich über die Einrichtung von Bootstrap in einem Projekt sprechen. Zum Zeitpunkt des Verfassens dieses Artikels ist die aktuelle Version von Bootstrap 5.3.3 und diese werde ich für alle Beispiele verwenden.

Bootstrap über CDN

Bootstrap kann sehr schnell über ein CDN oder Content Delivery Network eingerichtet werden. Diese Methode erfordert keine Installation, fügen Sie einfach die CSS- und JavaScript-Links von Bootstrap zu Ihrer HTML-Datei hinzu und schon kann es losgehen!
Sie fügen den folgenden CSS-Link in das

Danach fügen Sie das folgende Skript vor dem schließenden

Über den Paketmanager

Wenn Sie an einem größeren Projekt arbeiten oder mit modernen Frontend-Tools arbeiten, möchten Sie möglicherweise die Installation über den Projektmanager durchführen. Zum Glück ist das auch ganz einfach! Schreiben Sie in Ihrem Terminal einfach „npm install bootstrap“, wenn Sie npm verwenden, oder „garn add bootstrap“, wenn Sie „garn“ verwenden. Nach der Installation möchten Sie das CSS und JavaScript von Bootstrap respektvoll in Ihre Haupt-CSS- und JS-Dateien importieren:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Das Gittersystem

Eine der leistungsstärksten Funktionen von Bootstrap ist sein Grid-System. Dadurch können Sie responsive Layouts erstellen, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen.

Struktur

Das Raster basiert auf einer 12-Spalten-Struktur zur Organisation von Inhalten. Seine Grundstruktur kann etwa so aussehen:

  

    
Column 1
    
Column 2
    
Column 3
  

• Container: Der Container enthält die Spalten und Zeilen und richtet sie gleichzeitig aus
• Zeile: Die Zeilen halten und gruppieren Spalten horizontal
• Spalte: In den Spalten wird Ihr Inhalt gespeichert. Jede Zeile kann 12
enthalten.

Größen

Spalten können auch eigene Größen haben! Dadurch können unterschiedliche Layouts bereitgestellt werden. Sie werden danach notiert, wie viele Spalten sie in der Zeile einnehmen.

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

Haltepunkte

Bootstraps Grid ist zunächst mobil, das heißt, es wird für mobile Geräte entwickelt, bevor es auf größere Geräte skaliert wird. Aus diesem Grund verfügt Bootstrap über Klassen, die definieren, wie sich Spalten auf verschiedenen Bildschirmgrößen verhalten. Diese sind:

• xs: Für Bildschirme mit weniger als 576 Pixel
• sm: Für Bildschirme mit mehr als 576 Pixel
• md: Für Bildschirme mit mehr als 768 Pixel
• lg: Für Bildschirme über 992 Pixel
• xl: Für Bildschirme über 1200 Pixel

Zum Beispiel:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

In diesem Beispiel nimmt die erste Spalte auf kleinen Bildschirmen die volle Breite ein, auf mittleren oder größeren Bildschirmen jedoch nur acht Rastereinheiten. Der zweite nimmt auf kleinen Bildschirmen die halbe Breite ein und auf mittleren oder größeren nur vier Einheiten.

Gemeinsame Komponenten

Bootstrap bietet uns eine Vielzahl vorgefertigter Komponenten, die bei der Erstellung ansprechender, benutzerfreundlicher Websites mit minimalem benutzerdefiniertem CSS helfen. Es gibt viele Komponenten, daher werde ich einige der gebräuchlicheren durchgehen, mit denen Sie wahrscheinlich arbeiten werden.

Typografie

Wir beginnen damit, über Text zu sprechen, da Ihre Benutzer lesen müssen, um zu glauben. Die Typografieklassen erleichtern die Definition konsistenter Textstile, von Überschriften über Fließtext bis hin zu Listen. Beispielsweise werden die verschiedenen Überschriften durch ihre Anzeigeklasse notiert:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

Sie können Absatztext auch mit Hilfsklassen definieren, um den Textkörper wie oben gezeigt zu ändern.

Knöpfe

Jede Website oder App braucht Schaltflächen! Bootstrap bietet sofort eine Vielzahl von Schaltflächenstilen. Ihre Klassen sind wie folgt definiert:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

NavBar

Die Navigationsleistenkomponente von Bootstrap verfügt über integrierte Klassen für Ausrichtung, Dropdowns und mehr!

In diesem Beispiel wird die Navigationsleiste auf kleineren Bildschirmen minimiert.

Utility-Klassen

Bootstrap enthält außerdem eine breite Palette von Hilfsklassen, um die Entwicklung zu beschleunigen und den Bedarf an benutzerdefiniertem CSS zu reduzieren. Mit nur wenigen Klassennamen können Sie Abstand, Ausrichtung, Anzeigeeigenschaften und mehr anpassen!

Abstand

Abstände sind in der Entwicklung für die Lesbarkeit durch den Benutzer äußerst wichtig. Zum Glück stellt uns Bootstrap Klassen zur Verfügung, mit denen wir Ränder und Abstände von Elementen anpassen können. Sie folgen alle einem ähnlichen Format von {Eigenschaft}{Seiten}-{Größe}.

• Eigenschaft: m für Rand, p für Polsterung
• Seiten: t oben, b unten, l links, r rechts, x links und rechts, y oben und unten oder leer für alle Seiten
• Größe: 0, 1, 2, ... oder automatisch

Zum Beispiel:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

Anzeige

Anzeigedienstprogramme helfen dabei, die Sichtbarkeit und das Layout von Elementen zu steuern. Diese können verwendet werden, um das Verhalten von Elementen anzuzeigen, auszublenden oder zu ändern. Zu den Anzeigeklassen gehören:

• d-block: Als Blockelement anzeigen
• d-inline: Als Inline-Element anzeigen
• d-none: Verstecke das Element
• d-flex: Flexbox aktivieren
• d-inline-block: Als Inline-Block anzeigen

Bootstrap bietet auch reaktionsfähige Versionen dieser Klassen, die auf Haltepunkte angewendet werden, wie z. B. d-none d-md-block, wodurch ein Element auf kleinen Bildschirmen ausgeblendet wird.

Visible on medium and larger screens
Centered with Flexbox

Text-Dienstprogramme

Bootstrap bietet eine große Menge an Textanpassungen mit Klassen wie:

Textausrichtung

• text-start: Richtet den Text links aus
• text-end: Richtet den Text rechts aus
• text-center: Richtet den Text zentriert aus

Textumbruch

• text-nowrap: Verhindern, dass Text in die nächste Zeile umgebrochen wird
• text-truncate: Text mit Auslassungspunkten abschneiden, wenn er zu lang ist

Textfarbe

• text-primary: Text mit Primärfarbe (Standard: Blau)
• text-success: Text mit Erfolgsfarbe (Standard: grün)
• text-danger: Text mit Gefahrenfarbe (Standard: Rot)

This text is centered and green
This text is right-aligned and blue

Schlussfolgerungen

Bootstrap ist ein leistungsstarkes und flexibles Framework, das es Entwicklern ermöglicht, reaktionsfähige Websites effizient zu erstellen. Wenn Sie diese grundlegenden Konzepte beherrschen, können Sie Ihren Arbeitsablauf optimieren und sich mehr auf das Design und die Funktionalität Ihrer Website konzentrieren, anstatt auf benutzerdefiniertes CSS und Layout-Management. Also tauchen Sie ein! Experimentieren Sie mit einigen Beispielen und erstellen Sie eine fantastische App!

Quellen

Bootstrap