Zum Hauptinhalt springen
Version: Material

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