twitter-bootstrap
Rastersystem

Einführung

Bemerkungen

Medien-Anfragen

Medienabfragen in Bootstrap ermöglichen das Verschieben, Anzeigen und Ausblenden von Inhalten basierend auf der Größe des Darstellungsbereichs. Die folgenden Medienabfragen werden in LESS-Dateien verwendet, um die Schlüsselhaltepunkte im Bootstrap-Grid-System zu erstellen:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Gelegentlich werden diese um eine maximale Breite erweitert, um CSS auf eine engere Gruppe von Geräten zu beschränken:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Bootstrap-Raster (Haltepunkte)

Neben dem Konzept der Säuleneinheiten verfügt Bootstrap über verschiedene Haltepunkte oder Rastergrößen, so genannte Tiers. Das Bootstrap 3-Raster verfügt über vier (4) Ebenen, um unterschiedliche Bildschirmbreiten (oder Ansichtsfenster) aufzunehmen. Die Bootstrap 3-Ebenen sind xs , sm , md und lg . Die Rasterspalten von Bootstrap werden durch verschiedene col-{breakpoint}-{units} CSS-Klassen identifiziert.

Jede Grid-Tier-Ebene umfasst einen Bereich , der die Bildschirmbreiten typischer Geräte wie Desktops, Laptops, Tablets und Smartphones optimal anpasst.

Bootstrap verwendet CSS-Medienabfragen, um responsive Haltepunkte zu erstellen, die eine Begrenzung für jede Rastergröße festlegen. Mit diesen Rastergrößen können Sie das Layout von Spalten ändern, um die unterschiedlichen Bildschirmbreiten und Geräte optimal an das Responsive Design anzupassen.

• col-xs-* - für kleinste Bildschirmbreiten wie Smartphones <768 px
• col-sm-* - für kleine Bildschirmbreiten wie Smartphones und Tablets> = 768 px
• col-md-* - für mittlere Bildschirmbreiten wie Tablets und Laptops> = 992 px
• col-lg-* - für große Bildschirmbreiten wie Desktops> = 1200 px

Referenz: Rastersystem

Gleiche Spaltenbreite für jedes Gerät

Um eine Spalte zu erstellen, die immer 50% der Breite des Ansichtsfensters (auf allen Geräten) beträgt, können Sie für jede Schicht col-*-6 festlegen.

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

Dies ist jedoch ein unnötiges zusätzliches Markup, da col-xs-6 6 Einheiten auf xs und mehr bedeutet. Die kleinste von Ihnen festgelegte Ebene (xs, sm oder md) definiert auch die Größe für größere Bildschirmbreiten. Legen Sie für dieselbe Spalte in allen Ebenen die Breite für das kleinste Ansichtsfenster fest.

Kürzere Code:

<div class="col-xs-6">..</div>

Unterschiedliche Säulenbreite für jedes Gerät (Responsive Design)

Die col-*-* Klassen können kombiniert werden , um die Spaltenbreiten bei verschiedenen Rastergrößen zu steuern.

Erstellen Sie beispielsweise eine Spalte mit 50% Breite in der sm Tier und eine 25% Breite in der md Tier ...

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

Die Gitter sm , md und lg "stapeln" alle vertikal bei Darstellungsbreite von weniger als 768 Pixel. An diesem Punkt passt das xs Raster. Spalten, die die col-xs- * -Klassen verwenden, werden nicht vertikal gestapelt und werden auf den kleinsten Bildschirmen weiter verkleinert.

Bootstrap-Zeilen und -Säulen

Das Rastersystem von Bootstrap besteht aus 12 Einheiten, den sogenannten Columns ( Spalten) , mit denen der Inhalt horizontal im Ansichtsfenster angeordnet werden kann.

Der Grund für ein 12-Einheiten-Raster (anstelle von 10, 16 usw.) ist, dass 12 gleichmäßig in 6 (Hälften), 4 (Quartale) und 3 (Drittel) unterteilt ist. Dies erleichtert die Anpassung an verschiedene Layouts. Die Rasterspalten von Bootstrap werden durch verschiedene col-{breakpoint}-{units} CSS-Klassen identifiziert. Weitere Informationen zu Breite und Haltepunkten des Ansichtsfensters (AKA-Ebenen)

Zum Beispiel stellt col-md-3 eine Spalte dar, die 3 der 12 Einheiten (oder 25%) über ein Viewport mit mittlerer Breite ( md ) aufnimmt. Um eine Spaltenbreite in Ihrem Layout zu verwenden, verwenden Sie einfach die entsprechende col-{breakpoint}-{units} -Klasse in Ihrem HTML-Markup.

<div class="col-{breakpoint}-{units}">

Die Säulenbreite ist fließend (keine feste Breite), daher verbrauchen die Säulen einen Prozentsatz ihres Behälters.

Säuleneinheiten in Bootstrap 3

• col-*-1 : 1 von 12 (8.33333333% Breite)
• col-*-2 : 2 von 12 (16.66666667% Breite)
• col-*-3 : 3 von 12 (25% Breite)
• col-*-4 : 4 of 12 (33.3333333% Breite)
• col-*-5 : 5 von 12 (41.66666667% Breite)
• col-*-6 : 6 von 12 (50% Breite)
• col-*-7 : 7 von 12 (58.33333333% Breite)
• col-*-8 : 8 von 12 (66.66666667% Breite)
• col-*-9 : 9 von 12 (75% Breite)
• col-*-10 : 10 von 12 (83.33333333% Breite)
• col-*-11 : 11 von 12 (91.66666667% Breite)
• col-*-12 : 12 von 12 (100% Breite)

Demo - Bootstrap 12 Säuleneinheiten

Die Bootstrap Row

Die Bootstrap- .row Klasse enthält die Spalten. Säulen sollten immer in Reihen platziert werden und Reihen sollten immer in einem Behälter ( container oder container-fluid ) platziert werden. Die Zeile verwendet negative Ränder (-15px), um den richtigen Abstand zwischen dem Inhalt der Spalte und dem Rand des Browsers sicherzustellen. Zeilen werden verwendet, um Spalten horizontal zu gruppieren.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Spalten füllen die .row horizontal von links nach rechts und werden alle 12 Spalteneinheiten in eine neue Zeile umbrochen . Daher können Sie .row s verwenden, um horizontale Unterbrechungen zu erstellen, oder Sie können mehr als 12 Spalteneinheiten in einem einzelnen .row Element .row , um Spalten zu haben , die den Viewport vertikal .row (oder stapeln).

Bei der Verwendung von Spaltenumbrüchen (mehr als 12 Einheiten in einer .row ) müssen Sie responsive Reset (oder Clearfixes) verwenden, um sicherzustellen, dass ungerade Spalteninhalte gleichmäßig umbrochen werden. Dies ist wichtig, wenn der Inhalt der Spalten in der Höhe variiert.

Mehr zu Bootstrap Grid Columns & Rows

Probleme mit dem Bootstrap 3-Fluidgitter?

Bootstrap 3 - verschachtelte Zeile Kann ich mehr als 12 Spalten hinzufügen?

Bootstrap Zeile und Spalte Erklärung

Wie das Bootstrap-Grid funktioniert (Medium)

Behälter

Bootstrap erfordert ein umfassendes Element, um den Inhalt der Site zu verpacken und unser Rastersystem unterzubringen. Sie können einen von zwei Containern für Ihre Projekte auswählen.

Verwenden Sie die .container Klasse für einen responsiven Container mit fester Breite.

<div class="container">
  ...
</div>

Verwenden Sie die .container-fluid Klasse für einen Container mit voller Breite, der sich über die gesamte Breite Ihres Viewports erstreckt.

<div class="container-fluid">
  ...
</div>

Hinweis: Container können nicht verschachtelt werden (Sie können einen Container nicht in einen anderen Container stellen), da sich das padding und vieles mehr.

Versetzung von Spalten

Diese Klassen vergrößern den linken Rand einer Spalte um * Spalten. Zum Beispiel bewegt .col-md-offset-4 .col-md-4 über vier Spalten.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Säulenanordnungsmanipulation mit Push und Pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

Dies ändert die Reihenfolge der integrierten Rasterspalten.

Syntax: .col-md-push- * und .col-md-pull- *.

Mehr:
Säulenreihenfolge-Bearbeitung mit col-lg-push und col-lg-pull in Twitter Bootstrap 3
Bootstrap 3: Push / Pull-Spalten nur bei kleineren Bildschirmgrößen
Spaltenanordnung und -stapelung in Bootstrap 3