Table of Contents
Wer, wie, was ist Bootstrap?Gib hier deine Überschrift ein
In Anlehnung an die Sesamstraße: Bootstrap wurde eigentlich 2010 von Twitter für den internen Gebrauch entwickelt und 2011 als Open-Source auf GitHub freigegeben. Als HTML5-, CSS3- und auch JS-Framework bietet es Bausteine für die Responsive Webdesign Entwicklung. Es verfolgt den Mobil-First-Ansatz (Artikel bei Elma Studio [2011] und bei tutsplus [2013]).
Im Umfeld dieses Open-Source-Projektes gibt es freie und kostenpflichtige Tools und Editoren und ebenso freie und kostenpflichtige Vorlagen (Themes, Templates).
Ausgehend von der Website getbootstrap.com (mit Blog) sind Übersetzungen entstanden, darunter auch auf Deutsch unter holdirbootstrap.de (meist nicht ganz aktuell). Der Verweis auf (inzwischen kostenpflichtige) Themen ist offensichtlich nur im englischen Original vorhanden, ebenso wie der Customizer.
Momentan (2017) vollzieht sich gerade der Übergang von Bootstrap 3 zur 4er Version. Seit Oktober ist Beta 2 verfügbar. Die meisten Ressourcen nutzen jedoch noch BS3.
Wie installieren?
Anleitungen und Download bei holdirbootstrap.de.
„Bootstrap herunterladen“ in das eigentliche Site-Wurzelverzeichnis oder nach Download umbenennen. Die Datei „bootstrap-X.X.X-dist.zip“ beinhaltet nur die Ordner „js“, „css“ (und ggf. „fonts“) mit den (schon) kompilierten und minifizierten Dateien.
„Quelle herunterladen“ beinhaltet neben den drei oben genannten Ordnern obiger Datei noch Beispiele und ist ca. 10MB groß. Die Beispiele nutzen jeweils eine zugeordnete CSS- und ggf. JS-Datei im gleichen Verzeichnis und Dateien im dist-Ordner innerhalb des docs-Ordners. Diese Beispiele sind identisch mit den Online-Beispielen.
Der Vollständigkeit halber: es gibt auch die Möglichkeit das Downloadpaket anzupassen.
Ohne Download per CDN (Content Delivery Network, im konkreten Fall maxcdn). Bei BootstrapCDN sind auch Bootswatch, Font Awesome (bei Bedarf extra einbinden) und Bootlint zu finden.
Werden (zusätzlich zu den Dateien im js-Ordner) JavaScript-Plugins verwendet so muß jQuery eingebunden werden: lokal oder per CDN. Siehe Basisvorlage.
Raster-System
Das Rastersystem von Bootstrap ermöglicht sein Responsive Webdesign.
Im Kern geht es um die Verwendung von media-queries. Diese haben auch den Einzug in Dreamweaver gehalten unter Modifizieren > Medienabfragen. Entsprechend „Can I use“ werden sie von allen Browsern unterstützt, jedoch nicht vom IE8. Abgesehen davon haben die Internet Explorer 8, 9 und 10 ihr End of Life erreicht.
Das Raster-System beruht wie gewohnt auf Zeilen und Spalten (row und col) und einem 12er-System.
Wie beginnen ?
Die Basis-Vorlage muß nach dem kopieren auch lokal funktionieren. Ggf. sind Pfadangaben anzupassen. Die Beispiele selber beginnen auch noch einmal mit einer Basis-Vorlage (starter-template), die auch wiederum lokal unter „…/docs/examples“ verfügbar ist und eine Navigation enthält. Bei einer Größenänderung des Browserfensters bzw. bei Verwendung anderer Endgeräte passt sich z.B. das Aussehen der Navigationsleiste an.
Schauen Sie sich beide Vorlagen in Dreamweaver im Quelltext an (z.B. html5shiv.js und respond.js für ältere IE).
2 Wege?
Prinzipiell gibt es (mindestens) zwei Wege um zum Ergebnis zu kommen:
– die Webseite manuell aufzubauen unter Zuhilfenahme von mitgelieferten Bootstrap-Komponenten und jQuery-Plugins.
Im Bezug auf das Erlernen von Webtechniken allgemein und hier im Bezug auf Bootstrap sind die Ressourcen der W3Schools sehr zu empfehlen. Dort gibt es schon (Ende 2017) Tutorials zu Bootstrap 4, wobei z.B. Examples, Themes und die Referenzen für CSS und JS nur im 3er vorhanden sind. Die Beispielseite „The Band„ bietet ein Full Page Demo mit Full Source Code und viele, viele Einzelschritte zum Ausprobieren.
– Vorlagen herunterzuladen und den eigenen Wünschen anzupassen.
Beide Wege setzen ein Verständnis des Innenlebens einer Bootstrap-Webseite voraus.
Übersicht
Bei startbootstrap ist eine sehr informative Ressourcenauflistung incl. freier Themen zu finden. Teilweise schon der Bezug zu Bootstrap 4.
Tools (sofern diese gebraucht werden)
LESS und SASS sind CSS-Präprozessoren, d.h. sie ergänzen CSS. Dazu auch t3n.
LESS-Dateien sind bei „Quelle herunterladen“ mit dabei.
Crunch 2 zum kompillieren von LESS-Dateien.
Artikel zu LESS: Wlad Leirich und Tobias Seckinger.
Bootlint bzw. Lint
Hilfe bei Stackoverflow
Editoren
Bootply Spielwiese für Bootstrap; Visueller Editor; frei; Kosten offensichtlich nur für Quellcodedownload frei
LayoutIt frei
Jetstrap Kosten
Brix.io Kosten
Pinegrow 7 Tage frei, dann Kosten
Übersichten zu Editoren bei
Tutsme mit Übersichtstabelle und Zusammenfassung und bei Mashable
Vorlagen
Bei startbootstrap gibt es wie schon erwähnt diverse freie Themen, auch 4er Portfolios wie Stylish Portfolio. Gleichzeitig wird versucht mit kostenpflichtigen sogenannten Premium-Vorlagen Geld zu verdienen.
Bootbundle bietet einen freien Download an (Stand Herbst 2014), in dem diverse der dort aufgeführten Quellen vereint sind.
BootstrapZero mit freien Themen (auch WordPress).
Wrapbootstrap ist eine der großen Themensammlungen Kosten
BootstrapBay hat offensichtlich nur kostenpflichtigen Inhalt.
Bei TemplateStash sind fast alle (Bootstrap-)Vorlagen frei. Vereint diverse Anbieter (Theme Provider), bei denen es dann manchmal doch nicht frei ist. So gibt es bei OnePageLove extra die Kategorie „free“, in der auch (aber nicht nur) Bootstrap-Vorlagen zu finden sind. Umgedreht listet die Kategorie „Bootstrap“ sowohl freie als auch kostenpflichtige Vorlagen auf.
shapebootstrap hat etwas versteckt auch freie Vorlagen mit jeweils teils beachtlichen Downloadzahlen.
Auf getbootstrap wurde schon verwiesen Kosten.
Der Vollständigkeit halber: Bootswatch (schon erwähnt als CDN): Thema auswählen und CSS herunterladen (bootstrap.css) und als Ersatz lokal einarbeiten.
