Sitzungsaufgaben "Responsives Webdesign mit Bootstrap - First Steps"

Aufgabe 0

Laden Sie das Framework „Bootstrap“ von der offiziellen Bootstrap-Website http://getbootstrap.com herunter und extrahieren Sie den Inhalt des Zip-Archivs in Ihren Arbeitsordner. Wenn Ihnen Bootstrap noch unbekannt ist, dann informieren Sie sich bitte zuerst über das Framework im Wikipedia-Beitrag unter http://de.wikipedia.org/wiki/Bootstrap_%28Framework%29.

Aufgabe 1

Erstellen Sie auf Grundlage der „Jumbotron“-Beispielseite (vgl. http://getbootstrap.com/getting-started/#examples und http://getbootstrap.com/examples/jumbotron) die Übersichtsseite index.htm, auf der drei Themen, die Sie interessieren, nach der folgenden Vorlage geteasert und verlinkt sind:

Indexseite "World's Cutest Animals" — Indexseite „World’s Cutest Animals“

So funktioniert’s:

Bootstraps „Jumbotron“ enthält den Namen Ihrer Seite, gerne auch eine kurze Beschreibung.
Unterhalb des „Jumbotrons“ sind drei Unterseiten verlinkt, die in Bootstraps Gittersystem (vgl. http://getbootstrap.com/css/#grid) jeweils vier Gridspalten einnehmen.
Innerhalb jeder Gridspalte finden sich die folgenden Informationen und Inhalte:
- Eine Überschrift
- Ein Bild des verlinkten Beitrages. Sorgen Sie bitte dafür, dass sich das Bild responsiv verhält: Wird das Browserfenster auf eine gerine Breite skaliert, so skaliert auch das Bild mit der veränderten Seitenbreite. Tipp: http://getbootstrap.com/css/#images.
- Kurzer Teasertext, der Lust auf den verlinkten Beitrag macht.
- Ein Button, der auf den entsprechenden Beitrag verlinkt (vgl. http://getbootstrap.com/css/#buttons).

Aufgabe 2

Erstellen Sie zu jedem Thema, das auf der Startseite verlinkt ist, eine eigene Seite, die wie folgend aufgebaut ist:

Detailseite "World's Cutest Animals" — Detailseite „World’s Cutest Animals“

Aufbau der Detailseiten:

Am oberen Rand der Detailseite findet sich eine horizontale Navigationsleiste aus der Bootstrap-Werkzeugkiste, auf der die Startseite index.htm sowie alle Detailseiten in einem DropDown-Element verlinkt sind (Tipp: Ein Beispiel für die Navigationsleiste findet sich unter http://getbootstrap.com/examples/theme; bitte unbedingt darauf achten, dass jQuery eingebunden ist!).
Die Detailseite beginnt mit einer Überschrift (in dem zuvor wiedergegebenen Screenshot „Wombats“).
Unterhalb der Überschrift findet sich ein großes Bild, das responsiv auf die Verringerung der Seitenbreite reagiert.
Unterhalb des Bildes wird das jeweilige Thema (mit Überschriften, Unterüberschriften, Absätzen, Hyperlinks, unsortierten Listen, etc.) beschrieben.