HTML/CSS. Grid-System Bootstrap 3

Das jeweilige Tutorial stellt die Information über Grid-System Bootstrap 3 zur Verfügung.

Grid-System Twitter Bootstrap bietet eine schnelle und einfache Möglichkeit, um das Seiten-Markup zu erstellen. Twitter Bootstrap 3 enthält adaptives mobiles Grid-System, das bis 12 Spalten (abhängig von dem Gerät oder Bildschirm) strukturiert werden kann. Schauen wir, wie es funktioniert.

1. Um richtig Einrückungen im Grid, Blöcke mit der Klasse .row auszurichten und festzulegen, sollen Sie innerhalb der Blöcke mit der Klasse .container (Feste Breite) oder .container-fluid (auf Seitenbreite) platzieren.

2. Blöcke mit der Klasse .row sollen benutzt werden, um horizontale Spaltengruppe zu erstellen.

3. Den Inhalt muss man innerhalb der Spalten platzieren und nur die Splaten können Nachkommen der Blöcke mit der Klasse .row sein.

4. Bestimmtе Grid Klassen, zum Beispiel .row und .col-xs-4, ermöglichen schnell das Grid-Markup zu erstellen. Man kann auch Mixins der Stylesheet-Sprache less nutzen, um die Anzahl der semantischen Markups zu erhöhen.

5. Die Spalten erstellen Lücken (gutters) (Lücken zwischen den Spalteninhalten) per Einrückung im Grid (padding). Diese Einrückung im Grid (padding) verschiebt sich für die erste und die letzte Spalte wegen des negativen Wertes der Einrückung im Grid (margin) der Blöcke mit der Klasse .row.

6. Um die Gridspalten zu erstellen, soll man die notwenige Zahl von zwölf verfügbaren Spalten eingeben. Zum Beispiel, für drei gleiche Spalten muss man drei Container mit der Klasse .col-xs-4 nutzen.

7. Die Gridklassen werden auf die Geräte verwendet, wo die Breite größer ist oder den Kontrollgrößen entspricht. Sie definieren auch die Gridklassen, die für kleinere Geräte gewidmet sind, um. Also, wenn Sie jegliche Klasse .col-md- auf das Element verwenden, wird dann der Stil nicht nut für mittlere Geräte sondern auch für große Geräte in dem Fall festgelegt, wenn mann die Klasse .col-lg- nicht nutzt.

Markup

Twitter Bootstrap 3 enthält bestimmte Gridklassen, um das Gridmarkup für verschiedene Geräte schnell umzubrechen (zum Beispiel, Handys, Tablets, Computer usw.). Zum Beispiel, man kann die Klasse .col-xs- nutzen, um die Gridspalten für sehr kleine Geräte wie Handy zu ertellen. Genauso werden die Klasse .col-sm- für kleine Geräte wie Tablets, Klasse .col-md- für mittlere Geräte wie Computer, und .col-lg- für große Computerbildschirme verwendet. Unten gibt es die Arten für das Markup das Grid-Systems Bootstrap.

1. Sehr kleine Geräte ~ Handys (<768px)

2. Kleine Geräte ~ Tablets (≥768px)

3. Mittlere Geräte ~ Computer (≥992px)

4. Große Geräte ~ Computer (≥1200px)

Grid Einstellungen

Machen Sie sich, bitte, mit der folgenden Tabelle bekannt, um ausführliche Information zu erhalten:

Wenn die Klasse .col-sm- aufs Element verwenden, wird dann dies auf den Stil nicht nur für kleine Geräte wie Tablets, sondern auch für mittlere und große Geräte, die die Bildschirmgröße 768px oder großer(das ist ≥768px) haben, wirken (wenn man die Klassen .col-md- und .col-lg- nicht nutzt). Genauso wird die Klasse .col-md- nicht nur auf den Stil für mittlere sondern auch für große Geräte wirken (wenn man Klasse .col-lg- nicht nutzt).

Lassen Sie uns Beispiele geben:

1. Stacked-to-horizontal (Bau der Spaltenblöcke, der zeilenförmig auf den Computern wird). Mittels des einfachen Satzes der Gridklassen .col-md-* kann man grundsätzliches Grid-System erstellen. Die Blöcke werden als Spalten auf den mobilen Geräten und Tablets (sehr kleine und kleine Geräte) platziert, und dann werden in die Zeile auf den Computern (mittlere Geräte) umwandelt. Die Gridspalten können in jeglichem Block mit der Klasse .row platziert werden.

   

   Code-Beispiel:

   <div class="row">
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   	<div class="col-md-1">.col-md-1</div>
   </div>
   <div class="row">
   	<div class="col-md-8">.col-md-8</div>
   	<div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
   	<div class="col-md-4">.col-md-4</div>
   	<div class="col-md-4">.col-md-4</div>
   	<div class="col-md-4">.col-md-4</div>
   </div>
   <div class="row">
   	<div class="col-md-6">.col-md-6</div>
   	<div class="col-md-6">.col-md-6</div>
   </div>   
   

2. Fluid container (Bewegbarer Container). Wandeln Sie jegliches Gridmarkup mit der festen Breite in Vollbild um, indem Sie Containerklasse mit .container durch .container-fluid ersetzen.

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

3. Mobile and desktop (Mobile Geräte und Computer). Man kann Gridklassen für sehr kleine und mittlere Geräte nutzen, indem man .col-xs-* .col-md-* zu Spalten hinzufügt.

   

   Code-Beispiel:

   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div class="row">
   	<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
   	<div class="col-xs-6 col-md-4">.col-xs-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-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
   </div>
     
   <!-- Columns are always 50% wide, on mobile and desktop -->
   <div class="row">
     <div class="col-xs-6">.col-xs-6</div>
     <div class="col-xs-6">.col-xs-6</div>
   </div>
     

4. Mobile, tablet, desktops (Mobile Geräte, Tablets, Computer). Bauen Sie dynamischeres Markup fürs Tablet mittels der Klasse .col-sm-* , indem Sie vorheriges Beispiel nutzen.

   

   Code-Beispiel:

   <div class="row">
   	<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
   	<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
   </div>
   <div class="row">
   	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   	<!-- Optional: clear the XS cols if their content doesn't match in height -->
   	<div class="clearfix visible-xs-block"></div>
   	<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
   </div>
   

5. Column wrapping (Spaltenumbruch). Wenn es in diesem Block mit der Klasse .row mehr als 12 Spalten gibt, wird jede Gruppe der zusätzlichen Spalten in eine neue Zeile umbrechen.

   

   Code-Beispiel:

   <div class="row">
       <div class="col-xs-9">.col-xs-9</div>
       <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
       <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
   </div>
   

6. Responsive column resets (Korrektur der adaptiven Spalten). Wenn Sie vier verfügbare Grids nutzen, treten Sie das Problem auf, weil in bestimmten Stellen die Spalten wegen der Höhendifferenz falsch aussehen. Um dies zu korrigieren, nutzen Sie den Block mit der Klasse .clearfix und adaptive Klassen.

   

   Code-Beispiel:

   <div class="row">
   	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
   	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
   
   <!-- Add the extra clearfix for only the required viewport -->
   	<div class="clearfix visible-xs-block"></div>
   	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
   	<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
   </div>
   

7. Offsetting columns (Spaltenverschiebung). Verschieben Sie die Spalten nach rechts mittels der Klassen .col-md-offset-* . Diese Klassen erhöhen die Einrückung links von dem Block bis * Spaltenanzahl. Zum Beispiel, Klasse .col-md-offset-4 verschiebt den Block mit der Klasse .col-md-4 auf 4 Spalten.

   

   Code-Beispiel:

   
   <div class="row">
   	<div class="col-md-4">.col-md-4</div>
   	<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
   </div>
   <div class="row">
   	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   	<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
   </div>
   <div class="row">
   	<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
   </div>
   
   

8. Nesting columns (Verschachtelte Spalten). Um den Inhalt in gründsätzliches Grid zu verschachteln, fügen Sie den neuen Block mit der Klasse .row und den Spaltensatz .col-sm-* in existierender Spalte .col-sm-* hinzu. Verschachtelte Blöcke mit der Klasse row müssen 12 oder mehr Spalten enthalten (es ist nicht empfohlen alle 12 verfügbaren Spalten zu nutzen).

   

   Code-Beispiel:

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

9. Column ordering (Anzeigereihenfolge der Spalten). Die Anzeigereihenfolge der eingebauten Gridspalten kann mittels modifizierte Klassen .col-md-push-* und .col-md-pull-* geändert werden.

   

   Code-Beispiel:

   <div class="row">
   	<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
   	<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
   </div>
   

Adaptive dienstliche Klassen Bootstrap

1. Nutzen Sie folgende adaptiven Klassen, um die Sichtbarkeit der Elemente auf den Geräten, wessen Bildschirmgrößen zu bestimmtem Typ gehören, zu verwalten. In der Version v3.2.0, Klassen .visible-*-* für jede Kontrollgröße gibt es drei Varianten (eine für jeden Eigenschaftswert CSS display : inline, block und inline-block).

   Klasse	Beschreibung
   .visible-xs-*	Das macht das Element sichtbar nur für sehr kleine Geräte mit der Bildschirmgröße kleiner als 768px. Für andere ist es unsichtbar.
   .visible-sm-*	Das macht das Element sichtbar nut für kleine Geräte, die die Bildschirmgöße 768px oder mehr (das ist ≥768px), aber kleine als 992px haben. Für andere ist es unsichtbar.
   .visible-md-*	Das macht das Element sichtbar nut für mittlere Geräte, die die Bildschirmgröße 992px oder mehr (das ist ≥992px), aber kleiner als 1200px, haben. Für andere ist es unsichtbar.
   .visible-lg-*	Das macht das Element sichtbar nut für große Geräte, die die Bildschirmgröße 1200px oder mehr (das ist ≥1200px) haben. Für andere ist es unsichtbar.

2. Genauso kann man dienstliche Klassen zum Verstecken nutzen, um die Elemente auf den bestimmten Geräten zu verstecken:

   Klasse	Beschreibung
   .hidden-xs	Das macht das Element unsichtbar nur für sehr kleine Geräte mit der Bildschirmgröße kleiner als 768px. Für andere ist es sichtbar.
   .hidden-sm	Das macht das Element unsichtbar nut für kleine Geräte, die die Bildschirmgöße 768px oder mehr (das ist ≥768px), aber kleine als 992px haben. Für andere ist es sichtbar.
   .hidden-md	Das macht das Element unsichtbar nut für mittlere Geräte, die die Bildschirmgröße 992px oder mehr (das ist ≥992px), aber kleiner als 1200px, haben. Für andere ist es sichtbar.
   .hidden-lg	Das macht das Element unsichtbar nut für große Geräte, die die Bildschirmgröße 1200px oder mehr (das ist ≥1200px) haben. Für andere ist es sichtbar.

3. Man kann die folgenden dienstlichen Klassen nutzen, um bestimmte Elemente beim Drucken der Seite zu zeigen oder verstecken.

   .visible-print-block	Das macht Blockelemente unsichtbar (block) in der Vorschau der Seite im Browser zum Drucken.
   .visible-print-inline	Das macht Zeilenelemente unsichtbar (inline) in der Vorschau der Seite im Browser zum Drucken.
   .visible-print-inline-block	Das macht Zeile-Block-Elemente unsichtbar (inline-block) in der Vorschau der Seite im Browser zum Drucken.
   .hidden-print	Das versteckt die Elemente, die im Browser beim Drucken sichtbar sind.