Webideen umsetzen mit Twitter Bootstrap (Video)

Man kennt das ja: Der Kopf ist voller Ideen, nur wie man die Ideen umsetzen soll, weiß man nicht so recht. Zum Glück gibt es zahlreiche Werkzeuge und Tools, die einem bei dem Problem helfen: Papier und Stift, Wireframe-Software oder Frameworks zum Erstellen von Webseiten-Dummies. Wir haben mal den Selbsttest gemacht und das CSS-Framework „Twitter Bootstrap“ ausprobiert. Und siehe da: Auch mit durchschnittlichen HTML- und CSS-Kenntnissen bekommt man mit dem Framework einigermaßen schnell eine ansehnliche Webseite auf den Screen.

Bootstrap ist ein CSS-Framework, das von einem (ehemaligen) Twitter-Mitarbeiter vor ca. einem Jahr auf Github veröffentlicht wurde und sich seitedem großer Beliebtheit unter Webmachern und Frontend-Entwicklern erfreut. Kurz gesagt ist Bootstrap ein Baukasten, der für fasst alle Features einer Webseite vorgefertigte Bausteine und Elemente enthält, die sich im einfachsten Fall schlicht zusammenkopieren lassen. Dadurch lassen sich HTML-Dummies, also Webseiten ohne Funktionalität, mit ein wenig Übung schon an einem Tag realisieren. Ein nützliches Tool für alle, die mal schnell eine Idee für eine Webseite visualisieren möchten und einigermaßen solide Grundkenntnisse in HTML und CSS mitbringen.

Video: Schnelleinführung in Bootstrap

Für alle, die sich lieber ein Video ansehen, habe ich den Selbstversuch mit Bootstrap dokumentiert bzw. ein 15-minütiges Video gedreht, das einem den Start mit Twitter Bootstrap erleichtern soll (der Ton ist leider an einigen Stellen übersteuert):

Erste Schritte kurz erklärt

Bootstrap lässt sich sehr einfach und schnell auch ohne umfangreiche Tutorials nutzen. Alle Code-Beispiele und Erklärungen finden sich auf der Bootstrap-Seite. Hier die wichtigsten Schritte für den Schnellstart:

• Man lädt sich die kleine Version (compiled) auf der Bootstrapseite herunter und entpackt sie.
• Die Datei enthält nur drei Ordner: “css” mit vier CSS-Files, “img” mit zwei Icon-Sprites und “js” mit zwei Javascript-Dateien.
• Um zu starten erstellt man eine leere index.html und legt sie im Bootstrap-Ordner ab. Dort kopiert man das HTML-Gerüst von Bootstrap rein (das zweite Code-Beispiel). Jetzt erscheint auf der Seite bereits das berühmte “Hello World”.
• Das grundlegende Layout der Seite wird mit einem übergreifenden container <div class=”container”> realisiert, es gibt einspaltige fixed-Layouts oder zweispaltige fluid-Layouts.
• Dann sollte man sich kurz das Grid-System von Bootstrap zu Gemüte führen. Wer noch nicht mit Grid-Systemen gearbeitet hat, wird sich sehr schnell daran gewöhnen: Das System untergliedert die Webseite in verschiedene Spalten (bei Bootstrap sind es zwölf), die sich über eine Klasse (z.B. class=”span2”) verbinden lassen. Das erinnert ein wenig an die Arbeit mit Tabellen und macht die Positionierung von Elementen auf der Seite extrem einfach.
• Anschließend kann man sich aus der Dokumentation schlicht die Elemente und html-Schnippsel rauskopieren, die man für die Webseite haben will. Bei Bootstrap werden komplexere Elemente wie Navigationen, Progress-Bars oder Paginationen unter components aufgeführt, während grundlegende Elemente wie Typografie, Buttons oder Formulare unter base css erklärt werden.
• Die einzelnen Elemente kann man einfach über das oben beschriebene Grid-System auf der Seite positionieren.

Für die Bearbeitung benötigt man natürlich noch einen Editor, ich nutze notepad++, weil er recht übersichtlich ist und auch Laien damit gut zurecht kommen, aber man kann natürlich jeden beliebigen Editor nehmen.

Der Style von Bootstrap ist vielleicht nicht jedermanns Sache, es wird viel mit Text-Shadows, Box-Shadows und Verläufen gearbeitet. Das kann man natürlich leicht über eine eigene CSS-Datei ändern, die man in der HTML-Datei dann unterhalb der Bootstrap-CSS-Datei einbindet und so den ursprünglichen Style überschreibt. Oder man schreibt den eigenen CSS-Style direkt in die HTML-Datei.

Examples nutzen

Wenn es mal ganz schnell gehen soll, kann man sich auch die vollständige Version (bootstrap source) herunterladen, die dann sämtliche auf Github veröffentlichten Dateien enthält. Mit enthalten sind dann auch einige Examples, die man direkt nutzen und an seine Bedürfnisse anpassen kann.

Übersichtlicher ist es aus meiner Sicht, wenn man die HTML-Dateie aus dem Examples-Ordner auf die erste Ordnerebene kopiert. Anschließend müssen natürlich die Pfade angepasst werden (geht schnell über die Suche/Ersetze-Funktion).

Die Examples haben die CSS-Anpassungen direkt in die HTML-Datei geschrieben, was die Sache allerdings auch etwas unübersichtlich machen kann. Nützlich für die Anpassung des CSS-Styles ist der allseits beliebte Firebug (ein Browser-Plugin für den Firefox), mit dem man relativ schnell die verwendeten Styles finden und dann in der HTML-Datei umschreiben kann. Für Chrome-Nutzer bieten sich dazu die bereits integrierten Chrome-Developer-Tools an.

Zum Test hatte ich mal das Carousel-Beispiel genutzt, um eine kleine Startseite zu bauen:

Ein bisschen gehacke ist es schon, wenn man sich durch das CSS und HTML bestehender Seiten kämpfen muss. An einigen Stellen hakte es dann auch: Um das Carousel (die Slideshow) von Slide auf Fade mit einer angenehmen Transition umzustellen (d.h. die Bilder wechseln nicht von rechts nach links, sondern gehen langsam ineinander über), bedurfte es dann doch einer längeren Recherche, bis irgend ein CSS-Hack funktionierte. Hätte man nicht gedacht, da Transitions gerade bei solchen Slideshows inzwischen doch eigentlich kein Problem sind …

Fazit

Wer keine HTML- und CSS-Kenntnisse mitbringt, sollte natürlich lieber auf ein Wireframe-Tool zurückgreifen. Dennoch muss man längst kein Profi sein, um Bootstrap sinnvoll zu nutzen. Ganz im Gegenteil: Vieles lässt sich mit Copy & Paste lösen, und auch mittelmäßige HTML- und CSS-Kenntnisse reichen völlig aus, um schnelle HTML-Dummies zu bauen. Auch wenn ich Anfangs das Gefühl hatte, dass ich mit selbst zusammengesuchten Quellen und Versatzstücken doch schneller bin, so verflog der Eindruck mit der Zeit. Bootstrap bleibt also auf jeden Fall in meinem Werkzeugkasten, und auch für andere Hobby-Coder lautet das Fazit: Einfach mal ausprobieren.