====== 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 ===
* 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 ''...'' 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.
Bootstrap demo
Hello, world!
=== 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.
Bootstrap demo
Hello, world!
===== Übung =====
Ergänzen Sie in einem Ihrer Webprojekte den Link zur bootstrap CSS-Datei.
Vergleichen Sie die Darstellung im Webbrowser mit / ohne Bootstrap.
...
...
===== Erweitertes Wissen =====
==== Attribute in ====
Vielleicht haben Sie bemerkt, dass im ''''-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