Bootstrap ist ein Frontend-Framework, mit dessen Hilfe Web­ent­wick­ler ge­rä­te­über­grei­fen­de Websites ver­schie­dens­ter Art erstellen können. Zu diesem Zweck bietet das Open-Source-Projekt diverse Ge­stal­tungs­vor­la­gen, die auf HTML und CSS basieren, sowie optionale Ja­va­Script-Er­wei­te­run­gen. Ur­sprüng­lich plante Twitter Bootstrap als fir­men­in­ter­nes Werkzeug für die Ver­ein­heit­li­chung der Designs, ver­öf­fent­lich­te das Framework jedoch im August 2011 auf der Open-Source-Hosting-Plattform GitHub, wo es sich innerhalb kürzester Zeit mit zehn­tau­sen­den Ab­spal­tun­gen (Wei­ter­ent­wick­lun­gen) zu einem der be­lieb­tes­ten Projekte ent­wi­ckel­te.

Das macht Bootstrap so in­ter­es­sant

Dank der HTML- und CSS-Vorlagen müssen Sie bei einer guten Idee für eine neue Website nicht mit der Ent­wick­lung komplett von vorn beginnen. Sie über­neh­men wie aus einem Baukasten vor­ge­fer­tig­te Inhalte und binden sie in Ihr HTML-Dokument ein. Dadurch entfallen viele der sonst sehr mühsamen CSS-Kon­fi­gu­ra­tio­nen, was Ihnen eine Menge Arbeit erspart. Abgedeckt sind unter anderem die folgenden Elemente:

  • Buttons
  • Na­vi­ga­ti­ons­ele­men­te
  • Thumbnail-Übersicht
  • Dropdown-Menüs
  • Warn­hin­wei­se
  • Ver­laufs­an­zei­gen
  • Re­spon­si­ve Video-Ein­bet­tung

Eine weitere wichtige Kom­po­nen­te ist das Bootstrap-Grid-Layout. Dieses Ord­nungs­sys­tem er­leich­tert es Ihnen, Abstände und Po­si­tio­nie­rung der einzelnen Website-Elemente punkt­ge­nau zu bestimmen, indem es Layouts in 12 Spalten aufteilt. Bei der Anordnung der Elemente im Layout-Gitter können Sie zwischen den ver­schie­dens­ten Bild­schirm­grö­ßen un­ter­schei­den – egal, ob Desktop-PC, Mo­bil­te­le­fon, Tablet oder PC mit kleinem Bild­schirm. Mit Bootstrap sind Sie also für ein Re­spon­si­ve Webdesign bestens gerüstet. Mit op­tio­na­len Ja­va­Script-Plug-ins, die auf dem Ja­va­Script-Framework jQuery basieren, binden Sie zu­sätz­lich nützliche Be­nut­zer­ober­flä­chen-Elemente wie Tooltipps oder Dia­log­fens­ter in Ihr Projekt ein oder erweitern die Funk­tio­na­li­tät vor­han­de­ner Be­dien­ele­men­te, bei­spiels­wei­se durch ein Au­to­ver­voll­stän­di­gungs-Feature für Ein­ga­be­fel­der. Um Bootstrap mit Ja­va­Script-Elementen zu nutzen, binden Sie einfach die jQuery-Bi­blio­thek in Ihr HTML-Dokument ein.

Bootstrap: Download und erste Schritte

Da Bootstrap von Twitter als freies Framework pu­bli­ziert wurde, fallen für den Download und die Ver­wen­dung keinerlei Kosten an. Er­fah­re­ne­ren Web­ent­wick­lern bietet sich durch den frei ver­füg­ba­ren Pro­gramm­code auch die Mög­lich­keit, das Framework an die eigenen Be­dürf­nis­se an­zu­pas­sen. In der folgenden Anleitung erfahren Sie, welche Schritte nötig sind, um die vor­ge­fer­tig­ten Bootstrap-CSS- und Ja­va­Script-Vorlagen nutzen zu können.

  1. Besuchen Sie die of­fi­zi­el­le Homepage hol­dir­boot­strap.de und laden Sie sich das Paket „Bootstrap“ herunter, das die CSS- und Ja­va­Script-Dateien – einmal in stan­dard­mä­ßi­ger und einmal in mi­ni­mier­ter Form – sowie Fonts und das optionale Bootstrap-Theme enthält.
     
  2. Entpacken Sie an­schlie­ßend die Datei und ver­schie­ben Sie den Bootstrap-Ordner in das ge­wünsch­te Ver­zeich­nis Ihres Systems.
     
  3. Enthalten sind die drei Un­ter­ord­ner „css“, „fonts“ und „js“. Im „font“-Ordner befinden sich mehr als 250 Icons in Form einer Schrift­art aus den Gly­phi­cons Halflings, die für Bootstrap kos­ten­frei zur Verfügung gestellt wurden. Die Dateien in den Ordnern „css“ und „js“ erklären wir zum besseren Ver­ständ­nis kurz im Einzelnen:
     
    • bootstrap.css: CSS-Code in lesbarer Form
    • bootstrap.min.css: mi­ni­mier­ter CSS-Code, für die In­ter­pre­ta­ti­on des Codes ir­rele­van­te Inhalte wie Leer­zei­chen wurden hier entfern
    • bootstrap.css.map: enthält CSS Source Maps, mit deren Hilfe Sie beim Ent­wi­ckeln die ur­sprüng­li­chen Quell­da­ten im LESS-Format finden
    • bootstrap-theme.css: CSS-Datei des op­tio­na­len vor­ge­fer­tig­ten Themes
    • bootstrap-theme.min.css: mi­ni­mier­ter Code des Themes
    • bootstrap-theme.css.map: Theme Source Maps
    • bootstrap.js: Ja­va­Script-Code in lesbarer Form
    • bootstrap.min.js: mi­ni­mier­ter Ja­va­Script-Code
       
  4. Wenn Sie Ja­va­Script-Elemente nutzen möchten, laden Sie sich zu­sätz­lich noch die funk­ti­ons­rei­che Ja­va­Script-Bi­blio­thek jQuery auf jquery.com herunter.
     
  5. Wenn alle Kom­po­nen­ten vorhanden und bekannt sind, kann die ei­gent­li­che Arbeit mit dem Framework beginnen. Bei­spiel­haft erstellen wir hier eine HTML-Be­grü­ßungs­sei­te, die wir an­schlie­ßend in ein Bootstrap-Template umwandeln.
     
  6. Öffnen Sie Ihren fa­vo­ri­sier­ten 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 Dar­stel­lung der Website auf mobilen Geräten.

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

  2. Um aus diesem ge­wöhn­li­chen HTML-Dokument nun ein Bootstrap-Template zu machen, müssen Sie die Bootstrap-Ja­va­Script- und CSS-Dateien in den HTML-Code im­ple­men­tie­ren. Dazu geben Sie das Ver­zeich­nis an, in dem die Ordner liegen. Es empfiehlt sich, Ja­va­Script möglichst zum Schluss in den Body des Dokuments ein­zu­bin­den, da sich die Ladezeit Ihrer Website ansonsten ver­län­gern könnte. Damit sieht Ihr Code fol­gen­der­ma­ß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. Ab­schlie­ßend speichern Sie das Dokument als „bootstrap-template.html“. Via Dop­pel­klick können Sie die Bootstrap-HTML in Ihrem prä­fe­rier­ten Browser öffnen und sehen nun die als Über­schrift (h1) gesetzte Nachricht.

  2. Ihr Template können Sie nun frei nach Ihren Wünschen gestalten. Die ver­schie­de­nen Codes für Ty­po­gra­fie, Buttons, das Bootstrap-Grid-System etc. finden Sie ebenfalls auf der of­fi­zi­el­len Homepage. 

Pro­gram­mier­kennt­nis­se sind eine wichtige Vor­aus­set­zung

Auch wenn Bootstrap Ihnen vor­ge­fer­tig­te Inhalte prä­sen­tiert, werden Sie mit dem Framework ohne HTML- und CSS-Know-how nicht sehr weit kommen. Eine Ein­ar­bei­tungs­zeit ist auch bei ver­sier­ten Ent­wick­lern sinnvoll – und zahlt sich in der Regel aus. Mitt­ler­wei­le gibt es zudem diverse mit Bootstrap erstellte Templates anderer User, die teils kos­ten­frei teils kos­ten­pflich­tig zum Download angeboten werden und Ihnen den Großteil der Arbeit abnehmen. Wer re­gel­mä­ßig mit HTML, CSS und Ja­va­Script zu tun hat, wird die Vorteile des Frame­works schnell zu schätzen wissen. Dabei sind vor allem

  • die enorme Zeit­er­spar­nis,
  • die sehr guten Mög­lich­kei­ten bezüglich Re­spon­si­ve Webdesign,
  • re­gel­mä­ßi­ge Updates und Hil­fe­stel­lun­gen durch die große Community
  • und die erst­klas­si­ge Do­ku­men­ta­ti­on zur Benutzung

her­vor­zu­he­ben. Zusammen mit der Tatsache, dass es sich um ein Open-Source-Projekt handelt, sorgen diese Faktoren dafür, dass Bootstrap zu Recht eines der be­lieb­tes­ten Frame­works fürs Webdesign ist.

Zum Hauptmenü