Bootstrap5: Unterschied zwischen den Versionen

Aus Vokabulabor
Zur Navigation springen Zur Suche springen
VisuellWikitext
Zeile 123: Zeile 123:
* Es werden 3 Spalten erzeugt, wobei die 2.te doppelt so breit wie die anderen ist.
* 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 das Fenster zu schmal wird, dann erscheinen die "Spalten" untereinander.
* Wenn die Spalten gleich breit sein sollen, so reicht Folgendes:
<pre>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
</pre>
== 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
<pre>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
<span class="rounded-pill" style="width:130px;"></span>
</pre>
* .mx-auto: Setzte margin-left und margin-right auf auto.
<pre>
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
</pre>
* 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
<pre>
<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>
</pre>

Version vom 26. September 2023, 19:53 Uhr

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="javascript:void(0)">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="javascript:void(0)">Start</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">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
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
<span class="rounded-pill" style="width:130px;"></span>
  • .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>
Abgerufen von „https://vokabulabor.hamatoma.de/index.php?title=Bootstrap5&oldid=70“