Bootstrap5: Unterschied zwischen den Versionen

Aus Vokabulabor
Zur Navigation springen Zur Suche springen
VisuellWikitext
Zeile 44: Zeile 44:
</nav>  
</nav>  
<div class="container-fluid p-5 bg-primary text-white text-center">
<div class="container-fluid p-5 bg-primary text-white text-center">
   <h1>My First Bootstrap Page</h1>
   <h1>Meine erste  Bootstrapseite</h1>
   <p>Resize this responsive page to see the effect!</p>  
   <p>Ändere die Fenstergröße, dann siehst du das Verhalten bei verschiedenen Größen!</p>  
</div>
</div>
<div class="container mt-5">
<div class="container mt-5">
Zeile 69: Zeile 69:
</html>
</html>
</pre>
</pre>
* Es gibt 3 Bereiche:
** Die schwarze Zeile mit dem Navigationsmenü. Im Quelltext ist das der Bereich <code><nav> ... </nav></code>
** Der blaue Bereich. Im Quelltext: &lt;div class="container-fluid ...">...&lt;/div>
** Der weiße Bereich mit 3 Spalten. Im Quelltext: &lt;div class="container mt-5">...&lt;/div></code>
== Container ==
* <code>.container-fluid</code> erzeugt einen Bereich, der die volle Breite einnimmt.
* <code>.container</code> 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.
* <code>mt-5</code> bedeutet Top Margin Stufe 5, das ist ein großer Abstand oben
* Es gibt auch responsive Bereiche: <code>.container-XX</code>, wobei XX folgende Werte annehmen kann:
** sm: small. Bei &lt; 576px: volle Breite, >576px: 540px >768px:
** md: medium
** lg: large
** xl: extra large
** xxl: extreme large
{| class="wikitable"
|+
! 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:
<pre>
<div class="row">
  <div class="col-XX-YY">...</div>
  <div class="col-XX-YY">...</div>
  ...
</div>
</pre>
* 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.
<pre>
<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>
</pre>
* 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.

Version vom 26. September 2023, 19:17 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.
Abgerufen von „https://vokabulabor.hamatoma.de/index.php?title=Bootstrap5&oldid=69“