Bootstrap 4 Schnellstart – Layout einer Website
In diesem Projekt bauen wir ein Layout für eine Produktseite.
Wie funktioniert diese Challenge?
- Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
- Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.
Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.
Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉
In dieser Challenge erstellen wir ein simples Layout mit Bootstrap. Es ist noch nicht mit Inhalten gefüllt, das machen wir später.
Also wundere dich nicht, wenn das jetzt noch nicht so spektakulär aussieht 😉
Starten wir mit der ersten Aufgabe:
1. HTML5 / Bootstrap Basis
Erstelle eine HTML-Basisstruktur und installiere Bootstrap.
Erstelle dazu einen Container.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
[/lp_spoiler]
2. Menü-Zeile
Erstelle eine neue Zeile und Spalte mit dem Inhalt "Menü".
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row">
<div class="col">
Menü
</div>
</div>
[/lp_spoiler]
3. Kopfzeile für Bild
Erstelle eine neue Zeile und Spalte mit dem Inhalt "Kopfzeile für Bild".
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row">
<div class="col">
Kopfzeile mit Bild
</div>
</div>
[/lp_spoiler]
4. Tabelle
Erstelle 2 neue Zeilen mit jeweils 2 Spalten mit dem Inhalten "Vorteil 1, Vorteil 2, Vorteil 3 und Vorteil 4".
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row">
<div class="col">
Vorteil 1
</div>
<div class="col">
Vorteil 2
</div>
</div>
<div class="row">
<div class="col">
Vorteil 3
</div>
<div class="col">
Vorteil 4
</div>
</div>
[/lp_spoiler]
5. Footerbereich
Erstelle eine neue Zeile mit 3 Spalten mit dem Inhalt "Footerbereich".
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div class="row">
<div class="col">
Footerbereich
</div>
<div class="col">
Footerbereich
</div>
<div class="col">
Footerbereich
</div>
</div>
[/lp_spoiler]
[lp_spoiler title="Komplettlösung anzeigen"]
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Menü
</div>
</div>
<div class="row">
<div class="col">
Kopfzeile mit Bild
</div>
</div>
<div class="row">
<div class="col">
Vorteil 1
</div>
<div class="col">
Vorteil 2
</div>
</div>
<div class="row">
<div class="col">
Vorteil 3
</div>
<div class="col">
Vorteil 4
</div>
</div>
<div class="row">
<div class="col">
Footerbereich
</div>
<div class="col">
Footerbereich
</div>
<div class="col">
Footerbereich
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
[/lp_spoiler]