TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Erste Schritte mit Bootstrap

11

Vor einem Jahrzehnt war eine Website ein Traum und nur für Technikfreaks möglich. Heutzutage kann jeder gewöhnliche Mann dank der Popularität kostenloser Site-Builder-Tools und UI-Frameworks eine Website oder einen Blog starten. Da die Site-Building-Branche von Natur aus sehr wettbewerbsintensiv ist, muss sich jedes Unternehmen darauf konzentrieren, bessere Angebote als andere anzubieten, um Endnutzer zu gewinnen. Bootstrap ist eines der beliebtesten Frameworks und wir erklären, wie Sie mit dem Erlernen von Bootstrap zum Erstellen Ihrer Websites beginnen können.

Es gibt drei Arten von Tools für Benutzer und Entwickler, um mit ihrer Website zu beginnen:

  • Selbst gehostete Open-Source-Content-Management-Systeme wie WordPress.org, Drupal und Joomla.
  • Kostenlose gehostete Plattformen wie WordPress.com, Weebly und Wix.
  • Unabhängige Frameworks für Benutzeroberflächen (UI) wie Bootstrap und Google Material Design.

Der Umfang selbst gehosteter Plattformen ist riesig und für die meisten Endbenutzer, die keine Zeit zum Investieren haben, nicht geeignet. Kostenlose gehostete Plattformen sind einfach zu verwenden, weisen jedoch starke Abhängigkeiten auf, die Ihre Fähigkeiten nur auf diese Plattform beschränken. Die letzte Option ist eine Mischung aus Selbst-Hosting, Entwicklung und der Freiheit, Frontend-Elementblöcke wiederzuverwenden. In diesem Artikel erfahren Sie mehr über die ersten Schritte mit dem Bootstrap-Frontend-Framework.

Erste Schritte mit Bootstrap

Bootstrap lernen

Was ist Bootstrap?

Bootstrap ist derzeit eines der beliebtesten Frameworks für Benutzeroberflächen. Dies ist ein Frontend-Framework, das mit HTML, CSS und JavaScript erstellt wurde, ohne dass serverseitige Skripte wie PHP involviert sind. Es wurde ursprünglich von Twitter mit dem Namen "Twitter Blueprint" entwickelt, um die konsistente Sichtbarkeit über mehrere Geräte und Tools hinweg zu verbessern. Später wurde es in Bootstrap umbenannt und im August 2011 als Open-Source-Projekt veröffentlicht.

Bootstrap ist eines der beliebtesten Projekte auf GitHub mit 100.000+ Sternen. Die neuesten Informationen zu Bootstrap-Versionen und -Updates sind auf der offiziellen Website getbootstrap.com verfügbar. Die Popularität von Bootstrap wird im Laufe der Zeit mit dem Mobile-First-Ansatz und der einfachen Umwandlung von Bootstrap-Themes in beliebte Content-Management-Themes wie WordPress gesteigert. Es gibt auch beliebte Bootstrap-Site-Builder wie Mobirise, um Ihre Website ohne Programmierkenntnisse zu starten.

Bootstrap-Versionen

Die folgende Tabelle zeigt das Versionsupdate von Bootstrap, es war V4 alpha 6, als dieser Artikel geschrieben wurde.

Ausführung Datum Wichtige Änderungen
Version 1 19 August 2011 Open Source
Version 2 31 Januar 2012 Großes Update mit 12-Spalten-Raster-Layout und Glyphicons.
Version 3 19.08.2013 Flat Design und Mobile First Approach.
Version 4 19.08.2015 Großes Update in CSS-Klassen, Verwendung von Sass und Entfernen von Glyphicons, tether.js entfernt und popper.js hinzugefügt.
Version 5 05 Mai 2021 Frei von jQuery, Bootstrap-Symbolen, neuem Logo und RTL-Unterstützung.

Allgemeine Verwendung

Momentan ist die stabile Version Bootstrap 5.01 und Sie müssen auf die neueste Version migrieren, wenn Sie frühere Versionen 3 oder 4 verwenden. Wenn Sie also eine Site entwickeln, die bald veröffentlicht werden soll, sollten Sie idealerweise die stabile Version 5.01 verwenden. Endbenutzer können die vorkompilierten CSS-/JS-Dateien direkt herunterladen und auf Ihrer Website verwenden. Download Version 3.4.1 hier, V4.6 hier und V5.01 hier. Wenn Sie Projekte für Kunden oder sich selbst entwickeln, können Sie den kompletten Quellcode mit Sass-Dateien von GitHub herunterladen.

Hinweis: Die Installation von Bootstrap auf Ihrem Windows-basierten PC oder macOS ist eine komplizierte Aufgabe, da es viele Abhängigkeiten gibt. Kurz gesagt, Sie sollten Node.js und NPM zusammen mit Grunt zum Kompilieren auf Ihrem Computer installiert haben. Außerdem können Sie Harp.js verwenden, um statische Site-Dateien mit Partials oder Includes zu generieren.

Lizenz

Die Bootstrap-Dateien werden unter einer MIT-Lizenz mit einer einzigen Anforderung vertrieben, da die Copyright-Informationen in allen Bootstrap-Quelldateien beibehalten werden sollten.

Bewahren Sie den Lizenz- und Urheberrechtshinweis in den CSS- und JavaScript-Dateien von Bootstrap auf, wenn Sie sie in Ihren Werken verwenden.

Sie können die gesamte Lizenz in GitHub anzeigen .

Starten Ihrer Site

Sie haben zwei Möglichkeiten, Ihre Site mit Bootstrap zu erstellen. Eine besteht darin, CSS- und JS-Dateien auf Ihren Hosting-Server herunterzuladen und zu hosten, und die andere besteht darin, CDN-Links zu verwenden. Wir empfehlen, eine Starter-Vorlage zu erstellen und dann alle Bootstrap-Komponenten in einer Starter-Vorlage zu verwenden. Weitere Informationen finden Sie im Abschnitt Bootstrap 5-Startervorlagen.

Nachfolgend finden Sie die CDN-Links zur Verwendung auf Ihrer Website:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Stellen Sie sicher, dass Sie die Popper- und dann die Bootstrap-JS-Datei nacheinander verwenden, andernfalls können Sie eine einzelne gebündelte Skriptdatei verwenden, die Popper-Skript enthält. Fügen Sie auf ähnliche Weise benutzerdefinierte CSS-Stylesheets nach dem Bootstrap-CSS hinzu, damit es keinen Vorrang vor den Framework-Definitionen hat. Bootstrap 5 verwendet border-box für die Box-Sizing-Eigenschaft, die sich auf die Layouts auswirken kann. Sie können dies in content-box ändern, wenn dies nur für die jeweiligen Elemente erforderlich ist, indem Sie Inline-CSS deklarieren .


Bootstrap 5 lernen (Index )


Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen