Bootstrap5

Aus Vokabulabor
Zur Navigation springen Zur Suche springen

Links

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>
Abgerufen von „https://vokabulabor.hamatoma.de/index.php?title=Bootstrap5&oldid=417“