Bootstrap

In dieser Aufgabe versuchen wir eine Bootstrap-Seite aus verschiedenen Komponenten und mit Hilfe des Bootstrap-Grids aufzubauen.

1. Bootstrap-Beispiel-Seite anzeigen

Im ersten Schritt kopieren wir die Dateien auf unseren Rechner und zeigen die Webseite lokal im Browser an:

  1. Laden Sie die Datei bootstrap-example.zip herunter.
  2. Kopieren Sie den Inhalt der zip-Datei in den Ordner WebDesign.
  3. Öffnen Sie die Datei index.html mit einem Doppelklick im Standard-Browser.
  4. Verschieben Sie das Browser-Fenster so, dass es etwa die Hälfte des Bildschirms belegt.

2. Code verstehen

Wir schauen uns mal an, aus was die Bootstrap-Seite besteht.

  1. Schauen Sie sich den Inhalt der Ordner css, fonts und js an. Diese drei Ordner stellen das Bootstrap-Framework dar und werden von jeder Bootstrap-Seite verwendet. Sie beinhalten CSS- und Javascript-Dateien sowie eine Sammlung von Icons, welche in Bootstrap-Menus und -Buttons verwendet werden kann.
  2. Machen Sie einen Rechtsklick auf die Datei index.html und wählen Sie öffnen mit Notepad++.
  3. Zuoberst im HTML-Code, im sogenannten head-Element (also zwischen <head> und </head>) werden die verwendeten CSS-Dateien verlinkt.
  4. Zuunterst im Code, vor Schliessen des body-Elements (also gerade vor dem </body>) werden verwendete Javascript-Dateien verlinkt.
  5. Dazwischen ist der eigentliche Inhalt der Bootstrap-Seite, alles was Teil des div-Elements mit der Klasse container ist (<div class="container">).
  6. Die Seite besteht aus einem header, einem jumbotron, einer Reihe (row) mit zwei Kolonnen (col-lg-6) und einem footer.

3. Inhalt anpassen

  1. Verschieben Sie das Notepad++-Fenster so, dass es die zweite Hälfte des Bildschirms belegt.
  2. Passen Sie den Text an, wie Sie es in der Aufgabe zum HTML-Template gemacht haben.

4. Grid ändern

Der Bootstrap-Standard legt einen Grid aus 12 Kolonnen fest. Wenn man eine Spalte definiert, gibt man an, wie viele Kolonnen des Grids diese belegt. Dies geschieht, indem man ihr die Klasse col-lg-x zuweist, wobei x die Anzahl Kolonnen festlegt und lg sagt, dass dies nur auf einem grossen Bildschirm so sein soll. Für x sind Werte von 1 bis 12 möglich und an Stelle von lg kann man md, sm oder xs – für mittelgrosse, kleine oder sehr kleine Bildschirme – hinschreiben. (Man kann die Grössen auch mischen, so dass eine Spalte auf einem kleinen Geräte mehr Kolonnen belegt als auf einem grossen! – mehr dazu hier).

  1. Suchen Sie im Code die beiden div-Elemente mit der Klasse col-lg-6.
  2. Ändern Sie bei einem Element die Klasse in col-lg-4 und bein anderen in col-lg-8.

5. CSS-Klassen ändern

Diverse Bootstrap-Komponenten können durch Zuweisen von bestimmten CSS-Klassen in ihrem Aussehen und ihrer Funktionsweise angepasst werden:

  1. Suchen Sie im Code den grünen Button (das ist ein Element mit der Klasse btn-success).
  2. Ändern Sie die Klasse von btn-success auf btn-warning.
  3. Welche weitere Button-Varianten existieren?

6. CSS-Regeln anpassen

Wenn man Anpassungen – die weiter gehen als das was Bootstrap bietet – machen möchte, kann man dies in einer eigenen CSS-Datei machen. Das hier bearbeitete Beispiel besitzt bereits zusätzliche CSS-Regeln die nicht Teil von Bootstrap sind.

  1. Öffnen Sie die Datei jumbotron-narrow.css in Notepad++.
  2. Verschieben Sie das Notepad++-Fenster so, dass es die zweite Hälfte des Bildschirms belegt.
  3. Suchen sie nach der Regeln, welche das Aussehen des jumbotrons bestimmt.
  4. Fügen Sie dort den folgende Inhalt auf einer neuen Zeile hinzu: background-color: #fffff2.
  5. Speichern sie die Datei (Ctrl+S)
  6. Wechseln Sie zum Browser und aktualisieren Sie die Seite (Ctrl+R oder F5).

7. Weitere Bootstrap-Komponenten

Natürlich kann man die Seite nun beliebig erweitern. Zur Verfügung stehen sämtliche Bootstrap-Komponenten. Wir versuchen mal einige Bilder als thumbnails einzubauen:

  1. Schauen Sie sich in der Bootstrap-Dokumentation den HTML-Code an, den Bootstrap für thumbnails verwendet.
  2. Erzeugen Sie im HTML-Code von index.html eine neue Zeile: <div class="row"> und fügen sie dort 3 Spalten ein die jeweils 4 Kolonnen breit sind: <div class="col-md-4">.
  3. In diesen 3 Spalten fügen Sie nun je ein thumbnail ein: <div class="thumbnail">.
  4. Suchen Sie nun online oder in ihrem Bilder-Verzeichnis nach 3 geeigneten Bildern.
  5. Erstellen sie einen Unterordner images und kopieren Sie die 3 Bilder dort hinein.
  6. In jedem thumbnail-Element muss nun ein img-Element eingefügt werden.
  7. Im img-Element setzen Sie das Attribut src auf das entsprechende Bild, welches an dieser Stelle angezeigt werden soll. Also z.B. <img src="images/meinBild.jpg">

8. ev. eine andere Vorlage

  1. Sie können die offiziellen Bootstrap-Beispiel-Seiten online anschauen. Sie sind Teil der Bootstrap-Dokumentation.
  2. Falls Sie den HTML-Code eines Beispiels haben möchten, so laden Sie den Source-Code von Bootstrap von der Bootstrap-Seite herunter und entpacken ihn.
  3. Sie finden die Beispiele im Ordner docs/examples.

9. ev. ein ganz anderes Design

  1. Suchen Sie ein frei verfügbares Bootstrap theme oder passen Sie die normale Bootstrap-Version mit dem Customizer an.
  2. Übernehmen Sie die Inhalte der bestehenden Webseite ins neue Theme.