Einsendeaufgabe WEBD08A

Bei dieser Einsendeaufgabe geht es um die Anwendung des Bootstrap-Rastersystems in Verbindung mit einer Kombination verschiedener Bootstrap-Komponenten. Teilweise müssen Sie die benötigten Klassen in der Bootstrap-Dokumentation herausfinden.

Damit Sie die Aufgabe auch lösen können, wenn Sie gerade keinen Internetzugang haben, finden Sie die entsprechenden Kapitel aus der Dokumentation in Ihrem Downloadordner.

Sie können insgesamt 100 Punkte erreichen. Ihre Praxislösung soll folgende Kriterien erfüllen (Punkteverteilung in Klammern):

• Am Seitenanfang befindet sich eine Navbar-Komponente. Als Logo können Sie ein beliebiges Bild Ihrer Wahl verwenden. Es sollte jedoch nicht größer als ca. 40x40px sein.

Darunter ein dreispaltiges Layout, mit folgende Rasteraufteilung bei den drei Geräteklassen Extra Small, Small und Large:

XS: 12-12-12, SM: 4-4-4, LG: 3-6-3

In der ersten Spalte befindet sich eine Jumbotron-Komponente.

Hier sollen Sie gegenüber dem im Studienheft gezeigten Beispiel eine Änderung vornehmen: Bitte weisen Sie der Überschrift die Klasse display-4 zu.

Eine weitere Änderung betrifft den Button innerhalb der Jumbotron-Komponente: Bitte suchen Sie aus der Bootstrap-Dokumentation für Buttons (Components>Buttons) die Klasse, die dafür sorgt, dass der Button eine blaue Rahmenlinie bekommt. Weisen Sie diese Klasse Ihrem Button zu.

In der zweiten Spalte befindet sich eine Card-Komponente mit einem Bild.

Hier sollen Sie gegenüber dem im Studienheft gezeigten Beispiel eine Änderung vornehmen: Bitte suchen Sie aus der Bootstrap-Dokumentation für die Rahmen (Utilities>Borders) die Klasse, die dafür sorgt, dass die Card-Komponente eine blaue Rahmenlinie bekommt. Weisen Sie diese Klasse Ihrer Card-Komponente zu.

Eine weitere Änderung betrifft den Button innerhalb der card-Komponente: Bitte suchen Sie aus der Bootstrap-Dokumentation für Buttons (Components>Buttons) die Klasse, die dafür sorgt, dass auch dieser Button eine blaue Rahmenlinie bekommt. Weisen Sie diese Klasse Ihrem Button zu.

Hier müssen Sie außerdem gegenüber dem im Studienheft gezeigten Beispiel eine Ergänzung vornehmen: Bitte suchen Sie aus der Bootstrap-Dokumentation für img-Elemente (Content>Images) die Klasse, die dafür sorgt, dass das Bild das Verhalten von Fluid Images aufweist. Weisen Sie diese Klasse Ihrem Bild zu (andernfalls kann es vorkommen, dass die CardKomponente mit dem Bild nicht in die Spalte passt). Damit das Bild auch bei breiteren Viewports (Geräteklasse Extra Large) die Spalte bzw. die Card-Komponente komplett füllt, sollte es eine native Breite von 600px haben.

In der dritten Spalte befindet sich eine List-Group-Komponente mit 9 Elementen und Tags.