Bootstrap ist ein Framework, mit dem Webentwickler Webseiten für alle Arten von Geräten erstellen können. Zu diesem Zweck sind die Open – Source – Projekt bietet Design – Vorlagen basiert auf HTML und CSS, sowie zusätzliche Erweiterungen für JavaScript. Zunächst hatte Twitter Bootstrap als unternehmensinternes Tool für die Designhomogenisierung geplant. Im Jahr 2011 wurde das Framework jedoch auf der kollaborativen Softwareentwicklungsplattform GitHub veröffentlicht, wo es in kürzester Zeit und mit Dutzenden weiterer Entwicklungen zu einem ihrer beliebtesten Projekte wurde. 

Durch die Implementierung vordefinierter Vorlagen in HTML und CSS müssen Webentwickler keine gute Idee für eine Webseite von Grund auf neu entwickeln. Durch ihren modularen Aufbau können sie problemlos in jedes HTML-Dokument integriert werden. Dadurch werden viele der langwierigen CSS-Einstellungen eliminiert , was viel Zeit und Mühe spart. Dies umfasst, ohne darauf beschränkt zu sein, die folgenden Elemente:

• Tasten
• Navigationselemente
• Miniaturansicht
• Dropdown-Menüs
• Hinweise
• Aufzeichnung
• Responsive Video-Einbettung

Ein weiterer wichtiger Aspekt ist das Bootstrap-Raster, auf dem das Layout einer Webseite basiert. Dieses System erleichtert die Definition der Ränder und die Positionierung der Elemente, aus denen eine Webseite besteht, indem die Layouts in 12 Spalten verteilt werden. Bei der Organisation der Elemente in diesem Raster können Sie zwischen einer Vielzahl von Bildschirmgrößen unterscheiden, sei es Desktop, Smartphone, Tablet oder Laptop. In jedem Fall sorgt Bootstrap für ein reaktionsschnelles Webdesign .

Optional bieten JavaScript-Plugins, die auf dem jQuery-Framework basieren, die Möglichkeit, Elemente der Benutzeroberfläche zu integrieren, die ebenso nützlich sind wie Hinweise zur Verwendung des Tools oder von Dialogfeldern in das Projekt, sowie die Funktionalität anderer bereits integrierter Elemente wie z Beispiel: Autocomplete für Suchfelder. Um Bootstrap mit JavaScript-Elementen verwenden zu können, muss nur die jQuery-Bibliothek in das HTML-Dokument aufgenommen werden.

Da Twitter Bootstrap als kostenlose Software veröffentlicht hat, kann es kostenlos heruntergeladen und verwendet werden. Erfahrene Webentwickler profitieren auch vom Open Source-Status von Bootstrap, da sie das Framework an ihre Bedürfnisse anpassen und ändern können. In der folgenden Anleitung werden die Schritte vorgestellt, die zur Verwendung von Bootstrap-Vorlagen in JavaScript und CSS erforderlich sind.

1. Besuchen Sie die offizielle Bootstrap-Seite und laden Sie das “Bootstrap” -Paket herunter, das die CSS- und JavaScript-Dateien (in kompilierter und reduzierter Version) sowie die Schriftarten und das optionale Design enthält.
2. Entpacken Sie die Datei und kopieren Sie die? Bootstrap-Datei? im gewünschten Verzeichnis.
3. Sie erhalten die Ordner? CSS?,? Fonts? und? js ?. Der Ordner? Fonts? Es enthält über 250 Symbole in Form der Glyphicons Halflings-Schriftart, die für Bootstrap-Benutzer kostenlos ist. Die Dateien im? CSS? und? js? Sie beinhalten:
   • bootstrap.css – CSS-Code im lesbaren Format
   • bootstrap.min.css – Reduzierter CSS-Code. Nicht relevante Inhalte (z. B. Leerzeichen) wurden entfernt, um die Interpretation zu erleichtern
   • bootstrap.css.map – Enthält CSS-Quellkarten, mit denen Originaldaten im WENIGER Format leicht gefunden werden können
   • bootstrap-theme.css : CSS-Dateien der vordefinierten Themen
   • bootstrap-theme.min.css : Reduzierter Code für Themen
   • bootstrap -theme.css.map : Quellkarten für Themen
   • bootstrap.js – JavaScript-Code im lesbaren Format
   • bootstrap.min.js : Reduzierter JavaScript-Code
4. Wenn Sie JavaScript-Elemente verwenden möchten, können Sie zusätzlich die umfangreiche JavaScript-Bibliothek mit jQuery-Funktionen unter jquery.com herunterladen.
5. Sobald alle Komponenten heruntergeladen und identifiziert wurden, können Sie mit dem Framework arbeiten. Um dies besser zu veranschaulichen, zeigen wir Ihnen, wie Sie eine HTML-Seite erstellen.
6. Öffnen Sie Ihren bevorzugten Code-Editor, z. B. Notepad ++, und fügen Sie den folgenden Code ein:

Das Meta-Tag? Ansichtsfenster? innerhalb des Abschnitts? Kopf? sorgt für die korrekte Anzeige auf Mobilgeräten.

7. Speichern Sie das Projekt als? Basic.html? auf dem Schreibtisch.
8. Um eine Bootstrap-Vorlage aus diesem HTML-Dokument zu erstellen, müssen Sie CSS- und JavaScript-Dateien im Dokument implementieren. Dies wird erreicht, indem das Verzeichnis angegeben wird, in dem sich die Ordner befinden. Es wird empfohlen, JavaScript am Ende des Dokuments einzufügen, da Sie sonst die Ladezeiten Ihrer Webseite verlängern können. Der Code sieht dann folgendermaßen aus:

9. Speichern Sie das Dokument zuletzt als “Bootstrap-template.html”. Um das HTML-Dokument zu öffnen, müssen Sie nur doppelklicken. Es wird in Ihrem Webbrowser geöffnet und zeigt die im Titel (h1) verwendete Nachricht an.
10. Eine Bootstrap-Vorlage kann frei angepasst werden. Auf der offiziellen Website finden Sie die verschiedenen Codes zum Konfigurieren von Schriftarten, Schaltflächen, dem Bootstrap-Raster usw. 

Obwohl Bootstrap vordefinierte Inhalte enthält, sind Grundkenntnisse in HTML und CSS erforderlich, um diese konfigurieren zu können. Selbst erfahrene Programmierer benötigen möglicherweise einige Zeit, um sich an die Benutzeroberfläche zu gewöhnen, obwohl sich dies häufig auszahlt. Für diejenigen, die weder Zeit noch Mittel haben, gibt es Bibliotheken mit Bootstrap- Vorlagen, die von anderen Benutzern erstellt wurden und kostenlos oder kostenpflichtig zum Herunterladen verfügbar sind. Jeder, der mit HTML, CSS und JavaScript arbeitet, wird die Vorteile der Arbeit mit diesem Framework schnell erkennen. Dies sind hauptsächlich:

• Die enorme Zeitersparnis
• Die Vielzahl der Möglichkeiten in Bezug auf Responsive Design
• Regelmäßige Updates und Support durch eine große Benutzergemeinschaft
• Die Dokumentation zum Framework

Die oben genannten Faktoren, zusätzlich zu der Tatsache, dass Bootstrap ein Open-Source-Projekt ist, positionieren es als eines der beliebtesten Frameworks für das Webdesign.