Aktuelle Version vom 9. Februar 2024, 18:19 Uhr

Links

https://www.w3schools.com/bootstrap5/bootstrap_get_started.php

Zielsetzung

Bootstrap ist eine Sammlung von CSS-Definitionen, die die Gestaltung von Webseiten stark vereinfacht.

Die aktuelle Version ist 5.

Schnellkurs

eine Beispieldatei bootstrap.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">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href=" #">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href=" #">Start</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=" #">Impressum</a>
        </li>
      </ul>
      <form class="d-flex">
        
        <button class="btn btn-secondary" type="button">Settings</button>
        <button class="btn btn-primary" type="button">Logout</button>
      </form>
    </div>
  </div>
</nav> 
<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Meine erste  Bootstrapseite</h1>
  <p>Ändere die Fenstergröße, dann siehst du das Verhalten bei verschiedenen Größen!</p> 
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 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>Column 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>Column 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>

Es gibt 3 Bereiche:
- Die schwarze Zeile mit dem Navigationsmenü. Im Quelltext ist das der Bereich <nav> ... </nav>
- Der blaue Bereich. Im Quelltext: <div class="container-fluid ...">...</div>
- Der weiße Bereich mit 3 Spalten. Im Quelltext: <div class="container mt-5">...</div>

Container

.container-fluid erzeugt einen Bereich, der die volle Breite einnimmt.
.container erzeugt einen Bereich, der mit Padding ausgestattet ist, je nach Anzeigegerät. Solche Bereiche werden meist mit weiteren Klassen (im Beispiel mt-5) genauer spezifiziert.
mt-5 bedeutet Top Margin Stufe 5, das ist ein großer Abstand oben
Es gibt auch responsive Bereiche: .container-XX, wobei XX folgende Werte annehmen kann:
- sm: small. Bei < 576px: volle Breite, >576px: 540px >768px:
- md: medium
- lg: large
- xl: extra large
- xxl: extreme large


Klasse	Extra Small	Small	Medium	Large	Extra Large	XXL
	<576px	>= 576py	>=768py	>=992px	>=1200px	>1320px
.container-sm	100%	570px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px

Spalten

Der 3.te Bereich enthält 3 Spalten.
Wenn ein Bereich Spalten enthält, so wird immer folgende Struktur benutzt:

<div class="row">
  <div class="col-XX-YY">...</div> 
  <div class="col-XX-YY">...</div> 
  ...
</div>

Im Beispiel ist col-XX-YY die Klasse col-sm-4: sm steht für Small Medium, 4 für die Breite: Zwischen 1 und 12.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">Login</div> 
    <div class="col-md-6"><input type="text"></div> 
    <div class="col-md-3"><button>login</login></div> 
  </div>
</div>

Es werden 3 Spalten erzeugt, wobei die 2.te doppelt so breit wie die anderen ist.
Wenn das Fenster zu schmal wird, dann erscheinen die "Spalten" untereinander.
Wenn die Spalten gleich breit sein sollen, so reicht Folgendes:

 <div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Text-Attribute

Farben:
- text-muted: Text wird schwächer dargestellt
- text-primary: Hauptfarbe
- text-secondary: Weitere Farbe, abgestimmt auf die Hauptfarbe
- text-success: Bei Erfolg
- text-info: Information
- text-warning
- text-danger
- text-white
- text-dark
- text-light
Hintergrundfarben:
- bg-primary: Haupt-Hintergrund
- bg-secondary: 2.ter Hintergrund
- und so weiter, siehe oben

Weitere Formatierungshilfen

Rahmen:
- border: mit Rahmen
- border-0: kein Rahmen
- border-top: nur oben ein Strich, analog: border-bottom border-start border-end
- border-top-0 Oben kein Rahmen, analog: border-end-0 border-start-0 border-end-0
- border-1 dünner Strich. Analog border-2 ... border-5
- border-primary: Farbe des Rahmens ist die Hauptfarbe, analog border-secondary ...
- rounded: die Ecken sind gerundet. Analog: rounded-top, rounded-bottom, rounded-start, rounded-end
- rounded-circle: es entsteht ein Kreis.
- rounded-pill: ein Halbkreis, Rechteck, Halbkreis:
- rounded-0: keine Rundung
- rounded-1: kleiner Radius. Analog: rounded-2 ... rounded-5

Beispiel: Füge folgendes vor dem letztem <div> ein:

     <div class="row">
        <div class="col-sm-12 text-info">
          This is a <span class="text-primary bg-secondary border rounded-1 bg-info">text</span> with abg-secondary border around the word text.
        </div>
        <div class="row">
          <div class="col-sm-2">
            <span class="bg-secondary border rounded">rounded</span>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-top">rounded-top</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-end">rounded-end</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-bottom">rounded-bottom</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-start">rounded-start</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-circle">rounded-circle</div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-pill" style="width:130px">rounded-pill</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-0">rounded-0</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-1">rounded-1</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-2">rounded-2</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-3">rounded-3</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-4">rounded-4</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-5">rounded-5</div>
          </div>
          <div class="col-sm-2">
            <div class="bg-secondary border rounded-pill" style="width:130px;">rounded-pill</div>
          </div>
        </div>
      </div>

.mx-auto: Setzte margin-left und margin-right auf auto.

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

w-25: Breite ist 25% des Elternelements. Analog: w-50 w-75 w-100 w-auto
h-25: Höhe ist 25% des Elternelements. Analog: h-50 h-75 h-100 h-auto

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="h-auto bg-warning">Auto Height</div>
  <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>

Tabellen

table: Allgemeine Tabelle
table-striped: jede 2.te Zeile ist anderst gefärbt
table-bordered: mit Rahmen
table-hover: Zellenfarbe ändern sich, wenn die Maus drauf kommt
table-dark: Dunkelmodus
table-borderless: kein Rahmen
table-primary: Überschrift mit Hauptfarbe. Analog table-secondary, table-success, table-info...
table-sm: schmale Tabelle
table-responsive: passt an Anzeigegerät an

Beispiel: füge das Folgende vor dem letzten <div> ein:

     <div class="row">
        <div class="col-sm-12">
          <table class="table border table-striped">
            <thead>
              <tr>
                <th>No</th>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td><td>Adam</td>
              </tr>
              <tr>
                <td>2</td><td>Berta</td>
              </tr>
              <tr>
                <td>3</td><td>Charly</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

Bootstrap5: Unterschied zwischen den Versionen