2011 führte Twitter das Bootstrap-Framework ein. Seitdem hat dieses CSS-Framework zwei große Überarbeitungen erfahren, von denen die letzte (Bootstrap 3) 2013 veröffentlicht wurde. Bootstrap 3 hat die CSS-Bibliothek transformiert, indem ein Mobile-First-Ansatz implementiert wurde, der das Framework vollständig reaktionsfähig machte.
Ab 2022 ist Bootstrap in Version fünf und eines der beliebtesten Frontend-Frameworks. Es verfügt über eine umfangreiche Liste vorgefertigter Komponenten und eine beeindruckende Sammlung von JavaScript-Plugins. In diesem Artikel erfahren Sie, wie Sie Bootstrap verwenden und seine Funktionen optimal nutzen.
Installieren von Bootstrap in Ihrem Projekt
Es gibt drei Möglichkeiten Verwenden Sie Bootstrap in Ihrem Projekt. Sie können die CSS- und JavaScript-Dateien herunterladen und hosten, sie mit npm in Ihrem Projekt installieren oder die entsprechenden cdn-Links kopieren und in Ihr Projekt einfügen.
Beim cdn-Ansatz müssen Sie daran denken, den Bootstrap-Link vor jedem anderen CSS-Link im Head-Tag Ihrer HTML-Datei zu platzieren.
Einige Bootstrap-Komponenten verfügen über funktionale Aktivitäten, wie z. B. das Umschalten und Positionieren von Schaltflächen, die den Import von JavaScript und Popper-Skript erfordern. Wenn Sie also beabsichtigen, funktionale Komponenten zu verwenden, müssen Sie das Skript-Tag auch zu Ihrer HTML-Datei hinzufügen.
Das Letzte, was Sie brauchen, um mit der Verwendung von Bootstrap zu beginnen, ist die Ansichtsfenster Schild.
Da es sich bei Bootstrap um eine Mobile-First-Technologie handelt, ist die Ansichtsfenster Schild hilft beim Responsive Design. Eine einfache Möglichkeit, Bootstrap in Ihrem Projekt zu verwenden, besteht darin, einfach zu kopieren Das Starter-Template von Bootstrap.
Erstellen einer Website mit Bootstrap
Wenn Sie eine neue Website erstellen, ist eines der ersten Dinge, die Sie berücksichtigen müssen, das Layout. Danach können Sie zu anderen Komponenten wie Schaltflächen und Typografie wechseln.
Bootstrap verfügt über eine Sammlung von Strukturkomponenten, mit denen Sie Elemente auf einer Webseite organisieren können. Zu diesen Layoutstrukturen gehören:
- Behälter
- Netz
- Säulen
- Dachrinnen
- Haltepunkte
Mit einer leicht veränderten Version des Bootstrap-Starter-Templates können Sie damit beginnen, die Struktur Ihrer Webseite zu skizzieren und neue Komponenten hinzuzufügen.
Die index.html-Datei
Erforderliche Meta-TagsBootstrap-CSS
Bootstrap
Trennen Sie Popper und Bootstrap JS
Die Containerklasse Bootstrap
Der Bootstrap Container Klassenblöcke, enthält und richtet die Elemente auf Ihrer Webseite aus. Wenn Sie Bootstrap verwenden möchten Standardraster, dann müssen Sie auch Bootstrap verwenden Container Klasse. Es gibt drei Arten von Container Klassen; Container, Behälter-Flüssigkeit, und Container-{Haltepunkt}. Die Containerklasse ist der Standardcontainer; Es ist reaktionsschnell und hat an jedem der sechs Haltepunkte von Bootstraps eine feste Breite.
Zu den sechs Standardhaltepunkten von Bootstrap gehören:
- Extra klein: Weniger als 576 Pixel.
- Klein: Größer als oder gleich 576px.
- Mittel: Größer als oder gleich 768px.
- Groß: Größer als oder gleich 992px.
- X-Large: Größer als oder gleich 1200px.
- XX-Large: Größer oder gleich 1400px.
Um Bootstrap zu verwenden Container in Ihrem Projekt können Sie einfach die gewünschte Containerklasse zur external hinzufügen div auf Ihrer Webseite.
Verwenden des Bootstrap-Containers
Website-Elemente hier platzieren Durch das Einfügen des obigen Codes in den Hauptteil Ihrer vorhandenen HTML-Datei wird Ihre Webseite responsiv und es wird auch eine Auffüllung auf jeder Seite Ihrer Webseite erstellt.
Das Bootstrap-Grid-System
Das Grid von Bootstrap verwendet ein Zwölf-Spalten-System, das auf dem basiert Reihe und Kol Grid-Klassen sowie die Container-Klasse. Jede Zeile hat zwölf Spalten, und jedes Element kann sich über eine oder mehrere dieser Spalten erstrecken. Die Spaltenklasse gibt an, wie viele Spalten ein Element belegen soll. Zum Beispiel ein Element, das die col-2 Klasse erstreckt sich über zwei Spalten, ein Element, das die verwendet col-3 Klasse erstreckt sich über drei Spalten und so weiter.
Das Bootstrap-Grid-System basiert auf dem Flexbox-Modul. Wenn nur zwei Spalten eine Reihe belegen, teilen sie den Platz gleichmäßig untereinander auf. Die Rinne class ist eines der strukturellen Elemente von Bootstrap und steuert den Abstand zwischen den einzelnen Spalten in der Grid-System. Jeder Netz Spalte hat 12 Pixel Polsterung auf beiden Seiten.
Verwenden des Grid-Systems von Bootstrap
Hauptinhalt einer Webseite
Artikel
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, apartio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Durch Einfügen des obigen Codes in das Container-Div wird ein Bootstrap-Rastersystem aus drei Zeilen und zwei Spalten erstellt. Die erste Zeile oben enthält die Navigationsleiste, die dritte Zeile unten enthält die Fußzeile der Website und die zweite Zeile in der Mitte enthält den Inhalt der Webseite. Die zweite Reihe besteht aus zwei Spalten – dem Hauptartikel und einer Seite.
Durch das Erstellen einer lokalen CSS-Datei und das Hinzufügen eines Rahmens zu jedem Abschnitt des Rasters können Sie es klarer sehen.
Die style.css-Datei
.Reihe{
Rand: 2px blauer Vollton;
}
.col, .col-sm-4{
Rand: 2px roter Vollton;
}
Durch die Verknüpfung mit der obigen CSS-Datei wird die folgende Ausgabe in Ihrem Browser erstellt:
Ein offensichtlicher Unterschied im obigen Bild ist die Größe der Spalten. Normalerweise nehmen zwei (oder mehr) Spalten in einer Reihe den gleichen Platz ein, sofern Sie nicht ausdrücklich etwas anderes angeben. Die col-sm-4 -Klasse im obigen HTML-Code stellt sicher, dass sich die zweite Spalte nur über vier der zwölf Spalten in der Zeile erstreckt. Die klein in dem col-sm-4 class stellt den kleinen Breakpoint dar, sodass der Abschnitt aside nur vier Spalten ab dem kleinen Breakpoint und darüber belegt.
Bootstrap-Komponenten
Nachdem Sie sich für das Layout Ihrer Webseite entschieden haben, besteht der nächste Schritt darin, Website-Bauelemente hinzuzufügen, die Bootstrap Komponenten nennt. Die Liste der Komponenten von Bootstrap umfasst:
- Navigationsleiste
- Tasten
- Schaltflächengruppe
- Gruppe auflisten
- Karten
- Zusammenbruch
- Dropdowns
Die Bootstrap-Navbar-Klasse
Jede Bootstrap-Navigationsleiste benötigt die Navigationsleiste Klasse. Sie erfordern auch die Verwendung von oder dem Bootstrap das Schlüsselwort „navigation“ zuweisen Rolle -Attribut im übergeordneten Element der Navigationsleiste div. Um die Navigationsleiste reaktionsfähig zu machen, müssen Sie die verwenden JavaScript-Plug-in einklappen.
Der Bootstrap Navigationsleiste Klasse verwendet ein Arie-Strom Attribut, das den Wert „page“ annimmt, um die aktuelle Seite anzugeben, oder „true“, um den aktuellen Abschnitt einer Webseite anzugeben. Der Wert, den Sie zuweisen, hängt von der Struktur Ihrer Website ab (einzelne Seite oder mehrere Seiten). Sie sollten auch die verwenden aktive Klasse um die aktuelle Seite oder den aktuellen Abschnitt anzuzeigen.
Verwenden der Navigationsleiste von Bootstrap
Navi ersetzen Reihe des Bootstrap Netz mit dem obigen Code wird die folgende Ausgabe in Ihrem Browser erstellt:
Es gibt mehrere andere wichtige Klassen und Bootstrap-Attribute im obigen Code, wie z Navbar-Marke Klasse, die auf den Logo-Abschnitt Ihrer Navigationsleiste. Die Navigationsleiste ist dank der auch vollständig reaktionsschnell JavaScript-Plug-in einklappen.
Responsive Navigationsleiste
Sie erinnern sich vielleicht, dass Bootstrap sechs Standardwerte hat Haltepunkte und einer dieser Haltepunkte ist groß (lg). Die navbar-erweitern-lg Klasse in der oben erweitert sich zu einer horizontalen Liste von Navigationselementen am großen Haltepunkt und darüber, und diese Liste wird an jedem Haltepunkt unterhalb von groß zu einer Schaltfläche.
Wenn Sie mehr über das Erstellen responsiver Websites erfahren möchten, haben wir eine Gliederung zusammengestellt wie man das mit Medienabfragen in HTML und CSS macht.
Die Bootstrap-Button-Komponente
Der Bootstrap Taste Komponente verwendet die und erfordert, dass Sie die festlegen Art Attribut zu „Schaltfläche“.
Bootstrap hat mehrere Arten von Schaltflächen. Um die konventionellere Schaltfläche zu erstellen, würden Sie die verwenden btn Klasse, aber um eine Hamburger-Schaltfläche wie im obigen Code zu erstellen, würden Sie die verwenden Navigationsleiste umschalten Klasse.
Wann sollten Sie Bootstrap verwenden?
Bootstrap ist als eines der beliebtesten CSS-Frameworks bekannt, weil es ein Vorreiter ist. Lange bevor Responsive Design in der Softwareentwicklung so alltäglich war, verwandelte sich Bootstrap in ein vollständig responsives Framework.
Im Laufe der Jahre hat sich Bootstrap kontinuierlich weiterentwickelt und verbessert, was es zur ersten Wahl für Top-Unternehmen wie Twitter und Spotify gemacht hat. Es ist jedoch nicht immer die beste Option für Ihre Softwareentwicklungsanforderungen. Wenn Sie beispielsweise eine React-Anwendung erstellen, gibt es ein Designsystem namens MUI, das für React-Anwendungen angepasst ist.
Material-UI hat einen neuen Namen und zielt darauf ab, ein neues Designsystem als Alternative zu Material Design zu schaffen. So können Sie MUI in ReactJS-Projekten verwenden.
Lesen Sie weiter
- Programmierung
- Codierungstipps
- Programmierung
- Programmierwerkzeuge
Kadeisha Kean ist ein Full-Stack-Softwareentwickler und technischer/Technologie-Autor. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Material zu produzieren, das von jedem Technologieneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentarfilme).
Abonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich anzumelden
