Bootstrap

Gerüst

Bootstrap basiert auf einem responsiven 12-Spalten-Raster. Wir haben auch Layouts mit fester und flüssiger Breite basierend auf diesem System aufgenommen.

Grid-System 12 Säulen mit einem ansprechenden Twist

Standardraster von 940 Pixel

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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.


Spalten versetzen

4
4 versetzt 4
3 versetzt 3
3 versetzt 3
8 versetzt 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Spalten verschachteln

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

Ebene 1 der Spalte
Level 2
Level 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Ebene 1 der Spalte
  4.     <div class = "row" > 
  5.       <div class = "span6" > Stufe 2 </div> 
  6.       <div class = "span6" > Stufe 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Rasteranpassung

Variable Standardwert Beschreibung
@gridColumns 12 Anzahl der Spalten
@gridColumnWidth 60px Breite jeder Spalte
@gridGutterWidth 20px Negativer Abstand zwischen Spalten
@siteWidth Berechnete Summe aller Spalten und Stege Zählt die Anzahl der Spalten und Stege, um die Breite des .container-fixed()Mixins festzulegen

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.

Layouts Grundlegende Vorlagen zum Erstellen von Webseiten

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">.

  1. <Körper>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Seitenleisteninhalt-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Textinhalt-->
  8.     </div>
  9.   </div>
  10. </div>

Responsive Design Medienabfragen für verschiedene Geräte und Auflösungen

Reaktionsfähige Geräte

Unterstützte Geräte

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

Etikett Layoutbreite Spaltenbreite Stegbreite
Smartphones 480px und darunter Fließende Säulen, keine festen Breiten
Tabletts im Hochformat 480px bis 768px Fließende Säulen, keine festen Breiten
Tabletts im Querformat 768px bis 940px 44px 20px
Standard 940px und höher 60px 20px
Große Anzeige 1210px und höher 70px 30px

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

Verwenden der Medienabfragen

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 und kompilieren Sie responsive.less als separate Datei

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.

  1.   // Telefone im Querformat und runter
  2.   @media ( max - width : 480px ) { ... }     
  3.  
  4.   // Telefon im Querformat zum Tablet im Hochformat
  5.   @media ( max - width : 768px ) { ... }     
  6.  
  7.   // Hochformat-Tablet zu Querformat und Desktop
  8.   @media ( Mindestbreite : 768px ) und ( Maximalbreite : 940px ) { ... } _ _ _ _        
  9.  
  10.   // Großer Desktop
  11.   @media ( Mindestbreite : 1200px ) { .. } _ _