Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu06:einfuehrung [2026/01/27 10:49] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
+++ de:modul:m287:learningunits:lu06:einfuehrung [2026/01/27 10:49] (aktuell) – ↷ Seite von modul:m287:learningunits:lu06:einfuehrung nach de:modul:m287:learningunits:lu06:einfuehrung verschoben msuter
@@ Zeile 1: / Zeile 1: @@
+====== LU06a - Einführung Bootstrap ======
+<WRAP center round info 60%>
+Bootstrap ist ein freies CSS-Framework für die Entwicklung von HTML-Webseiten.
+Es wurde speziell für "reagierendes Webdesign" (engl. responsive design) entwickelt.
+</WRAP>
+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 ===
+  * https://getbootstrap.com/
+  * https://www.w3schools.com/bootstrap5/
+===== Bootstrap einbinden =====
+//Siehe [[https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start|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.
+<code html>
+<!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>
+</code>
+=== 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.
+<code html>
+<!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>
+</code>
+===== Übung =====
+Ergänzen Sie in einem Ihrer Webprojekte den Link zur bootstrap CSS-Datei.
+Vergleichen Sie die Darstellung im Webbrowser mit / ohne Bootstrap.
+<code html>
+...
+  <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>
+</code>
+===== 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.
+----
+{{tag>m293-LU13}}
+[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Kevin Maurizi, Marcel Suter