Bootstrap

Gerüst

Bootstrap basiert auf responsiven 12-Spalten-Raster, Layouts und Komponenten.

Globale Einstellungen

Erfordert HTML5-Doctype

Bootstrap verwendet bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Dokumenttyps erfordern. Fügen Sie es am Anfang all Ihrer Projekte hinzu.

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

Typografie und Links

Bootstrap legt grundlegende globale Anzeige-, Typografie- und Linkstile fest. Insbesondere wir:

  • marginAm 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

Diese Stile finden Sie in scaffolding.less .

Zurücksetzen über Normalisieren

Mit Bootstrap 2 wurde der alte Reset-Block zugunsten von Normalize.css fallengelassen , einem Projekt von Nicolas Gallagher und Jonathan Neal , das auch die HTML5-Boilerplate unterstützt . Während wir viel von Normalize in unserem reset.less verwenden , haben wir einige Elemente speziell für Bootstrap entfernt.

Standardrastersystem

Live-Grid-Beispiel

Das standardmäßige Bootstrap-Rastersystem verwendet 12 Spalten , was einen 940 Pixel breiten Container ohne aktivierte responsive Funktionen ergibt . Mit der hinzugefügten responsiven CSS-Datei passt sich das Raster je nach Darstellungsbereich an eine Breite von 724 Pixel und 1170 Pixel an. Unterhalb von 767 Pixel-Darstellungsfenstern werden die Spalten fließend und stapeln sich vertikal.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Einfaches Grid-HTML

Erstellen Sie für ein einfaches zweispaltiges Layout eine .rowund fügen Sie die entsprechende Anzahl an .span*Spalten hinzu. Da es sich um ein 12-Spalten-Raster handelt, .span*erstreckt sich jedes über eine Anzahl dieser 12 Spalten und sollte immer 12 für jede Zeile ergeben (oder die Anzahl der Spalten im übergeordneten Element).

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

In diesem Beispiel haben wir .span4und .span8, was insgesamt 12 Spalten und eine vollständige Zeile ergibt.

Spalten versetzen

Spalten mithilfe von .offset*Klassen nach rechts verschieben. Jede Klasse vergrößert den linken Rand einer Spalte um eine ganze Spalte. .offset4Bewegt sich beispielsweise .span4über vier Spalten.

4
3 versetzt 2
3 versetzt 1
3 versetzt 2
6 versetzt 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Spalten verschachteln

Um Ihren Inhalt mit dem Standardraster zu verschachteln, fügen Sie eine neue Spalte .rowund eine Reihe von .span*Spalten innerhalb einer vorhandenen .span*Spalte hinzu. Verschachtelte Zeilen sollten eine Reihe von Spalten enthalten, die zusammen die Anzahl der Spalten des übergeordneten Elements ergeben.

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

Fließendes Gittersystem

Beispiel für ein Live-Fluid-Raster

Das fließende Rastersystem verwendet Prozente anstelle von Pixeln für Spaltenbreiten. Es hat die gleichen Reaktionsfähigkeiten wie unser Fixed-Grid-System und stellt die richtigen Proportionen für wichtige Bildschirmauflösungen und Geräte sicher.

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

Grundlegendes flüssiges Raster-HTML

Machen Sie jede Zeile "flüssig", indem Sie .rowzu wechseln .row-fluid. Die Spaltenklassen bleiben genau gleich, was das Wechseln zwischen festen und fließenden Rastern erleichtert.

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

Flüssiger Ausgleich

Funktioniert auf die gleiche Weise wie das Versetzen des festen Gittersystems: Fügen Sie .offset*zu einer beliebigen Spalte hinzu, um so viele Spalten zu versetzen.

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

Fließende Verschachtelung

Fluid Grids nutzen die Verschachtelung anders: Jede verschachtelte Spaltenebene sollte bis zu 12 Spalten ergeben. Dies liegt daran, dass das fließende Raster Prozentsätze und keine Pixel zum Festlegen der Breite verwendet.

Flüssigkeit 12
Flüssigkeit 6
Flüssigkeit 6
Flüssigkeit 6
Flüssigkeit 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Flüssigkeit 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Flüssigkeit 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Flüssigkeit 6 </div> 
  9.           <div class = "span6" > Flüssigkeit 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Flüssigkeit 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Grundrisse

Festes Layout

Stellt ein gemeinsames Layout mit fester Breite (und optional reaktionsschnell) mit nur <div class="container">erforderlich bereit.

  1. <Körper>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Flüssiges Layout

Erstellen Sie eine flüssige, zweispaltige Seite mit <div class="container-fluid">—ideal für Anwendungen 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>

Sich anpassendes Design

Responsive Funktionen aktivieren

Aktivieren Sie responsives CSS in Ihrem Projekt, indem Sie das richtige Meta-Tag und zusätzliche Stylesheets in <head>Ihr Dokument einfügen. Wenn Sie Bootstrap von der Seite Anpassen kompiliert haben, müssen Sie nur das Meta-Tag einfügen.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Kopf hoch!Bootstrap enthält derzeit standardmäßig keine responsiven Funktionen, da nicht alles responsive sein muss. Anstatt Entwickler zu ermutigen, diese Funktion zu entfernen, halten wir es für das Beste, sie nach Bedarf zu aktivieren.

Über Responsive Bootstrap

Reaktionsfähige Geräte

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
Große Anzeige 1200px und höher 70px 30px
Standard 980px und höher 60px 20px
Tabletts im Hochformat 768px und höher 42px 20px
Handys zu Tablets 767px und darunter Fließende Säulen, keine festen Breiten
Telefone 480px und darunter Fließende Säulen, keine festen Breiten 
  1. /* Großer Desktop */
  2. @media ( Mindestbreite : 1200px ) { ... } _ _     
  3.  
  4. /* Hochformat Tablett zu Querformat und Desktop */
  5. @media ( Mindestbreite : 768px ) und ( Maximalbreite : 979px ) { ... } _ _ _ _        
  6.  
  7. /* Telefon im Querformat auf Tablet im Hochformat */
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. /* Telefone im Querformat und unten */
  11. @media ( max - width : 480px ) { ... }

Responsive Utility-Klassen

Verwenden Sie für eine schnellere mobilfreundliche Entwicklung diese Hilfsklassen zum Anzeigen und Ausblenden von Inhalten nach Gerät. Nachfolgend finden Sie eine Tabelle der verfügbaren Klassen und ihrer Auswirkungen auf ein bestimmtes Medienabfragelayout (nach Gerät gekennzeichnet). Sie sind in zu finden responsive.less.

Klasse Telefone767px und darunter Tablets979px bis 768px DesktopsStandard
.visible-phone Sichtbar
.visible-tablet Sichtbar
.visible-desktop Sichtbar
.hidden-phone Sichtbar Sichtbar
.hidden-tablet Sichtbar Sichtbar
.hidden-desktop Sichtbar Sichtbar

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. Responsive Dienstprogramme sollten nicht mit Tabellen verwendet werden und werden daher nicht unterstützt.

Testfall für reaktionsschnelle Dienstprogramme

Ä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