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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.