Bootstrap 5: Grid Basic


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Bootstrap 5 Grid-System

Das Rastersystem von Bootstrap basiert auf Flexbox und ermöglicht bis zu 12 Spalten auf der Seite.

Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie die Spalten gruppieren, um breitere Spalten zu erstellen:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Das Rastersystem reagiert und die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet.

Stellen Sie sicher, dass die Summe 12 oder weniger beträgt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).

Grid-Klassen

Das Bootstrap 5-Rastersystem verfügt über sechs Klassen:

  • .col- (extra kleine Geräte - Bildschirmbreite weniger als 576 Pixel)

  • .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.

Tipp: Jede Klasse vergrößert sich, wenn Sie also die gleichen Breiten festlegen möchten sm und md, Sie müssen nur sm angeben. .

Grundstruktur eines Bootstrap 5 Grids

Das Folgende ist eine Grundstruktur eines Bootstrap 5-Rasters:

  <!-- Control the column width, and how they should appear on different devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Erstes Beispiel: Erstellen Sie eine Zeile:

<div class="row">

Fügen Sie dann die gewünschte Anzahl von Spalten hinzu (Tags mit entsprechenden .col-*-*-Klassen). Der erste Stern (*) stellt die Reaktionsfähigkeit dar: sm, md, lg, xl oder xxl, während der zweite Stern eine Zahl darstellt, die sich für jede Zeile auf 12 summieren sollte.

Zweites Beispiel: Anstatt jeder Spalte eine Zahl hinzuzufügen, überlassen Sie Bootstrap das Layout, um gleich breite Spalten zu erstellen: zwei " col" Elemente=50 % Breite für jede Spalte, während drei Spalten=33,33 % Breite für jede Spalte. Vier Spalten=25 % Breite usw. Sie können auch .col-sm|md|lg|xl|xxl verwenden, um die Spalten responsiv zu machen.

Nachfolgend haben wir einige Beispiele für grundlegende Bootstrap 5-Rasterlayouts zusammengestellt.

Drei gleiche Spalten

.col
.col
.col

Das folgende Beispiel zeigt, wie insgesamt drei Spalten gleicher Breite erstellt werden Geräte und Bildschirmbreiten:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

</body>
</html>

Responsive Spalten

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

Das folgende Beispiel zeigt, wie man vier Spalten gleicher Breite erstellt, beginnend bei Tabletten und skaliert auf extra große Desktops. Auf Mobiltelefonen oder Bildschirmen mit einer Breite von weniger als 576 Pixel werden die Spalten automatisch gestapelt übereinander:

Beispiel

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  
  <div class="col-sm-3">.col-sm-3</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

Zwei ungleiche Antwortspalten

.col-sm-4
.col-sm-8

Das folgende Beispiel zeigt, wie man zwei Spalten unterschiedlicher Breite erhält, beginnend bei Tablets und Skalierung auf große zusätzliche Desktops:

Beispiel

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Two Unequal Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

Tipp: Mehr über das Rastersystem erfahren Sie später in diesem Tutorial.