Grid-System

Beispiel

Das Rastersystem von Bootstrap verwendet eine Reihe von Containern, Zeilen und Spalten, um Inhalte anzuordnen und auszurichten. Es ist mit Flexbox gebaut und reagiert vollständig. Nachfolgend finden Sie ein Beispiel und eine ausführliche Erklärung, wie das Grid-System zusammenkommt.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Das obige Beispiel erstellt mithilfe unserer vordefinierten Rasterklassen drei gleich breite Spalten über alle Geräte und Darstellungsbereiche hinweg. Diese Spalten sind auf der Seite mit dem übergeordneten Element zentriert .container.

Wie es funktioniert

Aufschlüsseln, hier ist, wie das Grid-System zusammenkommt:

• Unser Grid unterstützt sechs responsive Breakpoints . Haltepunkte basieren auf min-widthMedienabfragen, was bedeutet, dass sie sich auf diesen Haltepunkt und alle darüber befindlichen auswirken (z. B. .col-sm-4gelten für sm, md, lg, xlund xxl). Das bedeutet, dass Sie die Größe und das Verhalten von Containern und Spalten für jeden Haltepunkt steuern können.

• Container zentrieren und füllen Ihre Inhalte horizontal auf. Verwenden Sie .containerfür eine responsive Pixelbreite, .container-fluidfür width: 100%alle Darstellungsbereiche und Geräte oder einen responsiven Container (z. B. .container-md) für eine Kombination aus Fluid- und Pixelbreiten.

• Zeilen sind Wrapper für Spalten. Jede Spalte hat paddingeine horizontale (Rinne genannt) zum Steuern des Abstands zwischen ihnen. Dem paddingwird dann in den Zeilen mit negativen Rändern entgegengewirkt, um sicherzustellen, dass der Inhalt in Ihren Spalten visuell auf der linken Seite ausgerichtet ist. Zeilen unterstützen auch Modifikatorklassen, um die Spaltengröße einheitlich anzuwenden, und Bundstegklassen , um den Abstand Ihres Inhalts zu ändern.

• Säulen sind unglaublich flexibel. Pro Zeile stehen 12 Vorlagenspalten zur Verfügung, mit denen Sie verschiedene Kombinationen von Elementen erstellen können, die sich über eine beliebige Anzahl von Spalten erstrecken. Spaltenklassen geben die Anzahl der zu überspannenden Vorlagenspalten an (z. B. col-4überspannt vier). widths werden in Prozent angegeben, sodass Sie immer die gleiche relative Größe haben.

• Dachrinnen sind auch reaktionsschnell und anpassbar. Dachrinnenklassen sind über alle Haltepunkte hinweg verfügbar , mit denselben Größen wie unsere Rand- und Polsterabstände . Ändern Sie horizontale Dachrinnen mit .gx-*Klassen, vertikale Dachrinnen mit .gy-*oder alle Dachrinnen mit .g-*Klassen. .g-0ist auch zum Entfernen von Dachrinnen erhältlich.

• Sass-Variablen, Maps und Mixins versorgen das Grid. Wenn Sie die vordefinierten Grid-Klassen in Bootstrap nicht verwenden möchten, können Sie unsere Grid-Quelle Sass verwenden , um Ihre eigenen mit semantischem Markup zu erstellen. Wir fügen auch einige benutzerdefinierte CSS-Eigenschaften hinzu, um diese Sass-Variablen für noch mehr Flexibilität für Sie zu verwenden.

Beachten Sie die Einschränkungen und Fehler rund um Flexbox , wie die Unfähigkeit, einige HTML-Elemente als Flex-Container zu verwenden .

Rasteroptionen

Das Rastersystem von Bootstrap kann sich über alle sechs Standardhaltepunkte und alle von Ihnen angepassten Haltepunkte hinweg anpassen. Die sechs Standard-Rasterebenen sind wie folgt:

• Extraklein (xs)
• Klein (klein)
• Mittel (md)
• Groß (lg)
• Extra groß (XL)
• Extra extra groß (xxl)

Wie oben erwähnt, hat jeder dieser Breakpoints seinen eigenen Container, eindeutiges Klassenpräfix und Modifikatoren. So ändert sich das Raster über diese Haltepunkte hinweg:

Spalten mit automatischem Layout

Verwenden Sie Breakpoint-spezifische Spaltenklassen für eine einfache Spaltengröße ohne eine explizit nummerierte Klasse wie .col-sm-6.

Gleich breit

Hier sind zum Beispiel zwei Rasterlayouts, die für jedes Gerät und jeden Viewport gelten, von xsbis xxl. Fügen Sie eine beliebige Anzahl von einheitenlosen Klassen für jeden benötigten Haltepunkt hinzu, und jede Spalte hat die gleiche Breite.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Einstellen einer Spaltenbreite

Auto-Layout für Flexbox-Gitterspalten bedeutet auch, dass Sie die Breite einer Spalte festlegen und die Größe der gleichgeordneten Spalten automatisch um sie herum anpassen können. Sie können vordefinierte Rasterklassen (wie unten gezeigt), Rastermixins oder Inline-Breiten verwenden. Beachten Sie, dass die Größe der anderen Spalten unabhängig von der Breite der mittleren Spalte geändert wird.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Inhalt mit variabler Breite

Verwenden Sie col-{breakpoint}-autoKlassen, um Spalten basierend auf der natürlichen Breite ihres Inhalts zu skalieren.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Reaktionsfähige Klassen

Das Grid von Bootstrap umfasst sechs Ebenen vordefinierter Klassen zum Erstellen komplexer responsiver Layouts. Passen Sie die Größe Ihrer Spalten auf extra kleinen, kleinen, mittleren, großen oder extra großen Geräten an, wie Sie es für richtig halten.

Alle Haltepunkte

Verwenden Sie für Grids, die vom kleinsten bis zum größten Gerät gleich sind, die Klassen .colund . .col-*Geben Sie eine nummerierte Klasse an, wenn Sie eine besonders große Spalte benötigen; andernfalls können Sie sich gerne daran halten .col.

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

Horizontal gestapelt

Mit einem einzigen Satz von .col-sm-*Klassen können Sie ein einfaches Rastersystem erstellen, das gestapelt beginnt und am kleinen Haltepunkt ( sm) horizontal wird.

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

Mischen und Anpassen

Möchten Sie nicht, dass Ihre Säulen einfach in einigen Rasterebenen gestapelt werden? Verwenden Sie nach Bedarf eine Kombination verschiedener Klassen für jede Ebene. Sehen Sie sich das Beispiel unten an, um eine bessere Vorstellung davon zu bekommen, wie alles funktioniert.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Zeilenspalten

Verwenden Sie die responsiven .row-cols-*Klassen, um schnell die Anzahl der Spalten festzulegen, die Ihren Inhalt und Ihr Layout am besten wiedergeben. Während für die einzelnen Spalten normale .col-*Klassen gelten (z. B. ), werden die Zeilenspaltenklassen für enthaltene Spalten standardmäßig .col-md-4auf den Eltern gesetzt . .rowMit .row-cols-autokönnen Sie den Spalten ihre natürliche Breite geben.

Verwenden Sie diese Zeilenspaltenklassen, um schnell grundlegende Rasterlayouts zu erstellen oder Ihre Kartenlayouts zu steuern und bei Bedarf auf Spaltenebene zu überschreiben.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Sie können auch das begleitende Sass-Mixin verwenden row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Verschachtelung

Um Ihren Inhalt mit dem Standardraster zu verschachteln, fügen Sie eine neue Spalte .rowund eine Reihe von .col-sm-*Spalten innerhalb einer vorhandenen .col-sm-*Spalte hinzu. Verschachtelte Zeilen sollten eine Reihe von Spalten enthalten, die zusammen maximal 12 ergeben (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Wenn Sie die Sass-Quelldateien von Bootstrap verwenden, haben Sie die Möglichkeit, Sass-Variablen und Mixins zu verwenden, um benutzerdefinierte, semantische und responsive Seitenlayouts zu erstellen. Unsere vordefinierten Rasterklassen verwenden dieselben Variablen und Mixins, um eine ganze Reihe von gebrauchsfertigen Klassen für schnell ansprechende Layouts bereitzustellen.

Variablen

Variablen und Zuordnungen bestimmen die Anzahl der Spalten, die Bundstegbreite und den Medienabfragepunkt, an dem schwebende Spalten beginnen sollen. Wir verwenden diese, um die oben dokumentierten vordefinierten Grid-Klassen sowie für die unten aufgeführten benutzerdefinierten Mixins zu generieren.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixins

Mixins werden in Verbindung mit den Grid-Variablen verwendet, um semantisches CSS für einzelne Grid-Spalten zu generieren.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Beispielnutzung

Sie können die Variablen auf Ihre eigenen benutzerdefinierten Werte ändern oder einfach die Mixins mit ihren Standardwerten verwenden. Hier ist ein Beispiel für die Verwendung der Standardeinstellungen zum Erstellen eines zweispaltigen Layouts mit einer Lücke dazwischen.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Anpassen des Rasters

Mit unseren integrierten Grid-Sass-Variablen und -Maps ist es möglich, die vordefinierten Grid-Klassen vollständig anzupassen. Ändern Sie die Anzahl der Ebenen, die Abmessungen der Medienabfrage und die Containerbreiten – und kompilieren Sie dann neu.

Säulen und Dachrinnen

Die Anzahl der Grid-Spalten kann über Sass-Variablen modifiziert werden. $grid-columnswird verwendet, um die Breiten (in Prozent) jeder einzelnen Spalte zu generieren, während $grid-gutter-widthdie Breite für die Spaltenstege festgelegt wird.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Gitterebenen

Über die Spalten selbst hinaus können Sie auch die Anzahl der Rasterebenen anpassen. Wenn Sie nur vier Grid-Tiers wollten, würden Sie $grid-breakpointsund $container-max-widthsauf etwas wie folgt aktualisieren:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wenn Sie Änderungen an den Sass-Variablen oder -Maps vornehmen, müssen Sie Ihre Änderungen speichern und neu kompilieren. Dadurch wird ein brandneuer Satz vordefinierter Rasterklassen für Spaltenbreiten, Versätze und Reihenfolge ausgegeben. Responsive Sichtbarkeitsdienstprogramme werden ebenfalls aktualisiert, um die benutzerdefinierten Haltepunkte zu verwenden. Stellen Sie sicher, dass Rasterwerte in px(nicht rem, em, oder %) eingestellt sind.