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:
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:
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.