Das standardmäßige Rastersystem, das als Teil von Bootstrap bereitgestellt wird, ist ein 940 Pixel breites, 12-Spalten-Raster .

Es hat auch vier ansprechende Varianten für verschiedene Geräte und Auflösungen: Telefon, Tablet-Hochformat, Tischlandschaft und kleine Desktops sowie große Breitbild-Desktops.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Wie hier gezeigt, kann ein Grundlayout mit zwei "Säulen" erstellt werden, die jeweils eine Anzahl der 12 Grundsäulen überspannen, die wir als Teil unseres Rastersystems definiert haben.

Mit dem statischen (nicht fließenden) Gittersystem in Bootstrap ist das Verschachteln einfach. Um Ihre Inhalte zu verschachteln, fügen Sie einfach eine neue Spalte .rowund eine Reihe von .span*Spalten innerhalb einer vorhandenen .span*Spalte hinzu.

Beispiel

Verschachtelte Zeilen sollten eine Reihe von Spalten enthalten, die zusammen die Anzahl der Spalten des übergeordneten Elements ergeben. Beispielsweise sollten zwei verschachtelte .span3Spalten innerhalb einer platziert werden .span6.

<div class = "row" > 
  <div class = "span12" > 
    Ebene 1 der Spalte
    <div class = "row" > 
      <div class = "span6" > Stufe 2 </div> 
      <div class = "span6" > Stufe 2 </div> 
    </div>
  </div>
</div>

Prozent, nicht Pixel

Das fließende Rastersystem verwendet Prozente für Spaltenbreiten anstelle von festen Pixeln. Es hat auch die gleichen reaktionsschnellen Variationen wie unser festes Rastersystem, wodurch die richtigen Proportionen für wichtige Bildschirmauflösungen und Geräte gewährleistet sind.

Fließende Reihen

Machen Sie jede Zeile flüssig, indem Sie einfach .rowzu wechseln .row-fluid. Die Spalten bleiben genau gleich, was es sehr einfach macht, zwischen festen und fließenden Layouts zu wechseln.

Markierung

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Das Verschachteln mit fließenden Gittern ist etwas anders: Die Anzahl der verschachtelten Spalten muss nicht mit der des übergeordneten Elements übereinstimmen. Stattdessen werden Ihre Spalten auf jeder Ebene zurückgesetzt, da jede Zeile 100 % der übergeordneten Spalte einnimmt.

<div class = "row-fluid" > 
  <div class = "span12" > 
    Ebene 1 der Spalte
    <div class = "row-fluid" > 
      <div class = "span6" > Stufe 2 </div> 
      <div class = "span6" > Stufe 2 </div> 
    </div>
  </div>
</div>

Variablen in LESS

In Bootstrap integriert sind eine Handvoll Variablen zum Anpassen des standardmäßigen 940px-Rastersystems, das oben dokumentiert ist. Alle Variablen für das Grid werden in variables.less gespeichert.

So passen Sie an

Das Ändern des Rasters bedeutet, die drei @grid*Variablen zu ändern und Bootstrap neu zu kompilieren. Ändern Sie die Grid-Variablen in variables.less und verwenden Sie eine der vier dokumentierten Methoden zur Neukompilierung . Wenn Sie weitere Spalten hinzufügen, achten Sie darauf, das CSS für diese in grid.less hinzuzufügen.

Ansprechbar bleiben

Die Anpassung des Rasters funktioniert nur auf der Standardebene, dem 940-Pixel-Raster. Um die responsiven Aspekte von Bootstrap beizubehalten, müssen Sie auch die Raster in responsive.less anpassen.

Festes Layout

Das standardmäßige und einfache 940 Pixel breite, zentrierte Layout für nahezu jede Website oder Seite, das von einer einzigen <div class="container">.

<Körper>
  <div class = "container" > 
    ...
  </div>
</body>

Flüssiges Layout

<div class="container-fluid">bietet eine flexible Seitenstruktur, minimale und maximale Breite und eine Seitenleiste auf der linken Seite. Es eignet sich hervorragend für Apps und Dokumente.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Seitenleisteninhalt-->
    </div>
    <div class = "span10" > 
      <!--Textinhalt-->
    </div>
  </div>
</div>

Unterstützte Geräte

Bootstrap unterstützt eine Handvoll Medienabfragen in einer einzigen Datei, um Ihre Projekte für verschiedene Geräte und Bildschirmauflösungen besser geeignet zu machen. Folgendes ist enthalten:

Benötigt Meta-Tag

Um sicherzustellen, dass Geräte reaktionsschnelle Seiten richtig anzeigen, fügen Sie das Viewport-Meta-Tag ein.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

Was sie machen

Medienabfragen ermöglichen benutzerdefiniertes CSS basierend auf einer Reihe von Bedingungen – Verhältnisse, Breiten, Anzeigetyp usw. – konzentrieren sich jedoch normalerweise auf min-widthund max-width.

• Ändern Sie die Spaltenbreite in unserem Raster
• Elemente stapeln statt schweben, wo immer es nötig ist
• Ändern Sie die Größe von Überschriften und Text, um sie besser für Geräte geeignet zu machen

Bootstrap schließt diese Medienabfragen nicht automatisch ein, aber das Verstehen und Hinzufügen ist sehr einfach und erfordert nur minimale Einrichtung. Sie haben einige Möglichkeiten, die responsiven Funktionen von Bootstrap einzubinden:

1. Verwenden Sie die kompilierte Responsive-Version bootstrap-responsive.css
2. Fügen Sie @import „responsive.less“ hinzu und kompilieren Sie Bootstrap neu
3. Ändern Sie responsive.less und kompilieren Sie es als separate Datei neu

Warum nicht einfach einbinden? Um ehrlich zu sein, muss nicht alles responsive sein. Anstatt Entwickler zu ermutigen, diese Funktion zu entfernen, halten wir es für das Beste, sie zu aktivieren.

  // Telefone im Querformat und runter
  @media ( max - width : 480px ) { ... }     
 
  // Telefon im Querformat zum Tablet im Hochformat
  @media ( max - width : 768px ) { ... }     
 
  // Hochformat-Tablet zu Querformat und Desktop
  @media ( Mindestbreite : 768px ) und ( Maximalbreite : 980px ) { ... } _ _ _ _        
 
  // Großer Desktop
  @media ( Mindestbreite : 1200px ) { .. } _ _