LU13a - Einführung Bootstrap

Bootstrap ist ein freies CSS-Framework für die Entwicklung von HTML-Webseiten. Es wurde speziell für “reagierendes Webdesign” (engl. responsive design) entwickelt.

Bootstrap enthält eine grosse Anzahl von CSS-Klassen für die Formattierung unserer Webseiten. Dabei wird grosser Wert darauf gelegt, dass die Elemente auf (fast) jeder Bildschirmgrösse sinnvoll dargestellt werden.

Dokumentation und Tutorials

Bootstrap einbinden

Siehe bootstrap - quick-start

Wie jede CSS-Datei binden wir Bootstrap im <head>…</head> unserer HTML-Datei ein.

Variante 1: Herunterladen

Wir können die gewünschte Version von Bootstrap herunterladen und in unser Webprojekt einfügen. Dies hat den Vorteil, dass wir …

… immer die gleiche Version von Bootstrap einbinden,
… auf Wunsch eigene Anpassungen an der CSS-Datei vornehmen können.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Variante 2: content delivery network (CDN)

Bei dieser Variante laden wir die CSS-Datei von einer Gruppe von Servern. Die Vorteile sind …

… wir erhalten automatisch die neuesten Fehlerkorrekturen,
… der Webbrowser muss die Datei nur einmal herunterladen und für alle weiteren Webseiten die gespeicherte Version verwenden.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Übung

Ergänzen Sie in einem Ihrer Webprojekte den Link zur bootstrap CSS-Datei. Vergleichen Sie die Darstellung im Webbrowser mit / ohne Bootstrap.

...
  <head>
    ...
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>

Erweitertes Wissen

Attribute in <link>

Vielleicht haben Sie bemerkt, dass im <link>-Element zwei bisher unbekannte Attribute gesetzt werden.

integrity: Dieses Attribut enthält einen Prüfsumme für den Inhalt der Datei. Dadurch verhindert der Browser, dass eine manipulierte Datei heruntergeladen würde.
crossorigin: Um Angriffe zu verhindern, blockiert unser Browser Zugriffe auf unterschiedliche Domains. Mit diesem Attribut erlauben wir den Zugriff auf das CDN.

bootstrap.min.css

Es existieren verschiedene Varianten der Bootstrap-Dateien. Um die Datenmenge zu reduzieren, binden wir eine komprimierte Datei ein. Bei dieser Variante wurden z.B. unnötige Leerzeichen und Zeilenumbrüche entfernt.

Javascript

Neben der CSS-Datei bietet Bootstrap auch einige Javascript-Dateien für erweiterte Funktionen an. Wir werden uns vorerst aber mit der CSS-Datei begnügen.

m293-LU13

Kevin Maurizi, Marcel Suter