Zum Hauptinhalt springen
Version: 28Wa

Bootstrap

Highlights
  • Umfassende, vorgefertigte Komponenten & Layouts sofort nutzbar
  • Sehr hohe Verbreitung
  • Automatische Responsiveness-Features
  • Erfordert wenig eigenes CSS
Nachteile
  • Oft "Bootstrap-Look", schwierig komplett individuell zu stylen
  • Anpassung/Abweichung vom Standarddesign häufig aufwändig
  • Grösserer CSS-Overhead

👉 Bootstrap ist ein CSS-Framework, das auf vorkonfigurierten Komponenten und Layout-Klassen basiert. Anstatt jedes Element von Grund auf selbst zu stylen, nutzt man eine Vielzahl vordefinierter Klassen, um schnell ansprechende und responsive Benutzeroberflächen zu erstellen. Damit dies funktioniert, müssen im <head>-Bereich der HTML-Datei die Bootstrap CSS-Skripts eingebunden werden.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
  </head>
  <body>
      ...
  </body>
</html>

Zusätzlich wird auf Z. 3 das meta viewport Tag eingefügt, damit Webseiten auch auf mobilen Geräten korrekt skaliert werden.

Online-Installationsanleitung Bootstrap

Anschliessend können die vordefinierten Bootstrap-Klassen und Komponenten verwendet werden, um das Layout und Design der HTML-Elemente zu gestalten.

Reine HTML-Struktur
<html>
<head>
</head>
<body>
<div>
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
    <div>
        <h1>Maria Grünfelder</h1>
        <address>
            <div>maria.gruenfelder@email.com</div>
            <div>Biel, Schweiz</div>
            <div>+41 32 123 4567</div>
        </address>
    </div>
</div>
</body>
</html>
Mit Bootstrap CSS
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body class="bg-light p-1 pt-4 pb-4">
<div class="card shadow-sm">
    <div class="row g-0 align-items-center ps-1 shadow">
      <div class="col-auto">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" class="img-fluid rounded" alt="Maria Grünfelder">
      </div>
      <div class="col">
        <div class="card-body">
          <h5 class="card-title mb-2">Maria Grünfelder</h5>
          <address class="mb-0 text-secondary">
            <div>
                <i class="bi bi-envelope pe-1"></i>
                maria.gruenfelder@email.com
            </div>
            <div>
                <i class="bi bi-geo pe-1"></i>
                Biel, Schweiz
            </div>
            <div>
                <i class="bi bi-telephone pe-1"></i>
                +41 32 123 4567
            </div>
          </address>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
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.

  1. 1. Grundgerüst mit Bootstrap einrichten

    Grundgerüst

    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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    </head>
    <body>

    </body>
    </html>
    Aufgabe

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

CC 4.0