Bootstrap

Bootstrap ist ein kostenloses Framework zur Gestaltung von Webseiten. Es operiert in den Auszeichnungssprachen HTML und CSS und bietet Vorlagen zur Typografie, Icons, Tabellen, Navigation und vielem mehr. Besonders bei der Erstellung von Responsive Design wird Bootstrap immer häufiger genutzt, da es sich mit dem Framework einfach implementieren lässt. Bootstrap basiert seit seiner 3. Version auf dem “Mobile First” Prinzip, wodurch die Usability auf allen Geräten garantiert werden soll.

Entstehung

Bootstrap wurde 2011 vom Social Media Giganten Twitter Inc veröffentlicht. Das Framework war allerdings zunächst gar nicht als solches gedacht, sondern sollte die internen Analyse-und Verwaltungstools von Twitter verbessern. Vor der Veröffentlichung war Bootstrap deshalb auch als “Twitter BluePrint” bekannt. Eigentliches Ziel war es, die verschiedenen Programmbibliotheken der Oberflächenentwicklung zu einer einheitlichen Bibliothek umzuwandeln. Eine Programmbibliothek beinhaltet vorgefertigte Programmcodes, wie zum Beispiel HTML und CSS. So können Web Developer einfach auf diese Bibliotheken zugreifen, ohne bei jedem neuen Projekt einen neuen Code zu schreiben.

Während der Entwicklung des internen Tools stellte sich aber heraus, dass Bootstrap auch für andere Zwecke genutzt werden könnte. 2011 wurde Bootstrap 1.0 auf dem offiziellen Twitter Blog vorgestellt und wird seitdem auf der Hosting Plattform GitHub als Open Source Projekt weiterentwickelt. Seit August 2017 ist die 4. Version von Bootstrap als Beta für Nutzer verfügbar.

Eigenschaften

Seit dem Beginn der Entwicklung von Bootstrap wird vorausgesetzt, dass der Kern von Bootstrap die CSS Dateien sein sollen, die mittels HTML in das Frontend implementiert werden. Dabei setzt das Projekt auf die neuesten Versionen der Auszeichnungssprachen, nämlich CSS3 und HTML5. Javascript Plug-Ins und jQuery sind hierbei optional und können von Web Designern ignoriert werden.

Less (vor Version 4)

Bootstrap implementiert die Stylesheet Sprache Less, die als Ergänzung der CSS Sprache gilt. Less (zu Deutsch “weniger”) zielt darauf ab, die Größe der CSS zu minimieren, indem Code Wiederholungen durch Verweise vermieden werden. Haben mehrere Elemente zum Beispiel dieselbe Farbe kann im Code auf eine Variable verwiesen werden. So können Elemente, welche die gleiche Eigenschaften haben, global geändert werden und müssen nicht einzeln bearbeitet werden.

@adviderafarbe: #009edc; 
 h1{color:@adviderafarbe;}
.header {background-color:@adviderafarbe}

Weiterhin ermöglicht Less die Verschachtelung von Selektoren. Möchte man zum Beispiel alle h2-Überschriften und <span> Texte innerhalb eines Elements könnte der Code so verkürzt werden:

.advideraside { width:200px; 
padding:10px;
h2{font-family:arial;}
span {font-family:’times new roman’;}}

Im klassischen CSS könnte dieser Code mit Hilfe des Nachfahrenselektor umgesetzt werden. Dieser ist allerdings länger, da der übergeordnete Selektor immer wieder spezifiziert werden muss. In unserem kurzen Beispiel ist die klassische CSS Schreibweise bereits 25 Zeichen länger als die Less-Variante.

.advideraside {width:200px;
padding:10px;}
.advideraside h2{font-family:arial;}
.advideraside span{font-family:’times new roman’;}

Sass (Version 4)

Sass ist eine Stylesheet Sprache und steht für Syntactically Awesome Stylesheets (syntaktisch tolle Stylesheets). Ähnlich wie Less zielt Sass darauf ab, den CSS Syntax zu verkürzen und damit Wiederholungen im Stylesheet zu vermeiden. Besondere Merkmale bei Sass sind geschachtelte Regeln und Media Queries.

Gestaltungsmöglichkeiten

Bootstrap bietet für folgende Elemente Gestaltungsvorlagen:

• Icons (Glyphicons)
• Dropdown-Menüs
• Buttons
• Input-Gruppen
• Breadcrumbs
• Seiten-Nummerierung
• Labels
• Vorschaubilder
• Warnhinweise
• Verlaufsanzeige
• Listengruppen
• Typografie

Auf der offiziellen deutschen Webseite und auf GitHub ist eine vollständige Liste der Gestaltungsmöglichkeiten vorhanden. Neben CSS nutzt Bootstrap auch JavaScript und jQuery, um die User Experience durch interaktive Aktionen wie zum Beispiel Tooltips zu verbessern.

Implementierung

Download

Um Bootstrap zu nutzen, gibt es verschiedene Möglichkeiten. Ist man Bootstrap Neuling, ist der Download der Dateien der beste Weg, um Bootstrap besser zu verstehen. Dazu können entsprechende Dateien auf der Downloadseite heruntergeladen werden (Bootstrap 4.0 – Englische Webseite | Bootstrap v3.3.5 – Deutsche Seite).

Nachdem die heruntergeladene Datei entpackt wurde, finden sich dort unter anderem Ordner für CSS, Javascript und Iconfonts. Mit Hilfe eines Code Editors kann ein HTML Dokument erstellt werden, welches Bootstrap Gestaltungsmöglichkeiten im Code implementiert. Anfänger können sich an unseren grundlegenden Komponenten orientieren. Ein beispielhaftes Bootstrap HTML Dokument kann zum Beispiel so aussehen.

Bootstrap CDN

Eine zweite Möglichkeit, um Bootstrap zu nutzen, ist im <head> Bereich der Webseite auf eine externe CSS Datei zu verweisen. Bei dieser Methode ist es nicht nötig, Bootstrap herunterzuladen und auf dem Webspace hochzuladen. Da dieser Verweis von vielen Webseiten genutzt werden, ist es wahrscheinlich, dass Nutzer die CSS Dateien bereits in ihrem Cache haben. Weiterhin laden Browser Inhalte von verschiedenen Webservern parallel und nicht sukzessiv, wie bei Content auf einem Server der Fall ist. Dies hat zur Folge, dass sie nicht neu geladen werden und der PageSpeed sich auf den Rechnern der Nutzer verbessert. Da die Datei von einer externen Quelle gehostet wird, besteht allerdings der Nachteil, dass Webmaster die CSS nicht anpassen können. Alternativ können sie jedoch die CSS aber trotzdem auf ein CDN hochladen, um zumindest einen Vorteil aus der parallelen Ladung zu genießen. Als Kompromiss empfiehlt es sich auch, eine zweite CSS Datei auf dem Server anzulegen und dort individuelle Anpassungen vorzunehmen.

Um Bootstrap 4.0 per CDN zu implementieren, müssen Web Developer folgende Code-Zeilen im <head> Bereich einpflegen:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

Software Packetverwaltung

Eine Software Paketverwaltung dient zur Verwaltung von Programmen. Im Rahmen Add On Paketen wie Bootstrap helfen Applikations-Paket-Manager, Programmsprachen zu implementieren und den Bezug auf die aktuellsten Bibliotheken zu erstellen. Bootstrap lässt sich mit den Paketmanagern npm, RubyGems, Composer, NuGet und Bower installieren.

Grundlegende Komponenten

Grid System

Das Grid System von Bootstrap arbeitet mit Containern, Reihen (rows) und Kolumnen (column), um ein Layout zu realisieren. Dabei wird Content je nach Bildschirmauflösung passend ausgerichtet. Das Grid System ist für die volle Responsivität einer Webseite verantwortlich. Es arbeitet mit dem flexbox Prinzip, ein flexibles CSS Modus, bei dem sich Elemente je nach Fenstergröße neu anordnen.

Das Grid System arbeitet in der relativen Größeneinheit %. Dabei wird angenommen, dass der Container, in dem das Grid System liegt, immer eine Breite von 100% besitzt. Bootstrap teilt diese Fensterbreite in 12 Columns, welche jeweils 8.333333% (col-1) breit sind. Sind weniger Columns gewünscht, so können diese zusammengefasst werden. Die Hauptsache ist, dass alle Columns in der Summe 12 bzw. 100% ergeben.

 

Responsive Klassen

Responsive Klassen dienen dazu, Elemente je nach Gerätetyp ein-und auszublenden. Mit Hilfe des Media Query können Bedingungen zur Anzeige bzw. zum Verstecken von Content spezifiziert werden. Große Banner Bilder sind aufgrund ihrer Dateigröße besonders für Mobilgeräte lade-intensiv, weshalb sie mit einem Media Query ausgeschlossen werden können. Web Developer warnen allerdings davor, die Media Queries zu intensiv zu nutzen, da auf allen Geräten die gleiche Webseite ausgegeben werden soll. Unterscheiden sich mobile und Desktop Version zu stark voneinander, kann der Wiedererkennungswert der Seite darunter leiden und damit auch die Cross-Platform User Experience.

Bootstrap unterscheidet bei den Responsive Klassen zwischen Extra kleinen (xs), kleinen (sm), medium (md), großen (lg) Bildschirmgrößen.

 

Klasse	Sehr Klein (<768px)	Klein ( > 768px)	Medium (>992px)	Groß (>1200px)
.visible-xs	Sichtbar
.visible-sm		Sichtbar
.visible-md			Sichtbar
.visible-lg				Sichtbar

Klasse	Sehr Klein (<768px)	Klein ( > 768px)	Medium (>992px)	Groß (>1200px)
.hidden-xs	Versteckt
.hidden-sm		Versteckt
.hidden-md			Versteckt
.hidden-lg				Versteckt

Bilder

In Bootstrap 3 können Bilder responsiv gemacht werden. Dafür wird dem <img> Element die .img-responsive bzw. .img-fluid Klasse hinzugefügt. In Bootstrap 4.0 wurde die Klasse in .img-fluid umbenannt, wobei beide Klassen dieselben Befehle beinhalten. Dort wird angegeben, dass die maximale Bildbreite 100% der Containerbreite beträgt (max-width:100%). Die Höhe skaliert sich automatisch (height:auto), damit die Bilddimensionen immer korrekt dargestellt werden.

Icon Font

Seit der 4. Version ist im Bootstrap Download keine Icon Font mehr inbegriffen. Icon Fonts sind Schriftarten, die aus Symbolen bestehen, wie zum Beispiel Social Media Share Buttons. In den Vorgängerversionen wurden Nutzern noch die Icon Schriftart “Glyphicons” in einem Verzeichnis mitgegeben, was in der neuen Version entfallen ist. Stattdessen empfehlen Entwickler, die Schriftarten Iconic, Octicons und FontAwesome im <head> Bereich des Dokuments einzubetten.

Bedeutung für die Suchmaschinenoptimierung

Responsivität spielt für die Suchmaschinenoptimierung eine immer wichtiger werdende Rolle. Studien belegen, dass immer mehr Nutzer auf verschiedenen Geräten unterwegs sind. Besonders der mobile Anteil hat dabei zugenommen, weswegen sich Webdesigner und Programmierer bei der Entwicklung einer Webseite zuerst an der mobilen Darstellung orientieren. “Mobile First”, also mobil zuerst, ist das Grundprinzip des Responsive Design. Auch bei Bootstrap spielt diese Doktrine eine übergeordnete Rolle, weswegen das Framework eine einfache und leistungsstarke Möglichkeit ist, um eine Webseite responsiv zu gestalten. Dies hat zur Folge, dass die Usability verbessert wird und die Kundenzufriedenheit insgesamt gesteigert wird. Bounce Rates auf mobilen Geräten können durch ein nutzbares mobiles Webdesign verringert werden.

Die Ladezeit von Webseiten kann mittels Bootstrap gesenkt werden. Die CSS und Javascript Dateien sind bereits minimiert und optimiert, sodass Browser weniger laden müssen. Dadurch wird auch der PageSpeed und MozRank verbessert, wodurch positive Signale an Suchmaschinen gesendet werden. Wird Bootstrap mit CDN genutzt, kann die Ladegeschwindigkeit noch weiter verbessert werden. Die in der CDN abgelegten CSS Dateien befinden sich im Idealfall bereits im Browsercache des Nutzers, sodass sie nicht neu geladen werden müssen.

Bootstrap unterstützt die Usability außerdem, weil es eine hohe Browserkompatibilität aufweist. Es spielt keine Rolle, ob User einen alten oder einen neuen Browser nutzen. Webseiten mit Bootstrap werden allermeist gleich dargestellt.

Für Webdesigner ist Bootstrap eine praktische Lösung, da es eine große Auswahl an vorgefertigten Themes und Komponenten gibt. Diese können individuell angepasst werden und sind sogar über JavaScript und jQuery PlugIns erweiterbar.

Häufige Fragen

Was ist Bootstrap?

Bootstrap ist ein Framework, das der Gestaltung von Websites dient. Es beinhaltet beispielsweise Icons, Typografie und Tabellen und wird insbesondere für responsiven Content eingesetzt.

Seit wann gibt es Bootstrap?

Ursprünglich wurde das Framework im Jahr 2011 von Twitter Inc gegründet. Eigentlich war das Tool lediglich für interne Zwecke gedacht, doch es stellt sich schnell heraus, dass das Framework auch für andere Websites genutzt werden kann.

In welchen Programmiersprachen operiert Bootstrap?

Das Framework arbeitet ausschließlich mit HTML und CSS. Eine grundlegende Komponente von letzterem, die auch in Bootstrap enthalten ist, stellt das Grid-System dar.