Bootstrap – Open Source Framework

Was ist Bootstrap und wer steckt dahinter?

Bootstrap ist ein Open Source Framework, das von den Entwicklern Jacob Thornton und Mark Otto entwickelt wurde, beide arbeiten für Twitter. Ziel war es eigentlich Mitarbeitern die Möglichkeit zu geben, anhand eines Werkzeugkoffers, der Elemente aus HTML, Java Script sowie CSS enthält, einfach neue Webprojekte zu entwerfen und zu programmieren. Das Framework sollte eine gemeinsame Basis bilden, welche die Entwicklung eines einheitlichen Frontends ermöglicht, auch wenn die Bibliotheken unterschiedlich sind. Eine besondere Rolle bei der Entwicklung von Bootstrap nahm die Gemeinschaftsarbeit von Designern sowie Programmierern ein. Nicht zuletzt dadurch wurde das Tool zu einem ausgezeichneten sowie leicht zu bedienenden Framework, das eine wertvolle Hilfe bei der Gestaltung von Webseiten darstellt. Bootstrap wurde Mitte 2011 als Open Source Projekt veröffentlicht. Es wird stetig verbessert, erweitert und steht bei GitHub zur Verfügung. Mittlerweile hat sich Botostrap zu einem der am meisten nachgefragten Projekte der Seite gemausert, das ständig weiter entwickelt wird. Eine Auswahl an jQuery-Plug-ins, für viele Bestandteile der Benutzeroberfläche wurde ebenfalls hinzugefügt. Bootstrap eignet sich darüber hinaus perfekt für die Entwicklung responsiver Layouts. Das macht das Framework zu einem begehrten Objekt vieler Programmierer. Immer mehr User greifen vom Tablet oder Smartphone auf das Internet zu, daher ist dieser Aspekt ein wichtiger Faktor für Nutzer.

Sie können sich kostenlos Bootstrap downloaden: http://getbootstrap.com/

Bootstrap Einsatzmöglichkeiten

Bootstrap wird für die Entwicklung von Webseiten gleich welcher Größe sowie Webapplikationen eingesetzt. Vereinfacht wird die Arbeit durch die vorgegebenen grundlegenden Formatierungen für Tabellen, Typografie, Formulare sowie Buttons. Im Weiteren bietet das Tool Mix-ins für wiederverwendbare Code-Snippets. Operationen für einfache Farbwerte oder Rechenaufgaben sind ebenfalls vorhanden. Entwickler erhalten durch bereits vordefinierte Angaben zur Gestaltung in kurzer Zeit eine übersichtliche Oberfläche. Diese kann einfach an die eigenen Wünsche und Vorstellungen angepasst werden. Darüber hinaus werden für Content Management Systeme (CMS), wie beispielsweise Typo3 oder Drupal bereits vorgefertigte Themes (Templates) angeboten. Das Framework kann damit ohne große Probleme in eines der gängigen CMS eingebunden werden.

Bootstrap aus technischer Sicht erklärt

Während der Verbesserungen des Tools in der Vergangenheit wurde der Schwerpunkt auf die Kompatibilität in unterschiedlichen Browsern gelegt. Grundlegende Informationen stehen somit allen Browsern sowie unterschiedlichen Endgeräten zur Verfügung. Erweiterte Funktionen werden nur für die Browser oder Geräte zur Verfügung gestellt, welche diese unterstützen. Diese Technik kann am Beispiel der durch CSS3 eingeführten Funktionalitäten für Schatten, Farbverläufe sowie abgerundete Ecken dargestellt werden. Diese werden allesamt von Bootstrap genutzt, dabei werden sie von älteren Versionen der Webbrowser überhaupt nicht unterstützt. Der Aufbau von Bootstrap lässt sich einfach darstellen: Der Kern des Tools besteht aus verschiedenen Stylesheets. Mittels des enthaltenen Stylesheets ‚bootstrap.less‘ bestimmen Programmierer selbstständig, welche Komponenten sie nutzen möchten. Weitere Anpassungen können über das zentrale Stylesheet, dass zur Konfiguration hinterlegt wurde gemacht werden.

Diese Vorteile bietet Bootstrap

Bootstrap wurde eigentlich dafür entwickelt, Frontend Websites zu entwerfen und umzusetzen. Mittlerweile wird es ebenfalls dafür genutzt, um das Backend einer Seite zu erstellen oder zu modifizieren. Auch Webapplikationen können daher mittels dieses praktischen Tools programmiert werden.

Die Vorzüge von Bootstrap im Überblick:
– Responsive Design lässt sich mit diesem Tool einfach umsetzen.
– Das Framework ist erweiterbar, es kann daher an die eigenen Bedürfnisse angepasst werden.
– Vielfältiges Angebot an vorgefertigten Themes sowie weiteren Elementen.
– Das System ist einfach umsetzbar, es lässt sich dank guter Strukturen leicht anwenden.
– Durch die Auswahlmöglichkeit vieler vorgefertigter Komponenten haben Nutzer eine immense Zeitersparnis gegenüber der Programmierung eigener Skripte
– Erweiterungsmöglichkeiten durch jQuery-Plugins sowie Javascript
– Große Kompatibilität: Alte sowie neue Versionen der Browser werden durch Bootstrap berücksichtigt.
– Durch geringen Wartungsaufwand weitere Zeitersparnis.

Bootstrap Besonderheiten

Bootstrap hat einige Besonderheiten zu bieten. Es basiert auf der Stylesheet-Sprache LESS, diese entspricht einer Obermenge von CSS. Jeder CSS-Befehl hat ebenso Gültigkeit bei einem LESS-Befehl. LESS hat jedoch noch weitaus mehr zu bieten als reines CSS, wie beispielsweise Variablen, Funktionen und Operatoren sowie die Schachtelung von Regeln. Durch diese Möglichkeiten werden Codewiederholungen vermieden. In der Praxis wird LESS wie folgt angewendet. Durch die Kompilierung der LESS Dateien unter Bootsrap wird eine CSS-Datei erstellt. Bei der Nutzung von Bootsrap wird dementsprechend auf diese generierte Datei zugegriffen. Die LESS-Dateien sind bislang nicht bekannt. Daher erkennen Webbrowser sie nicht und ignorieren daher die Anweisungen. Erst nach der Kompilierung können die Webbrowser die Informationen, die sie von der CSS-Datei erhalten auflösen und die darin enthaltenen Befehle ausführen.
Bootstrap ist ein modular aufgebautes Tool. Es besteht im Wesentlichen aus diesen Teilen:
– Grid-System sowie Responsives Design
– CSS-Stylesheet
– Komponenten, die wieder verwendet werden können
– Javascript-Plugins (optional verwendbar)

Responsives Design und Grid-System

Bootstrap verwendet standardmäßig ein zwölf-spaltiges responsives Raster-Layout. Dieses hat eine Breite von 940 Pixeln. Darüber hinaus kann ein festes Raster eingestellt werden oder ein variables. Im Weiteren kann eine Anpassung für verschiedene Auflösungen für mobile Endgeräte integriert werden.

Grundlegende CSS-Stylesheets unter Bootstrap

Für alle wichtigen HTML-Komponenten sind fundamentale Gestaltungsvorlagen enthalten. Damit ist es möglich ein einheitliches Erscheinungsbild für Formulare, Tabellen sowie Texte zur gewährleisten. Stildefinitionen können dabei einfach durch die Angabe bestimmter CSS Klassen genutzt werden.

Bootstrap Komponenten – wieder verwendbar

Auf die Komponenten unter Bootsrap, wie beispielsweise die Navigation oder andere Elemente kann immer wieder zugegriffen werden. Dadurch wird doppelter Aufwand erspart, da die Komponenten einfach von Bootsrap zur Verfügung gestellt werden. Diese können dann genutzt werden.

Bootstrap Javascript-Plugins – Optional

Wer schon zusätzliche Javascript-Bibliotheken für Bootsrap oder andere Tools geschrieben hat, der kennt das Dilemma. Es werden lediglich ein paar zusätzliche Plugins benötigt, um weiter arbeiten zu können. Doch diese müssen erst mühsam selber geschrieben und angepasst werden. Weitere Interaktionen auf der Webseite können einfach durch das Einbinden der Plugins, wie zum Beispiel Tooltips, Mouseovereffekte oder dergleichen über Javacript integriert werden. Dabei wird wieder die Jquery-Bibliothek verwendet. Viele Probleme, die mit dem Design einer Webseite zusammenhängen können auf diese Weise schnell und konventionell gelöst werden.

Bootstrap: Einfache Hilfe – wertvoll für viele Webdesigner

Doch das ist noch nicht alles, was dieses Tool zu etwas Besonderem macht. Mit diesem Framework können schnell gute Webseiten hergestellt werden. Durch die GNU Public Licenc kann das Tool ständig weiter entwickelt und zu einem wesentlichen Bestandteil des Webdesigns werden, das vielen Nutzern eine wertvolle Hilfe bietet.

Installationsvoraussetzungen

Bootstrap kann auf jeden Rechner heruntergeladen und gestartet werden. Dabei ist es egal, ob es ein Windows PC oder ein Apple Rechner ist. Außerdem läuft Bootstrap auf jedem Betriebssystem, wie beispielsweise Windows, iOS oder Linux. Die wichtigsten Voraussetzungen sind Kenntnisse in HTML und CSS. Darüber hinaus sollte der Nutzer über einen Code-Editor wie Dreamweaver, Netbeans oder sublime Text 2 verfügen. Dann muss Bootstrap zunächst heruntergeladen werden. Wer sich ganz neu mit Bootstrap beschäftigt, wird sich wahrscheinlich fragen, wo er bei dem Ganzen denn anfangen soll und sich zunächst überfordert fühlen. Doch nur Mut, hier ist ‚Learning by doing‘ gefragt. Um das zu erreichen, ist das Nächste, was zu tun ist, Bootstrap zu installieren. Das ist ganz einfach möglich, indem zunächst die URL ‚holdirbootstrap.de‘ im Browser angesteuert wird. Dann muss der Button ‚Download Bootstrap‘ angeklickt werden. Schon beginnt der Download von Bootstrap in der aktuellsten Version. Einsteiger bei Bootstrap sollten bei dieser grundlegenden Bootstrap-Version bleiben. Dies enthält kompilierte CSS-, JavaScript- und Fonts-Dateien. Es sind keine Dokumente oder Originalquelldateien enthalten. Daneben besteht noch die Möglichkeit, den Bootstrap Quellcode herunterzuladen. Der steht unter dem Button ‚Download Bootstrap Source‘ zur Verfügung. Wer mit CSS-Vorprozessoren zur Erweiterung der CSS-Sprache erfahren ist, dem stehen zwei zusätzliche Optionen zur Verfügung. Die Source Code-Installation enthält Source LESS-, JavaScript- und Font-Dateien. Die SASS-Installation ist Bootstrap portiert von LESS auf SASS für die einfache Übernahme in ‚SASS-only-Projekte‘.

Bootstrap Download

Sobald die kompilierte Version von Bootstrap heruntergeladen und entpackt ist, kann der Bootstrap Ordner angesehen werden. Was dort zu sehen ist, stellt die grundlegendste Form von Bootstrap für eine schnelle Drop-in-Verwendung dar. Mit dieser gelingt der Start in beinahe jedes Web-Projekt. Die Standardvorlage verweist auf die .min CSS- und JS-Dateien. Es können zusätzliche Stylesheets erstellt werden, um Änderungen an der CSS vorzunehmen.

Source Code Download

Falls die Bootstrap-Quellcodeversion heruntergeladen und entpackt wurde, enthält diese vorkompilierte CSS-, JavaScript- und Schriftarten-Assets zusammen mit dem Quellcode von LESS, JavaScript und der Dokumentation. Zusätzlich zu den Dateien, die im Basis-Download enthalten sind, enthält es daher noch nicht kompilierte Quelldateien und Dokumentation.

Erstellen der HTML-Vorlage

Nachdem Bootstrap heruntergeladen und entpackt wurde, muss ein Texteditor geöffnet werden. Zum Beispiel stehen hierfür Notepad + + (Windows, kostenlos) oder Coda (Mac OS X, kostet Geld) zur Verfügung. Hier sind einige weitere Vorschläge.

– Vim (Windows/Mac OS X/Linux, kostenlos)
– Sublime Text (Windows/Mac OS X/Linux, kostenpflichtig)
– TextMate (Mac OS X, kostenpflichtig)
– Emacs (Windows/Mac/Linux, kostenlos)
– Gedit (Windows/Mac/Linux, kostenlos)

Bootstrap richtig anwenden

Um mit Bootstrap richtig zu starten sollte der vollständige Code inklusive Dokumentation heruntergeladen werden. Dort befindet sich im Ordner docs/examples das Dokument starter-template.html. Dieser enthält alles, was für eine gute Basis sowie für die ersten Gehversuche mit Bootstrap wichtig ist. Wie zu erwarten beginnt der Code dieser Datei mit dem HTML5-Doctype. Danach wird das Basis-Stylesheet eingebunden. Dadurch wird vor allem dafür gesorgt, dass alle HTML Elemente browserübergreifend gleich gezeigt werden. Dabei kommt die Datei ‚Normalize.css‘ zum Einsatz. Bei der Anpassung durch diese Datei werden im Vergleich zu einem Reset nicht alle Innen- und Außenabstände bei allen Teilen entfernt. Es werden anstattdessen vernünftige Standardwerte eingefügt. Das ist eine gute Grundlage, um mit einer weiteren Formatierung fortzufahren. Im weiteren Verlauf wird das Stylesheet eingebunden, das dafür sorgt, dass das Layout Responsive ist. Das sollte nur genutzt werden, wenn da tatsächlich gewünscht wird. Die Javascript-Datei HTML5-Shim sorgt dafür, dass sich die in HTML5 eingeführten in älteren Internetexplorern darstellen lassen. Zu guter Letzt gibt es einige Verweise auf alle mitgelieferten Javascript-Dateien. Für den realen Einsatz solltest Du Dir Dein eigenes Download-Paket schnüren lassen, indem lediglich die Dateien enthalten sind, die Du benötigst. Das ist wichtig für schnelle Ladezeiten.

Bootstrap Templates

Wenn Du die vollständige Version (bootstrap source) heruntergeladen hast, dann hast Du alle auf Github veröffentlichten Dateien. Darin sind eine Vielzahl von Beispielen enthalten, die direkt genutzt werden können. Diese müssen lediglich den eigenen Bedürfnissen angepasst werden. Am übersichtlichsten ist es, wenn die HTML-Dateien aus dem Ordner Examples auf die erste Ordnerebene kopiert werden. Anschließend müssen die Pfade angepasst werden. Das geht am schnellsten über die Funktion ‚Suchen und Ersetzen‘. In den Examples wurden die CSS-Anpassungen sofort in die HTML-Dateien hineingeschrieben. Das macht alles jedoch noch unübersichtlicher. Besonders ratsam ist daher die Anpassung des CSS-Styles in dem Firebug. Das ist ein Browser-Plugin für Firefox. Mit diesem kann man schnell alle verwendeten Styles auffinden und diese dann in der HTML-Datei umschreiben. Wer Chrome nutzt, der hat einen Vorteil: Denn er kann in diesem Fall die nützlichen Developper Tools von Chrome verwenden. Im Internet wird eine Vielzahl von kostenlosen Templates zum Download angeboten, mit denen Du sofort starten kannst. Du kannst diese nach Deinen Wünschen anpassen und damit zunächst ein paar gute Versuche starten. Die Templates findest Du einfach, wenn Du nach kostenlosen Templates im Internet suchst. Das ist jedoch nur für fortgeschrittene Nutzer ein Vorteil. Die Templates sollten so genutzt werden, dass sie für die eigenen Bedürfnisse gut passen. Dann kann jeder Bootsrap Nutzer sein Wissen erweitern und viel Spaß an dem Tool von Twitter haben.

Bootstrap-Anpassung

Sobald Du ein wenig mehr vertraut mit Bootstrap bist, möchtest Du vielleicht eine benutzerdefinierte Installation zu prüfen. Auf diese Weise kannst Du auswählen, welche Dateien in Ihren benutzerdefinierten Build von Bootstrap kompiliert werden sollen. Durch das Lesen der CSS- und Komponenten-Seiten auf getBootstrap kannst Du bestimmen, welche Dateien verwendet werden sollen und welche nicht und damit Deine Seite optimieren. Das Programm ist im Fazit für Anfänger zu empfehlen. Auch Fortgeschrittene können mit Twitter Bootstrap arbeiten.