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.

  1. 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.
     
  2. Entpacken Sie anschließend die Datei und verschieben Sie den Bootstrap-Ordner in das gewünschte Verzeichnis Ihres Systems.
     
  3. 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
       
  4. Wenn Sie JavaScript-Elemente nutzen möchten, laden Sie sich zusätzlich noch die funktionsreiche JavaScript-Bibliothek jQuery auf jquery.com herunter.
     
  5. 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.
     
  6. Ö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.

  1. Speichern Sie das Projekt als „basic.html“ auf Ihrem Desktop.

  2. 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>
  1. 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.

  2. 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.

War dieser Artikel hilfreich?