Was ist Bootstrap?

Bootstrap ist ein fertiges CSS-Framework, welches die Erstellung einer responsive Website erleichtert. Ein Framework ist ein bereits fertiger Baukasten mit dynamischen Gestaltungsmöglichkeiten. Ein solches Framework enthält eine Sammlung von Hilfsmitteln für den einfachen Einsatz von CSS im Webdesign. Diese Frameworks bieten eine Kombination aus HTML5 und CSS3. Bootstrap verwendet außerdem die Stylesheet-Sprache Less, welche dafür da ist, CodeWiederholungen zu vermeiden. Less bietet dafür noch weitere 2
Anweisungen als CSS, welche in Abschnitt E genauer erläutert werden. Dieser Less-Code wird dann zu CSS kompiliert. Bootstrap ist 2011 als eine Lösung bei Twitter entstanden, um die internen Analyse- und Verwaltungswerkzeuge weiterzuentwickeln. Im August 2011 veröffentlichte Twitter die Ergebnisse und seitdem hat es sich zu einem populären Projekt entwickelt. Mittlerweile gibt es die neueste Version Bootstrap 3, welche für die Gestaltung von responsive Websites verwendet wird. Hierbei ist es nicht mehr nötig, mobile Elemente später hinzuzufügen, da diese direkt mit eingebaut sind. Somit verfolgt Bootstrap den Mobile-First-Ansatz. Hierbei überlegt man sich zuerst, welche Inhalte wichtig sind und wie diese am besten auf kleinen Endgeräten dargestellt werden können. Damit auf der Website die Inhalte auch auf mobilen Webseiten optimal angezeigt werden können, ist es wichtig, in dender Datei die Zeileeinzubauen. Weiterhin sind verschiedene Zeilen in der Datei nötig, um Bootstrap dann korrekt zu implementieren, beispielsweise die CSS-Datei, um den CSS-Teil von Bootstrap nutzen zu können. Eine einfache Datei sieht dann so aus:

Hello World!

Wenn diese Dateien in die HMTL-Datei eingebunden wurden, kann man das Bootstrap-Framework vollständig verwenden.

Bilder mit Bootstrap

Man kann Bilder in sein HTML-Dokument einbinden, diese sind dann aber nicht automatisch für kleinere Bildschirme angepasst. Damit die Bilder sich ebenfalls verkleinern und auch auf entsprechend kleinen Bildschirmen optimal aussehen, gibt es bei Bootstrap die Klasse .img-responsive. Die Bilder werden also beim Verkleinern des Bildschirms nicht einfach an den Seitenrändern abgeschnitten, sondern sie verkleinern sich mit, je kleiner der Bildschirm wird, was durch das responsive Layout von Bootstrap möglich ist. Es gibt somit keine Bildschirmgröße, auf der das Bild entweder zu klein oder zu groß dargestellt wird.

D. Navigation mit Bootstrap
Es gibt verschiedene Möglichkeiten für die Gestaltung einer Navigation auf einer Webseite mithilfe von Bootstrap. Die Navigationselemente werden alle mithilfe von Listen erstellt. Man kann eine einfache Navigation mit Pills oder Tabs realisieren, wobei man zum einen die Klasse .nav als auch .nav-pills bzw. .nav-tabs benötigt, was in Bootstrap standardmäßig dann so aussieht, wenn zusätzlich noch die sogenannte „aktive“ Seite farblich unterlegt ist:
Eine Navigation mit Pills

Eine weitere Möglichkeit für eine Navigation ist die sogenannte navbar, welche sowohl Elemente der Navigation beinhalten kann, aber ebenso beispielsweise die Suchfunktion. Diese Navigationsleiste kann dann auf kleineren Bildschirmen wie Smartphones eingeklappt werden und wird auf breiten Bildschirmen wie gewohnt nebeneinander angezeigt. Eine mögliche Realisierung kann sein, dass auf kleinen Bildschirmen ein Button angezeigt wird, der beim Anklicken das JavaScript collapse zum Ausklappen verwendet.
Abbildung 13 - Die eingeklappte Navigation auf einem kleinen Viewport
Wie erwähnt ist es möglich, noch weitere Komponenten auf der navbar zu platzieren. Mit der Klasse .navbar-form kann man Formulare zu der Navigationsleiste hinzufügen, wie zum Beispiel ein Suchfeld.

E. Bootstrap individualisieren
Man kann die vorgefertigte Bootstrap-Datei aus dem Internet laden oder aber man kann auch eine eigene BootstrapVersion herunterladen. Bootstrap bietet an, dass man vor dem Herunterladen einzelne Komponenten, Variablen und Erweiterungen anpassen, aber auch weglassen kann, wenn man die für seine Webseite nicht benötigt. Zusätzlich dazu kann man ebenfalls ein benutzerdefiniertes Stylesheet erstellen, wobei man Angaben zu der Größe oder der Schriftart machen kann und verschiedene HTML-Elemente und Komponenten anpassen kann. Hierbei passt man die sogenannten LessVariablen an seine eigenen Bedürfnisse an. Less-Variablen sind häufig verwendete Werte, die dann nur einmal definiert werden müssen und für das ganze HTMLDokument gelten. Less ist eine Stylesheet-Sprache. Sie wird dazu verwendet, zentrale Variablen für beispielsweise CSS festzulegen, welche man dann an mehreren Stellen wiederverwenden kann. Damit man einen solchen CSSProzessor verwenden kann, schreibt man entsprechenden Code in der Stylesheet-Sprache und mithilfe eines Präprozessors
wird diese Less-Syntax dann in eine CSS-Datei umgewandelt und kann verwendet werden. Das Ziel von Less ist vor allem also, Code-Wiederholungen zu vermeiden. Man kann Bootstrap also mit dem bereits kompilierten CSS-Code nutzen oder mit den ursprünglichen Less-Dateien. Bootstrap verwendet die Less-Variablen. Der Vorteil solcher Variablen ist, dass man entsprechende Änderungen nur an einer zentralen Stelle ändern muss und nicht im gesamten Code. Mit Less hat man zusätzlich die Möglichkeit, sogenannte Mixins zu verwenden. Mit solchen Mixins kann man verschiedene Eigenschaften unter einem Bezeichner zusammenfassen, wobei es dann reicht, nur diesen Bezeichner aufzurufen, wenn man die restlichen Eigenschaften verwenden möchte. Ebenfalls ist es mit Less möglich, verschiedene Sektoren ineinander zu verschachteln, womit der Code verkürzt werden kann.

III. FAZIT

Insgesamt war die Erfindung des responsive Webdesign unumgänglich in Hinblick auf die steigende Vielfalt von Größen und Auflösung bei mobilen Endgeräten. Bootstrap als CSS-Framework macht es dem Webentwickler leicht, solche Webseiten zu entwickeln, wobei Bootstrap zudem noch so personalisiert werden kann, dass die Webseiten individuell gestaltet werden können und nicht alle das gleiche Design haben