Übung: Projekt Europa mit Bootstrap

Größe: px

Ab Seite anzeigen:

Download "Übung: Projekt Europa mit Bootstrap"

Gertrud Schumacher
vor 5 Jahren
Abrufe

Übung: Projekt Europa mit Bootstrap Erstelle eine Datei index.html und befülle diese mit dem vorgegebenen Basic Template von der Website www.getbootstrap.com (oder www.holdirbootstrap.

Ziel: man erspart sich das Tippen, da hier bereits alle Links zu den passenden Ordner (css, js) definiert sind.

1 Übung: Projekt Europa mit Bootstrap Erstelle eine Datei index.html und befülle diese mit dem vorgegebenen Basic Template von der Website (oder durch Kopieren und Einfügen : Navigation unter Basic template die einfache Datei kopieren. Ziel: man erspart sich das Tippen, da hier bereits alle Links zu den passenden Ordner (css, js) definiert sind. Kleine Änderungen: Ändere auf die Sprache deutsch : <html lang= de > statt en Ändere den Titel auf Hak Mistelbach Ändere auch noch den Text in der Überschrift <h1> auf Projekt Europa Hak Mistelbach Speichern. Alle Ordner anlegen inkl. einen neuen Ordner img. Dahinein sollen die passenden Bilder eingefügt werden, damit man sie später verwenden kann: Bilder im img -Ordner: Fertig mit den Vorbereitungen. Eberhart 3_b4_europa.docx 1

2 Start Erstelle im body einen Container mit einer <row> die ein <aside> und ein <article> enthält. HTML5 semantic: "article" kennzeichnet einen wichtigen Hauptteil eines Dokuments Col-md-3 für den aside -Bereich, Rest für article -Bereich (=9) HTML5 semantic: "aside" kennzeichnet Informationen, die mit dem Hauptteil zusammenhängen, aber nicht unbedingt für das Verständnis des Hauptteils notwendig sind H1 Überschrift bleibt H2 für <aside>: Die 3CK H2 für <article>: Teilnahme <p> für <article>: Das Thema des diesjährigen Kreativwettbewerbs lautet "Schule Umwelt - Mitwelt" Nun soll ein Bild eingefügt werden, nämlich im Bereich <aside> unter der Überschrift. Nun muss der Link zu dem Bild eingefügt werden. Dabei hilft brackets.io mit, indem er den Code automatisch vervollständigen will und Vorschläge bringt, bis hin zur Auswahl im img -Ordner: Auf den Alternativ-Text verzichten wir ausnahmsweise! Eberhart 3_b4_europa.docx 2

leider zieht sich das Bild über die ganze Seite und nicht nur

Lösung: Damit das Bild sich an die Spalte vollkommen zu 100%

3 leider zieht sich das Bild über die ganze Seite und nicht nur auf die Spalten, die mit <aside> gemeint wurden. Lösung: Damit das Bild sich an die Spalte vollkommen zu 100% anpasst, schreibe danach eine Klasse an, die genau das macht, nämlich: class= img-fluid. Daher wird eine responsive Anpassung vorgenommen: Die Klasse rounded rundet die Ecken etwas ab. Eberhart 3_b4_europa.docx 3

4 Weitere Änderungen: Füge im <article> folgenden Text ein Im <article>soll dieser Link eingefügt werden: Eberhart 3_b4_europa.docx 4

5 Footer erstellen mit offset Ganz unten soll ein footer erstellt werden, der einen Inhalt rechts haben soll. Nämlich 3CK Hak Mistelbach 2018 Erstelle nach dem vorhandenen Container einen neuen Container und eine <row>, die mit einem offset versehen wird, damit der Text in den rechten Spalten steht. Eberhart 3_b4_europa.docx 5

Neuer Container mit vier eingerahmten Blöcken (cards) Erstelle vor dem Footer einen neuen Container mit einer <row>. Inhalt sollen vier Boxen werden, die einen dezenten Rahmen haben.

Dafür muss man nicht die Zahle hinter der col eingeben, da Bootstrap 4 die Spalten, wenn keine besonderen Präferenzen eingegeben werden, automatisch gerecht aufteilt.

6 Neuer Container mit vier eingerahmten Blöcken (cards) Erstelle vor dem Footer einen neuen Container mit einer <row>. Inhalt sollen vier Boxen werden, die einen dezenten Rahmen haben. Dafür erstelle eine neue <section> inkl. <row>. Dafür muss man nicht die Zahle hinter der col eingeben, da Bootstrap 4 die Spalten, wenn keine besonderen Präferenzen eingegeben werden, automatisch gerecht aufteilt. Daher: Cards: Karten sind ein häufig genutztes Stilmittel moderner Web- und Mobil-Layouts, zum Beispiel für Übersichten. Sie haben einen dezenten leichten Rahmen und sind so einerseits schön abgegrenzt und andererseits mit unterschiedlichen Inhalten befüllbar. Beispiel auf : In Bootstrap 4 wurde die Komponente cards eingeführt. Cards (Karten) können Bilder, Texte, Listen oder Buttons enthalten, selbst Navigationsleisten innerhalb von Karten sind möglich. Den Kopf- und Fußbereich kann man optisch absetzen, die Karten selbst auch einfärben. Wenn man mehrere Karten nebeneinander platziert, bekommen diese Flexbox sei Dank alle die gleiche Höhe. Wie in Bootstrap üblich, bestimmen vorgegebene Klassen die Gestaltung. Das umfassende Element erhält die Klasse card, ein oben angeordnetes Bild card-img-top. Der eigentliche Inhalt steht innerhalb von card-body und kann einen Titel card-title und Eberhart 3_b4_europa.docx 6

7 einen Text card-text enthalten Übung: Erstelle eine <section> mit einer <row> Da drinnen schreibe folgendes in die erste Card: inkl. Kommentar nach der letzten >/div>:  Code: <div class="col-md"> <div class="card"> <div class="card-body"> <h5 class="card-title">no alcohol</h5> <h6 class="card-subtitle mb-2 text-muted">card subtitle</h6> <p class="card-text">in einem animierten Film wird eine Flasche gezeigt, aus der Früchte und Promillezeichen heraussprudeln.</p> <a href="#" class="card-link">card link</a> <a href="#" class="card-link">another link</a> </div> </div> </div>  Eberhart 3_b4_europa.docx 7

8 Das ist schon der erste Schritt. Nun sollen noch drei cards folgen. Kopiere dafür diese card und füge es dreimal darunter ein. ABER: Man muss es in die bereits vorbereitete <col> einfügen. Es sind ja schon drei davon vorhanden. Leider klebt der linke Kasten am Bild darüber. Lösung: Füge leere Zeile mit Hilfe einer <br> zwischen den beiden <section> ein. Eberhart 3_b4_europa.docx 8

Bilder hinzufügen: hier nach der Überschrift In jede

src="img/jpg"> Aufgabe: In den Cards 2 bis 4 füge diese

9 Bilder hinzufügen: hier nach der Überschrift In jede einzelne Card soll nun ganz oben ein Bild eingefügt werden. Füge es noch vor dem body ein. Im ersten card verwende das Bild aus dem img -Ordner: no_alkohol.jpg Nutze dazu die Zeile: <img class="card-img-top" src="img/no_alkohol.jpg"> Aufgabe: In den Cards 2 bis 4 füge diese Bilder ein: Ändere die Texte. Zuerst die Überschriften und dann die Texte: Texte können bequem von weiter unten kopiert werden. Eberhart 3_b4_europa.docx 9

10 Texte zum Kopieren: Die Klassengemeinschaft wird sehr gepflegt und durch verschiedene Aktionen gestärkt. Unsere Umwelt geht uns alle an und deshalb unterstützen wir diese aktiv. Wir waren gemeinsam einige Tage auf einer Kennenlernwoche. Die Card subtitle und Card link und Another link können belassen werden. Eberhart 3_b4_europa.docx 10

Ähnliche Dokumente

Übung: Projekt Europa mit Bootstrap

Übung: Projekt Europa mit Bootstrap Erstelle eine Datei index.html und befülle diese mit dem vorgegebenen Basic Template von der Website www.getbootstrap.com durch Kopieren und Einfügen Dann in der Navigation