Web Entwicklung

Bootstrap-Spickzettel

Bootstrap 4 – Raster und Spalten

In Bootstrap wird der Bildschirm in 12 Spalten unterteilt, unabhängig von der Bildschirmgröße. Selbst auf dem kleinen Bildschirm eines alten Handys wird Bootstrap ihn in 12 Spalten unterteilen und verwalten. Lassen Sie uns ansehen, wie das Raster-System von Bootstrap auf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen funktioniert. Es werden insgesamt 5 Größenstufen unterstützt.
Extra small Extra small <576px Small Small ≥576px Medium Medium ≥768px Large Large ≥992px Extra large Extra large ≥1200px
Maximale Containerbreite Keine (auto) 540px 720px 960px 1140px
Klassenpräfix .col- .col-sm- .col-md- .col-lg- .col-xl-
Anzahl der Spalten 12
Abstandbreite 30px (auto 15px auf jeder Seite der Spalten)
Sowohl die Website als auch das Layout können sich an jede Bildschirmbreite anpassen. Mit Bootstrap können ganze Websites erstellt oder separate Container-Blöcke (container) in den Seiten-Code eingefügt werden.

Automatische Spaltenanordnung – Gleiche Spaltenbreite

Um gleiche Spaltenbreiten in einem Container festzulegen, verwenden wir die Basis-Klasse col-sm
1 Zelle von 2
2 Zelle von 2
1 Zelle von 3
2 Zelle von 3
3 Zelle von 3
				
					<div class="container">
  <div class="row">
    <div class="col-sm">
      1 Zelle von 2
    </div>
    <div class="col-sm">
      2 Zelle von 2
    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      1 Zelle von 3
    </div>
    <div class="col-sm">
      2 Zelle von 3
    </div>
    <div class="col-sm">
      3 Zelle von 3
    </div>
  </div>
</div>

Wenn wir keine genauen Größenangaben für den Ansichtsbereich machen, wird dieser gleichmäßig auf alle Zellen aufgeteilt. Jede Ebene beginnt mit der minimalen Ansichtsbereichgröße (col-sm) und wird automatisch auf größere Geräte angewendet, sofern sie nicht überschrieben wird.

Verschiedene Spaltenbreiten in einer Reihe

In einer Reihe gibt es 12 Spalten. Wir können selbst festlegen, wie viele Spalten eine Zelle einnimmt.

Automatische Anordnung

.col-md-3
.col-md-6
.col-md-3

Drei Spalten unterschiedlicher Breite werden auf Geräten mit einer Bildschirmgröße von 720px oder mehr angezeigt.

Spalte mit adaptiver Breite

1 von 3
Spalte mit adaptiver Breite
3 von 3
				
					<div class="container">
  <div class="row">
    <div class="col">
      1 von 3
    </div>
    <div class="col-md-auto">
      Spalte mit adaptiver Breite
    </div>
    <div class="col col-lg-2">
      3 von 3
    </div>
  </div>
</div>

Anzeige auf verschiedenen Geräten: Mobil und Desktop

Das Bootstrap v4 Grid-System hat fünf Ebenen von Klassen: xs (sehr klein, dieser Klassensuffix wird nicht verwendet), sm (klein), md (mittel), lg (groß) und xl (sehr groß). Sie können praktisch jede Kombination dieser Klassen verwenden, um dynamischere und flexiblere Layouts zu erstellen. Jede Klassenschicht ist skalierbar, was bedeutet, dass Sie, wenn Sie die gleiche Breite für md, lg und xl festlegen möchten, nur md angeben müssen.
.col-6 .col-md-8
.col-6 .col-md-4
In dieser Layout-Variante gibt es auf Bildschirmen mit weniger als 720px 2 Spalten gleicher Größe (col-6), und auf Geräten mit mehr als 720px Bildschirmgröße haben die Spalten unterschiedliche Größen (col-md-8 und col-md-4).
.col-12 .col-md-8
.col-12 .col-md-4
Auf Bildschirmen mit weniger als 720px wird eine Spalte (col-12) angezeigt, und auf Geräten mit einem Bildschirm größer als 720px gibt es 2 Spalten unterschiedlicher Größe (col-md-8 und col-md-4).
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
In diesem Layout nehmen die Spalten auf Mobiltelefonen (bis 720px) 50% der Bildschirmbreite (col-6) ein, und auf Monitoren über 720px gibt es 3 gleiche Spalten zu je 33,3% (col-md-4). In einer Reihe gibt es 12 Spalten. Wenn im Code mehr als 12 Spalten verwendet werden, wird jede zusätzliche in eine neue Zeile verschoben.

Anzeige auf Mobilgeräten, Tablets und Computermonitoren

Wenn wir die Anzeige auf jedem Gerät steuern möchten, eine unterschiedliche Ansicht auf mobilen Geräten, Tablets und großen Computermonitoren haben möchten, müssen wir für jedes Gerät die eigene Spaltengröße angeben.
.col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
In diesem Layout nehmen die Spalten auf Mobilgeräten und Tablets mit einer Bildschirmgröße bis 960px 50% der Bildschirmbreite (col-sm-6) ein, und auf Monitoren über 960px gibt es 2 Spalten unterschiedlicher Größe (col-lg-8 und col-lg-4).

Beispiel „umgekehrt“:

<div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">Text</div>
Die Zelle auf mobilen Geräten bis 576px (col-) und 768px (col-sm-) wird 12 Spalten einnehmen, also die gesamte Zeile – col-12. Auf Geräten über 768px und bis 992px nimmt die Zelle 4 Spalten ein (col-md-4), und auf Geräten über 992px (col-lg-) und mehr als 1200px (col-xl-) nimmt die Zelle 8 Spalten ein. Dieser Code kann ohne Verlust der Funktionalität auf folgenden reduziert werden: 
<div class="col-12 col-md-4 col-lg-8">Text</div>

Ⓒ 2012 -2025 | Help2Site.com

Sitemap