Bootstrap-Tutorial: Die ersten Schritte mit dem Twitter-Framework
Bootstrap ist ein Frontend-Framework, mit dessen Hilfe Webentwickler geräteübergreifende Websites verschiedenster Art erstellen können. Zu diesem Zweck bietet das Open-Source-Projekt diverse Gestaltungsvorlagen, die auf HTML und CSS basieren, sowie optionale JavaScript-Erweiterungen. Ursprünglich plante Twitter Bootstrap als firmeninternes Werkzeug für die Vereinheitlichung der Designs, veröffentlichte das Framework jedoch im August 2011 auf der Open-Source-Hosting-Plattform GitHub, wo es sich innerhalb kürzester Zeit mit zehntausenden Abspaltungen (Weiterentwicklungen) zu einem der beliebtesten Projekte entwickelte.
Das macht Bootstrap so interessant
Dank der HTML- und CSS-Vorlagen müssen Sie bei einer guten Idee für eine neue Website nicht mit der Entwicklung komplett von vorn beginnen. Sie übernehmen wie aus einem Baukasten vorgefertigte Inhalte und binden sie in Ihr HTML-Dokument ein. Dadurch entfallen viele der sonst sehr mühsamen CSS-Konfigurationen, was Ihnen eine Menge Arbeit erspart. Abgedeckt sind unter anderem die folgenden Elemente:
- Buttons
- Navigationselemente
- Thumbnail-Übersicht
- Dropdown-Menüs
- Warnhinweise
- Verlaufsanzeigen
- Responsive Video-Einbettung
Eine weitere wichtige Komponente ist das Bootstrap-Grid-Layout. Dieses Ordnungssystem erleichtert es Ihnen, Abstände und Positionierung der einzelnen Website-Elemente punktgenau zu bestimmen, indem es Layouts in 12 Spalten aufteilt. Bei der Anordnung der Elemente im Layout-Gitter können Sie zwischen den verschiedensten Bildschirmgrößen unterscheiden – egal, ob Desktop-PC, Mobiltelefon, Tablet oder PC mit kleinem Bildschirm. Mit Bootstrap sind Sie also für ein Responsive Webdesign bestens gerüstet.
Mit optionalen JavaScript-Plug-ins, die auf dem JavaScript-Framework jQuery basieren, binden Sie zusätzlich nützliche Benutzeroberflächen-Elemente wie Tooltipps oder Dialogfenster in Ihr Projekt ein oder erweitern die Funktionalität vorhandener Bedienelemente, beispielsweise durch ein Autovervollständigungs-Feature für Eingabefelder. Um Bootstrap mit JavaScript-Elementen zu nutzen, binden Sie einfach die jQuery-Bibliothek in Ihr HTML-Dokument ein.
Bootstrap: Download und erste Schritte
Da Bootstrap von Twitter als freies Framework publiziert wurde, fallen für den Download und die Verwendung keinerlei Kosten an. Erfahreneren Webentwicklern bietet sich durch den frei verfügbaren Programmcode auch die Möglichkeit, das Framework an die eigenen Bedürfnisse anzupassen. In der folgenden Anleitung erfahren Sie, welche Schritte nötig sind, um die vorgefertigten Bootstrap-CSS- und JavaScript-Vorlagen nutzen zu können.
- Besuchen Sie die offizielle Homepage holdirbootstrap.de und laden Sie sich das Paket „Bootstrap“ herunter, das die CSS- und JavaScript-Dateien – einmal in standardmäßiger und einmal in minimierter Form – sowie Fonts und das optionale Bootstrap-Theme enthält.
- Entpacken Sie anschließend die Datei und verschieben Sie den Bootstrap-Ordner in das gewünschte Verzeichnis Ihres Systems.
- Enthalten sind die drei Unterordner „css“, „fonts“ und „js“. Im „font“-Ordner befinden sich mehr als 250 Icons in Form einer Schriftart aus den Glyphicons Halflings, die für Bootstrap kostenfrei zur Verfügung gestellt wurden. Die Dateien in den Ordnern „css“ und „js“ erklären wir zum besseren Verständnis kurz im Einzelnen:
- bootstrap.css: CSS-Code in lesbarer Form
- bootstrap.min.css: minimierter CSS-Code, für die Interpretation des Codes irrelevante Inhalte wie Leerzeichen wurden hier entfern
- bootstrap.css.map: enthält CSS Source Maps, mit deren Hilfe Sie beim Entwickeln die ursprünglichen Quelldaten im LESS-Format finden
- bootstrap-theme.css: CSS-Datei des optionalen vorgefertigten Themes
- bootstrap-theme.min.css: minimierter Code des Themes
- bootstrap-theme.css.map: Theme Source Maps
- bootstrap.js: JavaScript-Code in lesbarer Form
- bootstrap.min.js: minimierter JavaScript-Code
- Wenn Sie JavaScript-Elemente nutzen möchten, laden Sie sich zusätzlich noch die funktionsreiche JavaScript-Bibliothek jQuery auf jquery.com herunter.
- Wenn alle Komponenten vorhanden und bekannt sind, kann die eigentliche Arbeit mit dem Framework beginnen. Beispielhaft erstellen wir hier eine HTML-Begrüßungsseite, die wir anschließend in ein Bootstrap-Template umwandeln.
- Öffnen Sie Ihren favorisierten Code-Editor wie z. B. Notepad++ und fügen Sie in einem leeren Fenster den folgenden Code ein:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hallo, das ist mein erstes Bootstrap-Template!</h1>
</body>
</html>Das Meta-Tag „viewport" innerhalb des Head-Bereichs sichert die optimale Darstellung der Website auf mobilen Geräten.
- Speichern Sie das Projekt als „basic.html“ auf Ihrem Desktop.
- Um aus diesem gewöhnlichen HTML-Dokument nun ein Bootstrap-Template zu machen, müssen Sie die Bootstrap-JavaScript- und CSS-Dateien in den HTML-Code implementieren. Dazu geben Sie das Verzeichnis an, in dem die Ordner liegen. Es empfiehlt sich, JavaScript möglichst zum Schluss in den Body des Dokuments einzubinden, da sich die Ladezeit Ihrer Website ansonsten verlängern könnte. Damit sieht Ihr Code folgendermaßen aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1>Hallo, das ist mein erstes Bootstrap-Template!</h1>
<script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>- Abschließend speichern Sie das Dokument als „bootstrap-template.html“. Via Doppelklick können Sie die Bootstrap-HTML in Ihrem präferierten Browser öffnen und sehen nun die als Überschrift (h1) gesetzte Nachricht.
- Ihr Template können Sie nun frei nach Ihren Wünschen gestalten. Die verschiedenen Codes für Typografie, Buttons, das Bootstrap-Grid-System etc. finden Sie ebenfalls auf der offiziellen Homepage.
Programmierkenntnisse sind eine wichtige Voraussetzung
Auch wenn Bootstrap Ihnen vorgefertigte Inhalte präsentiert, werden Sie mit dem Framework ohne HTML- und CSS-Know-how nicht sehr weit kommen. Eine Einarbeitungszeit ist auch bei versierten Entwicklern sinnvoll – und zahlt sich in der Regel aus. Mittlerweile gibt es zudem diverse mit Bootstrap erstellte Templates anderer User, die teils kostenfrei teils kostenpflichtig zum Download angeboten werden und Ihnen den Großteil der Arbeit abnehmen. Wer regelmäßig mit HTML, CSS und JavaScript zu tun hat, wird die Vorteile des Frameworks schnell zu schätzen wissen. Dabei sind vor allem
- die enorme Zeitersparnis,
- die sehr guten Möglichkeiten bezüglich Responsive Webdesign,
- regelmäßige Updates und Hilfestellungen durch die große Community
- und die erstklassige Dokumentation zur Benutzung
hervorzuheben. Zusammen mit der Tatsache, dass es sich um ein Open-Source-Projekt handelt, sorgen diese Faktoren dafür, dass Bootstrap zu Recht eines der beliebtesten Frameworks fürs Webdesign ist.
Ähnliche Artikel
REDPIXEL.PLShutterstock So zeichnen Sie Ihre Website mit JSON-LD nach schema.org aus
JSON-LD bietet Programmieren die Möglichkeit, Metadaten als Skript separat vom Webseiteninhalt im beliebten JSON-Format einzubetten. Die Trennung von HTML-Markup und semantischer Annotation sorgt für eine bessere Lesbarkeit des Quelltextes und ermöglicht eine komfortable Auszeichnung von Metadaten für dynamische Webinhalte. Damit ist JSON-LD ein ernst zu nehmender Konkurrent für Datenformate wie…
Einführung in HTML5
HTML5 ist die neue Kernsprache des Internets. Doch noch immer greifen Webentwickler auf veraltete Auszeichnungssprachen wie HTML 4.01 oder XHTML zurück. Diese erfordern im modernen Webseitenbetrieb oft eine Vielzahl externer Plug-ins, die sowohl die Kompatibilität als auch die Sicherheit einer Webseite gefährden. HTML5 hingegen ermöglicht eine direkte Integration von Multimedia-Elementen und…
WCAG – Richtlinien des W3C für gut zugängliche Webinhalte
Die Web Content Accessibility Guidelines (WCAG) des W3C dienen Webseitenbetreibern als Empfehlung zum Erstellen barrierefreier Internetangebote. Dazu stützen sich die WCAG auf die vier Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Diesen werden zwölf grundlegende Richtlinien zugewiesen, wie man Webinhalte für Menschen mit sensorischen, motorischen oder kognitiven…
Bootstrap-Alternativen: Die besten Frontend-Frameworks im Überblick
Bootstrap gilt als die beliebteste Framework-Lösung zur Konzeption und Kreation funktionsstarker Weboberflächen. Die Sammlung aus HTML-, CSS- und JavaScript-Komponenten, die Twitter im Jahr 2011 unter der freien MIT-Lizenz veröffentlichte, erfreut sich ohne Zweifel einer großen Community sowie einer Vielzahl an Erweiterungen, Schnittstellen zu Content-Management-Systemen und vorgefertigten Themes.…
Bootstrap 5: Die wichtigsten Neuerungen
Was gibt es für Neuerungen? Bootstrap 5 soll das Erstellen von modernen, eleganten Websites noch einfacher machen. Die Entwickler versprechen schnellere Ladezeiten, bessere User Experience und sinnvolleren Code: kein jQuery mehr, keine Unterstützung für den Internet Explorer und dafür noch mehr Flexibilität in der Gestaltung.
