17. Unterrichtsblock

Inhaltsverzeichnis

Bootstrap
Grid System
Formulare
Aufgaben

Bootstrap 5

Bootstrap ist das beliebteste HTML-, CSS- und JavaScript-Framework zum Erstellen reaktionsschneller, Mobile-First-Websites.
Bootstrap 5 ist die neueste Version und kann kostenlos heruntergeladen und verwendet werden: https://getbootstrap.com/docs/5.0/getting-started/introduction/

Bootstrap Referenz

https://bootstrapcreative.com/resources/bootstrap-5-cheat-sheet-classes-index/

Warum sollte man Bootstrap verwenden?

Einfach zu bedienen: Jeder, der nur über grundlegende Kenntnisse in HTML und CSS verfügt, kann mit der Verwendung von Bootstrap beginnen
Responsive Funktionen: Das responsive CSS von Bootstrap passt sich an Telefone, Tablets und Desktops an
Mobile-First-Ansatz: In Bootstrap sind Mobile-First-Stile Teil des Kernframeworks
Browserkompatibilität: Bootstrap 5 ist mit allen modernen Browsern (Chrome, Firefox, Edge, Safari und Opera) kompatibel. Zu beachten ist, dass man entweder BS4 oder BS3 verwenden muss, wenn man Unterstützung für IE11 und niedriger benötigt.

Die Einbindung kann z.B. über ein CDN erfolgen:

<!doctype html>
<html lang="de">
  <head>
    <!-- Erforderliche Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hallo, Welt!</title>
  </head>
  <body>
    <h1>Hallo, Welt!</h1>

    <!-- Optional JavaScript; zwei verschiedene Opitionen -->

    <!-- Option 1: Einbindung von Bootstrap zusammen mit Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Einbindung von Popper und Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Entwicklung von Webseiten mit Bootstrap

Bei der Verwendung von Bootstrap ist es wichtig, mit den vorgegebenen Klassennamen von Bootstrap zu arbeiten. Beispiel mit einer einfachen Anwendung:

<html lang="de">
<head>
  <title>Bootstrap 5 Beispiel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="container-fluid p-5 bg-success text-white text-center">
    <h1>Meine erste Bootstrap-Seite</h1>
    <p>Ändere die Größe dieser Seite, um den responsiven Effekt zu sehen!</p> 
  </div>
  
  <div class="container mt-5">
    <div class="row">
      <div class="col-sm-4">
        <h3>Spalte 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4">
        <h3>Spalte 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4">
        <h3>Spalte 3</h3>        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
  </div>

</body>
</html>

Aufgabe

Kopiere o.g. Code in den Code-Editor und verpasse dem Hintergrund die Farbe für Gefahr (Danger)

Unterschiede von Bootstrap 5 zu Bootstrap 3 & 4

Bootstrap 5 ist die neueste Version von Bootstrap mit neuen Komponenten, schnellerem Stylesheet und mehr Reaktionsfähigkeit. Bootstrap 5 wird von den neuesten, stabilen Versionen aller wichtigen Browser und Plattformen unterstützt – außer: Internet Explorer 11 und niedriger.

Der Hauptunterschied zwischen Bootstrap 5 und Bootstrap 3 & 4 besteht darin, dass Bootstrap 5 auf JavaScript anstelle von jQuery umgestellt hat .

Hinweis: Bootstrap 3 und Bootstrap 4 werden weiterhin für kritische Bugfixes und Dokumentationsänderungen bearbeitet und können daher auch sicher weiterhin verwendet werden. Es werden ihnen jedoch KEINE neuen Funktionen hinzugefügt.

Erstellung einer ersten Seite

1. Einbau des HTML5-Dokumenttyps

Bootstrap 5 verwendet HTML-Elemente und CSS-Eigenschaften, die den HTML5-Doctype erfordern.
Man fügt immer den HTML5-Doctype am Anfang der Seite ein, zusammen mit dem lang-Attribut und dem korrekten Titel und Zeichensatz

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Bootstrap 5 Beispiel</title>
 <meta charset="utf-8">
 </head>
</html>

2. Bootstrap 5 verwendet den Mobile-First-Ansatz

Bootstrap 5 ist so konzipiert, dass es auf mobile Geräte reagiert. Mobile-First-Stile sind Teil des Kernframeworks.
Um ein korrektes Rendern und Zoomen per Touch sicherzustellen, fügt man das folgende <meta>Tag innerhalb des <head>Elements hinzu:

<meta name="viewport" content="width=device-width, initial-scale=1">

Der width=device-width Wert legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät unterschiedlich ist).
Der initial-scale=1 Wert legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

3. Container

Bootstrap 5 erfordert ein Container-Element, um Website-Inhalte zu umschließen.
Es stehen zwei Containerklassen zur Auswahl:

Die .container-Klasse stellt einen ansprechenden Container mit fester Breite bereit
Die .container-fluid-Klasse stellt einen Container voller Breite bereit , der sich über die gesamte Breite des Darstellungsbereichs erstreckt

Aufgabe

Baue eine Seite mit Bootstrap und 3 Containern, die etwas Lorem-Ipsum-Text enthalten.
Recherchiere, wie Suchmaschinen (z.B. Google) mit der „Mobile-First-Regel“ umgehen.

Bootstrap Rastersystem

Das Grid-System von Bootstrap ist mit Flexbox aufgebaut und erlaubt bis zu 12 Spalten auf der Seite.

Verkleinere den Bildschirm, um den responsiven Effekt zu sehen. Die erste, zweite und dritte Reihe werden automatisch übereinander gestapelt, wenn die Bildschirmgröße 576px unterschreitet.

50%

33.33%

25%

Raster-Klassen

Das Bootstrap-5-Rastersystem hat sechs Klassen:

.col-(extra kleine Geräte – Bildschirmbreite kleiner als 576px)
.col-sm-(kleine Geräte – Bildschirmbreite gleich oder größer als 576 Pixel)
.col-md-(mittlere Geräte – Bildschirmbreite gleich oder größer als 768 Pixel)
.col-lg-(große Geräte – Bildschirmbreite gleich oder größer als 992 Pixel)
.col-xl-(xlarge-Geräte – Bildschirmbreite gleich oder größer als 1200 Pixel)
.col-xxl-(xxlarge-Geräte – Bildschirmbreite gleich oder größer als 1400 Pixel)

Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.

Info: Jede Klasse wird hochskaliert, wenn man also die gleichen Breiten für sm und md festlegen möchte, muss man nur sm angeben.

Grundstruktur eines Bootstrap 5 Grids

<!-- Grundlegende Struktur eines Bootstrap 5-Rasters. -->
<!-- Hier wird die Spalten-Weite und wie diese sich auf verschiedenen Geräten verhalten soll, manuell bestimmt. -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

<!-- Hier lässt man Bootstrap automatisch die Weite bestimmen -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Erstes Beispiel: Erstellung einer Zeile ( <div class="row">). Anschließend wird die gewünschte Anzahl von Spalten (Tags mit entsprechenden .col-*-*Klassen) hinzugefügt. Der erste Stern (*) steht für die Responsivität: sm, md, lg, xl oder xxl, während der zweite Stern eine Zahl darstellt, die für die Aufteilung der Spalten (insgesamt 12 Spalten) steht.

Zweites Beispiel: Anstatt jeder col eine Zahl hinzuzufügen, überlässt man Bootstrap das Layout, um Spalten mit gleicher Breite zu erstellen: zwei "col" erhalten pro Element = 50 % Breite für jede Spalte, während drei Spalten = 33,33 % Breite für jede Spalte erhalten. Vier Spalten erhalten 25 % Breite usw. Man kann auch .col-sm|md|lg|xl|xxlum verwenden, um die Spalten responsiv zu machen.

	Extra klein (<576px)	Klein (>=576px)	Medium (>=768px)	Groß (>=992px)	Extra Groß (>=1200px)	XXL (>=1400px)
Klassen Prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Raster Verhalten	Immer gestapelt	Zu Beginn nebeneinander, gestapelt bei bestimmter Breite	Zu Beginn nebeneinander, gestapelt bei bestimmter Breite	Zu Beginn nebeneinander, gestapelt bei bestimmter Breite	Zu Beginn nebeneinander, gestapelt bei bestimmter Breite	Zu Beginn nebeneinander, gestapelt bei bestimmter Breite
Kontainer Weite	Keine (auto)	540px	720px	960px	1140px	1320px
Geeignet für	Mobilgeräte hochkant	Mobilgeräte horizontal	Tablets	Laptops	Laptops und Desktopgeräte	Laptops and Desktopgeräte
# von Spalten	12	12	12	12	12	12
Randbreite	1.5rem (.75rem auf jeder Seite einer Spalte)	1.5rem (.75rem auf jeder Seite einer Spalte)	1.5rem (.75rem auf jeder Seite einer Spalte)	1.5rem (.75rem auf jeder Seite einer Spalte)	1.5rem (.75rem auf jeder Seite einer Spalte)	1.5rem (.75rem auf jeder Seite einer Spalte)
Verschachtelbar	Ja	Ja	Ja	Ja	Ja	Ja
Versatz	Ja	Ja	Ja	Ja	Ja	Ja
Spaltenanordnung	Ja	Ja	Ja	Ja	Ja	Ja

Aufgabe

Baue die Seite aus dem Unterrichtsblock 13 mit Bootstrap-Klassen nach: https://webentwicklerkurs.de/1-jahr/css/13-unterrichtsblock/

Bootstrap Formulare

Alle textuellen <input>– und <textarea>-Elemente mit der Klasse .form-control erhalten den passenden Stil.

Email:

Passwort:

Angemeldet bleieben

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="E-Mail eingeben" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Passwort eingeben" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="remember"> Angemeldet bleiben
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Absenden</button>
</form>

Beachte, dass die .form-label Klasse jedem Label-Element hinzufügt wurde, um ein korrektes Padding sicherzustellen.

Kontrollkästchen haben unterschiedliche Auszeichnungen. Sie werden um ein Containerelement mit .form-check gespannt. Beschriftungen haben die Klasse .form-check-label, während Kontrollkästchen und Optionsfelder .form-check-input verwenden.

Textbereich

Kommentare:

<label for="comment">Kommentare:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Formularzeile/Raster (Inline-Formulare)

Wenn man möchte, dass Formularelemente nebeneinander angezeigt werden, verwendet man .row und .col:

<form>
 <div class="row">
  <div class="col">
   <input type="text" class="form-control" placeholder="Nutzername" name="email">
  </div>
  <div class="col">
   <input type="password" class="form-control" placeholder="Passwort" name="pswd">
  </div>
 </div>
</form>

Größe des Formularsteuerelements

Man kann die Größe der .form-control Eingabefelder mit .form-control-lg oder .form-control-sm ändern.

<input type="text" class="form-control form-control-lg" placeholder="Large input">
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">

Deaktiviert und schreibgeschützt

Man verwendet die Attribute disabled und/oder readonly, um das Eingabefeld zu deaktivieren:

<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>

Texteingaben

Man verwendet die .form-control-plaintext Klasse, um ein Eingabefeld ohne Rahmen zu formatieren, behält jedoch die richtigen Ränder und Padding bei:

<input type="text" class="form-control-plaintext" placeholder="Texteingabefeld">
<input type="text" class="form-control" placeholder="Normales Eingabefeld">

Farbwähler

Man verwendet die .form-control-color Klasse, um eine Eingabe mit type="color" richtig zu formatieren:

<input type="color" class="form-control form-control-color" value="#8dc505">

Aufgaben

Baue die Startseite von stepstone.de mit Bootstrap 5 nach.
Baue folgende Seite mit Bootstrap 5 nach: https://getbootstrap.com/docs/5.0/examples/album/