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.

Globale Stile für CSS-Reset, Typografie und Links

Erfordert HTML5-Doctype

Bootstrap verwendet HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Dokumenttyps erfordern. Stellen Sie sicher, dass Sie es am Anfang jeder Bootstrapped-Seite in Ihrem Projekt einfügen.

  1. <!DOCTYPE html>
  2. <html lang = "de" > 
  3.   ...
  4. </html>

Typografie und Links

In der scaffolding.less -Datei legen wir grundlegende globale Anzeige-, Typografie- und Linkstile fest. Insbesondere wir:

  • Rand am Körper entfernen
  • Stellen Sie background-color: white;auf diebody
  • Verwenden Sie die Attribute @baseFontFamily, @baseFontSize, und als unsere typografische Basis@baseLineHeight
  • Legen Sie die globale Linkfarbe über @linkColorfest und wenden Sie Linkunterstreichungen nur an an:hover

Zurücksetzen über Normalisieren

Ab Bootstrap 2 hat sich das traditionelle CSS-Reset dahingehend weiterentwickelt, Elemente aus Normalize.css zu verwenden , einem Projekt von Nicolas Gallagher , das auch die HTML5-Boilerplate unterstützt .

Das neue Zurücksetzen ist immer noch in reset.less zu finden , aber aus Gründen der Kürze und Genauigkeit wurden viele Elemente entfernt.

Standardrastersystem 12 Spalten mit einer reaktionsschnellen Wendung

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, Tablet-Querformat 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

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.

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>

Fluid Grid System 12 ansprechende, prozentbasierte Spalten

Flüssigkeitssäulen

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

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Fließende Verschachtelung

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.

Flüssigkeit 12
Flüssigkeit 6
Flüssigkeit 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Ebene 1 der Spalte
  4.     <div class = "row-fluid" > 
  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

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

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 Sie Medienanfragen verantwortungsbewusst und nur als Einstieg in Ihre mobile Zielgruppe. Ziehen Sie bei größeren Projekten dedizierte Codebasen und keine Schichten von Medienabfragen in Betracht.

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:

Etikett Layoutbreite Spaltenbreite Stegbreite
Smartphones 480px und darunter Fließende Säulen, keine festen Breiten
Smartphones zu Tablets 767px und darunter Fließende Säulen, keine festen Breiten
Tabletts im Hochformat 768px und höher 42px 20px
Standard 980px und höher 60px 20px
Große Anzeige 1200px und höher 70px 30px

Benötigt Meta-Tag

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

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

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

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

Responsive Utility-Klassen

Was sind Sie

Verwenden Sie für eine schnellere mobilfreundliche Entwicklung diese grundlegenden Hilfsklassen zum Anzeigen und Ausblenden von Inhalten nach Gerät.

Wann verwenden

Verwenden Sie sie nur begrenzt und vermeiden Sie es, völlig unterschiedliche Versionen derselben Website zu erstellen. Verwenden Sie sie stattdessen, um die Präsentation jedes Geräts zu ergänzen.

Beispielsweise könnten Sie ein <select>Element für die Navigation auf mobilen Layouts anzeigen, aber nicht auf Tablets oder Desktops.

Unterstützende Klassen

Hier sehen Sie eine Tabelle der von uns unterstützten Klassen und ihrer Auswirkungen auf ein bestimmtes Medienabfragelayout (nach Gerät gekennzeichnet). Sie sind in zu finden responsive.less.

Klasse Telefone480px und darunter Tablets767px und darunter Desktops768px und höher
.visible-phone Sichtbar
.visible-tablet Sichtbar
.visible-desktop Sichtbar
.hidden-phone Sichtbar Sichtbar
.hidden-tablet Sichtbar Sichtbar
.hidden-desktop Sichtbar Sichtbar

Testfall

Ändern Sie die Größe Ihres Browsers oder laden Sie ihn auf verschiedene Geräte, um die oben genannten Klassen zu testen.

Sichtbar auf...

Grüne Häkchen zeigen an, dass die Klasse in Ihrem aktuellen Ansichtsfenster sichtbar ist.

  • Telefon✔ Telefon
  • Tablette✔ Tablette
  • Schreibtisch✔ Schreibtisch

Versteckt auf ...

Hier zeigen grüne Häkchen an, dass die Klasse in Ihrem aktuellen Ansichtsfenster ausgeblendet ist.

  • Telefon✔ Telefon
  • Tablette✔ Tablette
  • Schreibtisch✔ Schreibtisch