| Nächste Überarbeitung | Vorhergehende Überarbeitung |
| de:modul:m287:learningunits:lu06:loesungen:02 [2026/06/24 09:16] – angelegt vdemir | de:modul:m287:learningunits:lu06:loesungen:02 [2026/06/24 09:49] (aktuell) – vdemir |
|---|
| ====== LU06.L01 - Bootstrap: Container & Spalten ====== | ====== LU06.L02 - Bootstrap - Codebeispiele ====== |
| | |
| | ^ # ^ Abstact ^ Download ^ |
| | ^1. | Container und Spalten | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_b1_container_spalten.html.zip | bootstrap_b1_container_spalten.html }} | |
| | ^2. | Container fluid | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_b2_fluid.html.zip|bootstrap_b2_fluid.html}} | |
| | ^3. | Container Grenzen/Übergänge | {{ :de:modul:m287:learningunits:lu06:loesungen:bootstrap_b3_container_demo.html.zip | bootstrap_b3_container_demo.html}} | |
| | ^4. | Container und padding | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_b4_p5.html.zip | bootstrap_b4_p5.html}} | |
| | ^5. | Container und Spalten | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_b5_containersized.html.zip | bootstrap_b5_containerSized.html}} | |
| | ^6. | Formulare | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_c1_formulare.html.zip | bootstrap_c1_formulare.html}} | |
| | ^7. | Tabellen | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_c2_tabellen.html.zip | bootstrap_c2_tabellen.html}} | |
| | ^8. | Bilder | {{ :de:modul:m287:learningunits:lu06:loesungen:bootstrap_c3_bilder.html.zip | bootstrap_c3_bilder.html}} | |
| | ^9. | Navigation | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_c4_navigation.html.zip | bootstrap_c4_navigation.html}} | |
| | ^10.| Farben und Schriften | {{ :de:modul:m287:learningunits:lu06:loesungen:bootstrap_d1_farben_schriften.html.zip |bootstrap_d1_farben_schriften.html}} | |
| | ^11.| Variable | {{:de:modul:m287:learningunits:lu06:loesungen:bootstrap_e1_variablen.html.zip | bootstrap_e1_variablen.html}} | |
| | ^ | Alle Files | {{:de:modul:m287:learningunits:lu06:loesungen:a01.zip | Alle_Demofiles}} | |
| |
| <code html> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bootstrap 5 Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Bootstrap CSS einbinden (CDN) --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Bootstrap JS (Bundle inkl. Popper.js) für interaktive Komponenten wie Dropdowns, Modals, Tooltips --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Bootstrap verwendet vom CDN, also extern bezogen --> | |
| <!-- Beispiel unter https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css --> | |
| <!-- Eigenes CSS nach dem Bootstrap-Link, um Borders sichtbar zu machen --> | |
| <style> | |
| .container, .container-fluid, .row, [class^="col-"] { | |
| outline: 2px dashed red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- container-fluid: nimmt immer 100% der Viewport-Breite ein (kein Breakpoint-Verhalten wie bei .container) | |
| p-5: padding auf allen Seiten, Stufe 5 (= 3rem, grösster Standardwert) | |
| bg-primary: Bootstrap-Theme-Farbe Blau als Hintergrund | |
| text-white: weisse Schriftfarbe (für Kontrast auf bg-primary) | |
| text-center: zentrierter Text --> | |
| <div class="container-fluid p-5 bg-primary text-white text-center"> | |
| <h1>My First Bootstrap Page</h1> | |
| <p>Resize this responsive page to see the effect!</p> | |
| </div> | |
| <!-- container: feste, responsive Breite mit Breakpoints (z.B. 540px, 720px, 960px, 1140px, 1320px) | |
| mt-5: margin-top, Stufe 5 (= 3rem) → grosser Abstand zum vorherigen Element --> | |
| <div class="container mt-5"> | |
| <!-- row: erzeugt eine Grid-Zeile, Container für die Spalten (col-*) --> | |
| <div class="row"> | |
| <!-- col-sm-4: Spalte im 12-Spalten-Grid, ab Breakpoint "sm" (≥576px) genau 4/12 = 1/3 Breite | |
| Unterhalb von 576px stapeln sich die Spalten automatisch zu 100% Breite --> | |
| <div class="col-sm-4"> | |
| <h3>Column 1</h3> | |
| <p>Dies ist die erste von drei Spalten im <code>.row</code>-Element. Jede Spalte trägt die Klasse <code>col-sm-4</code>, belegt also 4 von 12 Grid-Einheiten = 1/3 der Containerbreite.</p> | |
| <p>Ab einer Viewport-Breite von 576px (Breakpoint "sm") stehen alle drei Spalten nebeneinander. Darunter (z.B. auf dem Smartphone) stapeln sie sich automatisch übereinander, da kein kleinerer Breakpoint wie <code>col-4</code> definiert wurde.</p> | |
| </div> | |
| <!-- col-sm-4: zweite Spalte, gleiches Verhalten wie oben --> | |
| <div class="col-sm-4"> | |
| <h3>Column 2</h3> | |
| <p>Die zweite Spalte verhält sich identisch zur ersten. Bootstrap berechnet die Breite automatisch aus dem Gutter (Innenabstand zwischen den Spalten, gesteuert über CSS-Variablen) und der verfügbaren Containerbreite.</p> | |
| <p>Da alle drei Spalten zusammen 12 Einheiten ergeben (4 + 4 + 4 = 12), füllen sie die gesamte Zeile exakt aus – ohne Überlauf in eine neue Zeile.</p> | |
| </div> | |
| <!-- col-sm-4: dritte Spalte, gleiches Verhalten wie oben --> | |
| <div class="col-sm-4"> | |
| <h3>Column 3</h3> | |
| <p>Die dritte Spalte schliesst die Zeile ab. Würde man eine vierte Spalte mit <code>col-sm-4</code> hinzufügen, ergäbe das 16 Einheiten – sie würde dann automatisch in eine neue Zeile umbrechen (Grid-Wrapping).</p> | |
| <p>Der rote, gestrichelte <code>outline</code>-Rahmen (siehe <code><style></code> oben) macht sichtbar, wo genau Container, Row und jede einzelne Spalte beginnen und enden.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <code> | |