Die Entwicklung einer Website erfordert Kenntnisse in HTML, CSS und JavaScript. Du musst über Programmier- und Integrationsfähigkeiten in jeder dieser drei Sprachen verfügen, um die Erstellung von Webanwendungen zu meistern. Es gibt Werkzeugsammlungen, die HTML- und CSS-Code sowie JavaScript-Plug-ins enthalten, um die Entwicklung und Integration einer Anwendung zu erleichtern. Wir werden uns heute mit Bootstrap beschäftigen, der beliebtesten Sammlung, deren neueste Version Bootstrap 5 vor einem Jahr veröffentlicht wurde.
Was ist Bootstrap?
Bootstrap gehört zu den sogenannten „Front-End Frameworks“, die eine Sammlung von Werkzeugen enthalten, die für die Erstellung und das Design von Webseiten und Webanwendungen im Frontend nützlich sind. Es enthält HTML- und CSS-Code sowie optionale JavaScript-Erweiterungen, mit denen du Formulare, Schaltflächen, Navigationstools und andere interaktive Elemente erstellen kannst, die in eine Anwendung integriert werden können. Dieses Framework wurde entwickelt, um interaktive Designs zu entwickeln, die sich an jede Art von Bildschirm anpassen lassen, insbesondere für Smartphones.
Die Plattform wurde von zwei Entwicklern aus dem Twitter-Ökosystem, Mark Otto und Jacob Thornton, unter dem ersten Namen Twitter Blueprint im Jahr 2010 entwickelt. Im August 2011 stellten die Twitterer Bootstrap unter eine Open-Source-Lizenz.
Warum Bootstrap verwenden?
Bootstrap ist einfach zu benutzen, jeder mit Grundkenntnissen in HTML und CSS kann es verstehen. Außerdem ist dieses Framework eine „responsive“ Lösung, die sich an Telefone, Tablets und Computer anpasst. Die neueste Version von Bootstrap ist mit allen modernen Browsern kompatibel (Firefox, Chrome, Safari, Edge, ehemals Internet Explorer und Opera).
Wie kann ich Bootstrap herunterladen?
Es gibt mehrere Möglichkeiten, Bootstrap herunterzuladen. Du kannst auf die offizielle Website gehen und die neueste Version online herunterladen. Du kannst Bootstrap auch über npm, Composer oder Meteor installieren, indem du z.B. eine der folgenden Befehlszeilen in einer Konsole ausführst:
Wenn du Bootstrap nicht selbst herunterladen willst, kannst du es von einem CDN (Content Delivery Network) einbinden. Du kannst hierfür jsDelivr wie folgt verwenden:
Wie verwende ich Bootstrap?
Wir werden nun sehen, wie man mithilfe von Bootstrap ein grundlegendes Template für eine Anwendung oder eine Webseite erstellt. Der erste Schritt ist, eine grundlegende HTML-Datei zu erstellen, mit der wir arbeiten werden, z. B. :
Hinweis: Versuche, immer den Tag in le einzubinden, um den Touch-Zoom zu ermöglichen und eine für Smartphones geeignete Leistung zu gewährleisten.
Der nächste Schritt ist die Umwandlung unserer HTML-Datei in ein Bootstrap-Template. Hier bevorzugen wir die CDN-Methode, da sie uns eine bessere Leistung bietet, indem sie die Ladezeiten verkürzt, da sie auf mehreren Servern auf der ganzen Welt gehostet wird.
Von nun an können wir unsere ersten Bootstrap-Objekte erstellen: Container. Container sind die grundlegendsten Layout-Elemente von Bootstrap und werden benötigt, um das Rastersystem zu verwenden. Sie werden hauptsächlich dazu verwendet, den Inhalt mit einer gewissen Polsterung zu umhüllen. Sie werden auch verwendet, um den Inhalt bei einem Layout mit fester Breite horizontal in der Mitte der Seite auszurichten. Es gibt drei Arten von Containern:
- container, der eine maximale Breite für jeden Breakpoint hat.
- container-fluid, der eine Breite von 100% für alle Breakpoints hat.
- container-{breakpoint}, der eine Breite von 100% bis zum gefüllten Breakpoint hat.
Hier ist ein Beispiel für die Syntax bei der Verwendung von Containern :
Du weißt jetzt, wie du deine erste HTML-Seite mit Bootstrap erstellen kannst. Es gibt viele Möglichkeiten und du kannst viele Templates im Internet finden, z. B. Creative Commons auf bootstrapdash.
Jetzt bist du dran!
