Dieser Artikel ist das offizielle HTML5-Schulungs-Tutorial der H5EDU-Organisation. Er stellt hauptsächlich vor: JavaScript-Erweiterungs-Tutorial – Bootstrap
Einführung in Bootstrap
Was ist Bootstrap?
Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Webanwendungen und Websites. Bootstrap basiert auf HTML, CSS und JAVASCRIPT.
Geschichte
Bootstrap wurde von Mark Otto und Jacob Thornton von Twitter entwickelt. Bootstrap ist ein Open-Source-Produkt, das im August 2011 auf GitHub veröffentlicht wurde.
Warum Bootstrap verwenden?
Mobile-First: Ab Bootstrap 3 umfasst das Framework in der gesamten Bibliothek Mobile-First-Stile.
Browserunterstützung: Alle gängigen Browser unterstützen Bootstrap.
Internet Explorer Firefox Opera Google Chrome Safari
Einfacher Einstieg: Solange Sie über Grundkenntnisse in HTML und CSS verfügen, können Sie mit dem Erlernen von Bootstrap beginnen.
Responsives Design: Das responsive CSS von Bootstrap kann an Desktops, Tablets und Mobiltelefone angepasst werden. Weitere Informationen zum responsiven Design finden Sie unter Bootstrap Responsive Design.
Responsives Design
Es bietet Entwicklern eine einfache und einheitliche Lösung zum Erstellen von Schnittstellen.
Es enthält leistungsstarke integrierte Komponenten und lässt sich leicht anpassen.
Es bietet auch webbasierte Anpassung.
Es ist Open Source.
Inhalt des Bootstrap-Pakets
Grundstruktur: Bootstrap bietet eine Grundstruktur mit Rastersystem, Linkstil und Hintergrund. Dies wird im Abschnitt Bootstrap-Grundstruktur ausführlich erläutert.
CSS: Bootstrap verfügt über die folgenden Funktionen: globale CSS-Einstellungen, Definition grundlegender HTML-Elementstile, erweiterbare Klassen und ein erweitertes Rastersystem. Dies wird im Abschnitt Bootstrap CSS ausführlich erläutert.
Komponenten: Bootstrap enthält mehr als ein Dutzend wiederverwendbare Komponenten zum Erstellen von Bildern, Dropdown-Menüs, Navigation, Warnfeldern, Popup-Feldern und mehr. Dies wird im Abschnitt „Layout-Komponenten“ ausführlich erläutert.
JavaScript-Plug-Ins: Bootstrap enthält mehr als ein Dutzend benutzerdefinierte jQuery-Plug-Ins. Sie können alle Plug-Ins direkt einbinden oder sie einzeln einbinden. Dies wird im Abschnitt Bootstrap-Plugin ausführlich erläutert.
Anpassung: Sie können Bootstrap-Komponenten, LESS-Variablen und jQuery-Plugins anpassen, um Ihre eigene Version zu erhalten.
Online-Beispiele
Das Bootstrap-Tutorial auf dieser Website enthält Hunderte von Beispielen.
Sie können unseren Online-Editor verwenden, um den Code online zu bearbeiten und auf die Schaltfläche „Ausführen“ klicken, um die Ergebnisse anzuzeigen.
Bootstrap-Instanz