Bootstrap-Kurs [1] : Grundstruktur, Grid und Größen

Container

Bootstrap benötigt ein containing-Element, um den Inhalt der Site zu umhüllen und unser Grid-System aufzunehmen. Sie können einen von zwei Containern wählen:

• <div class="container-fluid">
  zeigt Ihren Inhalt mit der vollen verfügbaren Breite an
• <div class="container">
  Zentrieren Sie Ihre Inhalte und geben Sie entsprechende Seitenränder.

Reihe

• <div class="row">
  Zeilen erstellen horizontale Gruppen von Spalten. Verwenden Sie daher, wenn Sie Ihr Layout horizontal teilen möchten.

Spalten

• <div class="col-md-*>
  Bootstrap's Grid-System erlaubt bis zu 12 Spalten auf der Seite. Verwenden Sie zum Erstellen einer Spalte eine spezielle Klasse, wobei "*" für die Anzahl der Spalten zwischen 1 und 12 steht.

<div class="row">
  <div class="col-md-6"> </div>
  <div class="col-md-6"> </div>
</div>

Abstand

Um unser Layout zu fixieren, werden wir nun Abstandhalter verwenden.
Hier ist ein Beispiel, wie sie funktionieren:

Hinweis: In MDB 1 rem=16 px

1. Wenn Sie die Klasse .mr-4 zu einem gegebenen Element hinzufügen ,
erhalten Sie einen 1.5 Rem rechten Rand .

2. Wenn Sie .pt-2 einem gegebenen Element eine Klassenklasse hinzufügen ,
wird ein oberer Abstand von 0,5 Rem erhalten .

3. Wenn Sie .mx-1 einem gegebenen Element eine Klassenklasse hinzufügen ,
erhalten Sie einen 0,25 mm rechten und linken Rand .

4. Wenn Sie .py-5 einem gegebenen Element eine Klassenklasse hinzufügen ,
erhält es eine 3 rem obere und untere Füllung .

5. Wenn Sie .m-5 einem gegebenen Element eine Klassenklasse hinzufügen ,
erhalten Sie 3 obere, rechte, untere und linke Ränder .

Um mehr über Abstandsmittel zu erfahren, werfen Sie einen Blick auf unsere SPACING DOKUMENTATION .

• mt = margin-top
• mb = margin-bottom
• mr = margin-right
• ml = margin-left
• mx = margin-left + margin-right
• my = margin-top + margin-bottom

• pt = padding-top
• pb = padding-bottom
• pr = padding-right
• pl = padding-left
• px = padding-left + padding-right
• py = padding-top + padding-bottom