Zum Hauptinhalt springen
Version: 28Gj

CV mit Bootstrap

Mit CSS können wir Webseiten gestalten, indem wir für jeden HTML-Tag eigene Regeln schreiben. CSS Frameworks wie Bootstrap oder Tailwind CSS enthalten bereits fertige Gestaltungsregeln, die wir einfach verwenden können. Diese fertigen Regeln werden über sogenannte Klassen den HTML-Elementen zugewiesen - ähnlich wie Aufkleber, die man auf Objekte klebt.

Im folgenden Beispiel ist der HTML-Inhalt und die Struktur identisch:

Ohne Bootstrap Klassen​

Mit Bootstrap Klassen​

Bemerke: keine Zeile CSS nötig

Es wurden ausschliesslich das Attribut class= hinzugefügt und die entsprechenden Bootstrap-Klassen verwendet. Es wurde keine Zeile CSS geschrieben.

Ein Lebenslauf mit Bootstrap​

Es soll eine kleine Webseite mit dem eigenen Lebenslauf erstellt werden. Vorerst wird folgende Webseite aufgebaut, die Inhalte und Farben können später angepasst werden.

Neue Seite hinzufügen​

Ordner
OneDrive - EDUBERN/Informatik/Webseite/
Dateiname
cv.html (für "Curriculum Vitae")
cv.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>

</body>
</html>

Markiert ist die Einbindung für Bootstrap 5 und die Bootstrap Icons.

Bootstrap einbinden

Kopieren Sie den gesamten Inhalt und fügen Sie ihn in die Datei cv.html ein.

Eine Webseite kann aus mehreren Seiten bestehen. Um zwischen den Seiten zu navigieren, wird eine Navigationsleiste benötigt.

Ziel
  • Eine Navigationsleiste hinzufügen
  • Das CV soll unsere Startseite sein
  • Die Rezepte-Seite soll ebenfalls verlinkt werden
  • Möglichkeit für weitere Seiten vorsehen

Die Navigationsleiste wird zuoberst im <body> hinzugefügt. Das Tag heisst <nav> und wird mit den Bootstrap-Klassen navbar (für die Darestellung) und bg-body-secondary (für die Farbe) versehen. In der Navigationsleiste werden die Links mit <a>-Tags erstellt.

cv.html
<!doctype html>
<html lang="en">
    <head></head>
    <body>
        <nav class="navbar bg-body-secondary">
            <a class="nav-link" href="#">CV</a>
        </nav>
        <!--  -->
    </body>
</html>
Bemerke
  • Der Link <a> wird hübscher dargestellt dank der Klasse nav-link.
  • Der Link führt mit href="#" auf die aktuelle Seite (es wird nichts passieren).
Navigationsleiste

Fügen Sie die Navigationsleiste hinzu und überprüfen Sie die Änderungen in der Live-Vorschau.

Im nächsten Schritt wird die Navigationsleiste erweitert.

Hochladen auf Netlify​

Wer mag, kann die Webseite auf Netlify hochladen (wie im letzten Kapitel erklärt...).

Persönliche Daten

Eine mit Netlify veröffentlichte Seite ist - nun ja, öffentlich. Handynummern, Mailadressen und Fotos können somit potentiell von allen gesehen werden. Überlegen Sie sich gut, welche Informationen Sie auf Ihrer Webseite veröffentlichen.

⚠️ Sollten Sie Fotos von anderen Personen verwenden, fragen Sie unbedingt um Erlaubnis.

CC 4.0