Bootstrap5 Tutorial

Bootstrap 教程

Bootstrap ist die weltweit beliebteste Front-End-Komponentenbibliothek und wird für die Entwicklung responsiver, mobile-first Webprojekte verwendet.

Bootstrap5 ist derzeit die neueste Version von Bootstrap, einem Open-Source-Toolkit für die Entwicklung mit HTML, CSS und JS. Es unterstützt Sass-Variablen und Mixins, ein responsives Rastersystem, umfangreiche vorgefertigte Komponenten und leistungsstarke JavaScript-Plugins, mit denen Sie schnell responsive, mobile-first Websites entwerfen und anpassen können.

Für wen ist dieses Tutorial?

Solange Sie über Grundkenntnisse in HTML und CSS verfügen, können Sie dieses Tutorial lesen und Ihre eigene Website entwickeln. Nach Abschluss dieses Tutorials erreichen Sie ein mittleres Niveau bei der Verwendung von Bootstrap zur Entwicklung von Webprojekten.

Vorkenntnisse, die Sie vor dem Lesen dieses Tutorials benötigen:

Bevor Sie mit diesem Tutorial beginnen, müssen Sie grundlegende Kenntnisse in HTML, CSS und JavaScript haben. Wenn Sie mit diesen Konzepten noch nicht vertraut sind, empfehlen wir Ihnen, zuerst diese Tutorials zu lesen:

Warum Bootstrap verwenden

  • Einfacher Einstieg:Jeder mit einem grundlegenden Verständnis von HTML und CSS kann Bootstrap sehr schnell nutzen.

  • Responsives Design:Bootstrap kann sich an verschiedene Plattformen (Mobiltelefone, Tablets und Desktops) anpassen.

  • Mobile-first:In Bootstrap ist die mobile Anpassung ein Kernbestandteil des Frameworks.

  • Browser-Kompatibilität:Bootstrap5 ist mit allen wichtigen Browsern kompatibel (Chrome, Firefox, Edge, Safari und Opera). Wenn Sie IE11 und darunter unterstützen müssen, verwenden Sie bitte Bootstrap4 oder Bootstrap3.

Bootstrap5-Beispiele

Das folgende ist ein einfaches Bootstrap5-Beispiel:

Bootstrap5-Beispiele

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Meine erste Bootstrap-Seite</h1> <p>Dies ist eine responsive Seite. Ändern Sie die Größe des Browsers, um den Effekt zu sehen!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Erste Spalte</h3> <p>Beispiel</p> <p>Was wir lernen, ist nicht nur Technologie, sondern auch Träume!!!</p> </div> <div class="col-sm-4"> <h3>Zweite Spalte</h3> <p>Beispiel</p> <p>Was wir lernen, ist nicht nur Technologie, sondern auch Träume!!!</p> </div> <div class="col-sm-4"> <h3>Dritte Spalte</h3> <p>Beispiel</p> <p>Was wir lernen, ist nicht nur Technologie, sondern auch Träume!!!</p> </div> </div> </div>

Selbst ausprobieren »

Bootstrap5 vs. Bootstrap 3 & 4

Bootstrap5 ist die neueste Version von Bootstrap und verwendet neue Komponenten, schnellere Stylesheets und eine schnellere Responsivität.

Bootstrap5 unterstützt alle wichtigen aktuellen stabilen Browserversionen, jedoch nicht Internet Explorer 11 und niedriger.

Der Hauptunterschied zwischen Bootstrap5 und Bootstrap 3 & 4 besteht darin, dass Bootstrap5 nicht mehr von jQuery abhängt und nativesJavaScriptverwendet. Natürlich können wir es auch einbinden, wenn wir es verwenden möchten.jQuery。

Bootstrap5 unterstützt keine Browser unter IE11; Bootstrap4 hat die Unterstützung für IE8 und iOS 6 eingestellt. Wenn Sie Kompatibilität mit älteren Browsern benötigen, verwenden Sie bitteBootstrap3。

Hinweis:Das offizielle Team pflegt Bootstrap 3 und Bootstrap 4 weiterhin, sodass wir sie weiterhin verwenden können; es werden jedoch keine neuen Funktionen zu Bootstrap 3 & 4 hinzugefügt.

Weitere Erweiterungen