Bootstrap 3 CSS-Übersicht

Ziele

In diesem Tutorial haben wir das Wesentliche von Bootstrap 3 CSS besprochen. Als Nächstes erklären wir mehrere Schlüsselfaktoren dafür, wie Bootstrap 3 funktioniert.

HTML5-Doctype

Bootstrap 3 verwendet einige HTML5-Elemente und CSS-Eigenschaften. Damit diese ordnungsgemäß funktionieren, müssen Sie den HTML5-Doctype verwenden.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Wenn Sie den HTML5-Doctype am Anfang einer mit Bootstrap erstellten Webseite nicht verwenden, kann es zu Inkonsistenzen bei der Browserdarstellung und sogar zu spezifischen situationsbedingten Inkonsistenzen kommen, die dazu führen können, dass Ihr Code die W3C-Standardvalidierung nicht besteht.

Mobile First

Dies ist möglicherweise die bedeutendste Änderung in Bootstrap 3. In früheren Bootstrap-Versionen (bis 2.x) mussten Sie manuell eine weitere CSS-Datei zusammen mit dem Haupt-CSS einbinden, damit das Projekt mobilfreundlich wurde. Jetzt ist das anders: Das Standard-CSS von Bootstrap 3 ist von Haus aus mobilfreundlich.

Bootstrap 3 wurde mit einem Mobile-First-Ansatz entwickelt, wobei Desktop-Geräte an zweiter Stelle stehen. Dies ist tatsächlich ein sehr zeitgemäßer Schritt, da immer mehr Nutzer mobile Geräte verwenden.

Um mit Bootstrap entwickelte Websites mobilfreundlich zu machen und eine ordnungsgemäße Darstellung sowie das Zoomen per Touchscreen zu gewährleisten, müssen Sie das Viewport-Meta-Tag im Head der Webseite hinzufügen, wie unten gezeigt:

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

widthDas Attribut steuert die Breite des Geräts. Unter der Annahme, dass Ihre Website auf Geräten mit unterschiedlichen Bildschirmauflösungen aufgerufen wird, sorgt die Einstellung aufdevice-widthdafür, dass sie auf verschiedenen Geräten korrekt dargestellt wird.

initial-scale=1.0Stellt sicher, dass die Webseite beim Laden im Verhältnis 1:1 und ohne Skalierung angezeigt wird.

Durch das Hinzufügen vonuser-scalable=nozum Viewport-Meta-Tag in Browsern mobiler Geräte können Sie deren Zoom-Funktion deaktivieren. Normalerweise wirdmaximum-scale=1.0zusammen mit user-scalable=no verwendet. Nach dem Deaktivieren der Zoom-Funktion können Benutzer nur noch den Bildschirm scrollen, wodurch Ihre Website eher wie eine native App wirken kann. Beachten Sie, dass wir diesen Ansatz nicht für alle Websites empfehlen; es hängt von Ihrer jeweiligen Situation ab!

Responsive Bilder

Durch das Hinzufügen der Klasseimg-responsivekönnen Bilder in Bootstrap 3 besser für responsive Layouts angepasst werden. Sehen wir uns an, welche CSS-Eigenschaften diese Klasse enthält. Im Wesentlichen verleiht sie Bildern die Eigenschaften `max-width: 100%;` und `height: auto;`, sodass Bilder proportional skaliert werden können, ohne die Größe ihres Elternelements zu überschreiten.

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

Dies zeigt an, dass das entsprechende Bild alsinline-blockgerendert wird. Wenn Sie die display-Eigenschaft des Elements auf inline-block setzen, wird das Element relativ zum umgebenden Inhalt inline angezeigt, aber im Gegensatz zu Inline-Elementen können wir in diesem Fall Breite und Höhe festlegen.

Durch das Einstellen vonheight:autohängt die Höhe des entsprechenden Elements vom Browser ab.

Das Einstellen vonmax-widthauf 100% überschreibt jede über das width-Attribut angegebene Breite. Dies macht Bilder anpassungsfähiger für responsive Layouts.

Globaler Display-, Typografie- und Link-Bereich

Bootstrap 3 verwendetbody {margin: 0;}, um den Rand des Bodys zu entfernen.

Sehen Sie sich die folgenden Einstellungen in Bezug auf den Body an:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #FFFFFF;
}

Die erste Regel legt den Standard-Schriftstil des Body auf"Helvetica Neue", Helvetica, Arial, sans-serif。

Die zweite Regel legt die Standard-Schriftgröße des Textes auf 14 Pixel fest.

Die dritte Regel legt die Standard-Zeilenhöhe auf 1.428571429 fest.

Die vierte Regel legt die Standard-Textfarbe auf #333333 fest.

Die letzte Regel legt die Standard-Hintergrundfarbe auf Weiß fest.

Für den Standardstil von Links gelten die folgenden Einstellungen:

a:hover,
a:focus {
  color: #2A6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Wenn sich die Maus über einem Link befindet oder ein Link angeklickt wurde, wird die Farbe daher auf #2a6496 gesetzt. Gleichzeitig wird eine Unterstreichung angezeigt.

Zudem zeigen besuchte Links eine dünne, gestrichelte Umrandung mit dem Farbcode #333. Eine andere Regel setzt die Umrandung auf 5 Pixel Breite, und für WebKit-basierte Browser gibt es eine Browsereweiterung-webkit-focus-ring-color. Der Umrandungsversatz (outline offset) ist auf -2 Pixel eingestellt.

All diese Stile finden sich in scaffolding.less.

Browserübergreifende Inkonsistenzen vermeiden

Bootstrap 3 verwendet wie seine Vorgänger Normalize, um eine browserübergreifende Konsistenz herzustellen.

Container

Diecontainer-Klasse von Bootstrap 3 wird verwendet, um den Inhalt auf der Seite einzuhüllen. Werfen wir einen Blick auf die folgende Klasse

.container {
  margin-right: auto;
  margin-left: auto;
}

Durch den obigen Code bleiben der linke und rechte Rand des Containers dem Ermessen des Browsers überlassen.

.container:before,
.container:after {
  display: table;
  content: " ";
}

Dadurch werden Pseudo-Elemente generiert. Das Festlegen vondisplayauftableerstellt eine anonyme Tabellenzelle und einen neuen Blockformatierungskontext.:beforeDas Pseudo-Element verhindert das Zusammenbrechen des oberen Außenabstands (margin collapse), das:after-Pseudo-Element bereinigt Floats.

Wenn das Attributconteneditableim HTML erscheint, wird aufgrund einiger Opera-Bugs ein Leerzeichen um das genannte Element herum erzeugt. Dies kann behoben werden, indemcontent: " "verwendet wird, um es zu korrigieren.

.container:after {
  clear: both;
}

Es erstellt ein Pseudoelement und stellt sicher, dass alle Container sämtliche gefloatete Elemente umschließen.

Bootstrap 3 CSS verfügt über eine angewendete responsive Medienabfrage, die die max-width für den Container innerhalb verschiedener Medienabfrage-Schwellenwerte festlegt, um zum Grid-System zu passen.

Weitere Erweiterungen