Bootstrap CSS Übersicht
In diesem Kapitel werden wir die zugrunde liegende Struktur eines Schlüsselteils der Bootstrap, einschließlich unserer Web-Entwickler machen besser, schneller, stärker Best Practices erläutern.
HTML 5 Doctype (Doctype)
Bootstrap verwendet einige HTML5-Elemente und CSS-Eigenschaften. Um für diese zu arbeiten, müssen Sie die HTML5-Dokumenttyp (Doctype) zu verwenden. So enthält zu Beginn der Verwendung Bootstrap-Projekt den folgenden Code-Segment.
<!DOCTYPE html> <html> .... </html>
Wenn der Anfang der Seite in Bootstrap erstellt nicht die HTML5-Dokumenttyp (Doctype) verwenden, könnten Sie einige Browser Gesicht zeigen Inkonsistenz Probleme, die auch im Widerspruch bestimmten Situationen unter das Gesicht kann nicht W3C-Standard-Validierung in Ihrem Code übergeben .
Mobile-Gerät Priorität
Priorität mobilen Geräten ist die wichtigste Änderung in der Bootstrap 3.
In früheren Versionen von Bootstrap (bis 2.x), müssen Sie manuell eine andere CSS zu zitieren, das gesamte Projekt ein freundlicher Unterstützung für mobile Geräte zu machen.
Nicht mehr, Bootstrap 3 default CSS selbst ist freundlicher Unterstützung für mobile Geräte.
Bootstrap 3 mobile Gerät Priorität, entworfen von dem Desktop gefolgt. Dies ist tatsächlich eine sehr zeitnah Verschiebung, da immer mehr Menschen mobile Geräte verwenden.
Bootstrap Entwicklung Website für mobile Geräte freundlich , um sicherzustellen , die richtige Darstellung und Touch-Screen - Zoom zu machen, müssen Sie Ansichtsfenster Meta - Tags in die Seite des Kopfes an, wie folgt:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width Eigenschaft width Steuerungstechnik. Angenommen , Ihre Website mit einem anderen Bildschirmauflösung Geräte sein zu sehen, dann stellen Sie es auf geräte Breite zu gewährleisten , ist es richtig auf verschiedenen Geräten macht.
initial-scale = 1.0 die Seite geladen wird, um sicherzustellen, das Verhältnis von 1: 1 Darstellung, wird es keine Skalierung sein.
Auf dem mobilen Gerät Browser, durch Hinzufügen von Benutzer-skalierbare = no für das Ansichtsfenster - Meta - Tag seiner Skalierung (Zoom) Funktion zu deaktivieren.
Typischerweise Maximum-scale = 1.0 und benutzerspezifisch skalierbar = no zusammen. Nach dieser Zoom-Funktion deaktiviert ist, kann der Benutzer den Bildschirm scrollen, können Sie Ihre Website mehr wie eine native Anwendung Gefühl aussehen.
Beachten Sie, dass wir auf diese Weise nicht die Verwendung aller Seiten empfehlen, auf Ihrer individuellen Situation ab!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
Responsive Bild
<img src="..." class="img-responsive" alt="响应式图像">
Durch das Hinzufügen img-responsive Klasse Bootstrap 3 ermöglicht es dem Bild ansprechende Layout zu unterstützen , die freundlicher ist.
Schauen wir uns an, was diese Klasse die CSS-Eigenschaft enthält.
In dem folgenden Code können Sie das Bild img-responsive Klasse gibt max-width sehen: 100%; und height: auto; Eigenschaft skaliert werden kann , so dass das Bild nicht die Größe des übergeordneten Elements nicht überschreiten.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
Dies zeigt an, dass das zugehörige Bild als Inline-Block gemacht. Wenn Sie die Anzeigeeigenschaften des Elements eingestellt ist inline-block, Inline-Element in Bezug auf den Inhalt der Präsentationsform um ihn herum, aber mit dem Inline-Unterschied ist, dass wir in diesem Fall die Breite und Höhe einstellen.
Einstellen der Höhe: Höhe auto, verwandte Elemente hängt vom Browser ab .
Stellen Sie max-width ist zu 100% eine beliebige Breite von Breite Eigenschaft angegeben außer Kraft setzt. Es ermöglicht Bilder ansprechende Layout zu unterstützen, die freundlicher ist.
Globale Anzeige, Layout und Links
Grundlegende globale Anzeige
Bootstrap 3 unter Verwendung von body {margin: 0;} , um den Körper der Margen zu entfernen.
Betrachten Sie die folgenden Einstellungen für den Körper:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1,428571429;
color: # 333333;
background-color: #ffffff;
}
Die erste Regel die Standard - Schriftart für den Körper "Helvetica Neue", Helvetica, Arial gesetzt , sans-serif.
Die zweite Regel des Textes der Standardschriftgröße von 14 Pixeln.
Die dritte Regel ist die Standard-Zeilenhöhe 1,428571429 ist einzustellen.
Die vierte Regel setzt den Standard-Textfarbe auf # 333333.
Endgültige Regel setzt die Standardhintergrundfarbe ist weiß.
Satz-
Verwenden Sie @ font-family-Basis, @ font-size-Basis und @ line-height-Basiseigenschaft als Typografie.
Verbindungs-Art
Legen Sie die Farbe durch die globale Verknüpfung Eigenschaft @ Link-Farbe.
Der Standardstil für einen Link, die folgenden Einstellungen:
a: hover,
a: focus {
color: # 2a6496;
text-decoration: underline;
}
a: focus {
skizzieren: dünn gepunktete # 333;
Umriss: 5px Auto -webkit-Fokus-Ring-Farbe;
outline-Offset: 2px;
}
Also, wenn die Maus über den Link schwebt oder Links, die Sie klicken, wird die Farbe auf # 2a6496. Zur gleichen Zeit wird es ein Unterstrich sein.
Darüber hinaus können Sie die Links klicken, wird es einen Farbcode für die dünne gestrichelte Umriss # 333 sein. Eine weitere Regel ist die Kontur auf 5 Pixel einzustellen breit und für WebKit-basierten Browser hat ein -webkit-Fokus-Ring-Farben - Browser - Erweiterungen. Contour Offset wird auf -2 Pixel eingestellt.
All diese Stile können in der scaffolding.less gefunden werden.
Vermeiden Sie Cross-Browser-Inkonsistenzen
Bootstrap verwenden Normalisieren Cross-Browser - Konsistenz zu bauen.
Normalize.css ist eine kleine CSS-Datei, die in den Standard-Stil HTML-Elemente eine bessere Cross-Browser-Konsistenz bietet.
Container (Container)
<div class="container"> ... </div>
Container - Klasse Bootstrap 3 ist für den Inhalt der Packung Seite. Schauen wir uns diese Datei bootstrap.css .Behälter Klasse einen Blick.
.Behälter {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Durch den obigen Code, der den Behälter linken und rechten Rand (margin-right, margin-left) vom Browser entschieden.
Bitte beachten Sie, dass aufgrund der Polsterung (padding) sind mit fester Breite, Standardcontainer können nicht verschachtelt werden.
.Behälter: vor,
.Behälter: nach {
display: table;
Inhalt: "";
}
Dies erzeugt Pseudo-Elemente. Einstellen der Anzeigetabelle, wird es eine anonyme Tabellenzelle und einen neuen Block - Formatierungskontext erstellen. : Vor Pseudoelement den Rand Zusammenbruch ,: nach Pseudo-Elemente zu verhindern Schwimmer zu löschen.
Wenn conteneditable Attribut in HTML angezeigt wird , da ein Teil der Opera Bug, schaffen einen Raum , um diese Elemente. Dies kann über den Inhalt durchgeführt werden: "" zu reparieren.
.Behälter: nach {
clear: both;
}
Es schafft ein Pseudoelement, und stellt sicher, dass alle schwimmenden Schiff, das alle Elemente enthält.
Bootstrap 3 CSS eine Anwendung als Antwort auf Medienanfragen hat, Medien-Anfragen in verschiedenen Schwellenwerte max-width für den Behälter gesetzt, um die Gittersystem anzupassen.
@media (min-width: 768px) {
.Behälter {
Breite: 750px;
}
Bootstrap Browser / Device Support
Bootstrap ist in der aktuellen Desktop arbeiten gut und das mobile Endgerät Browser.
Ältere Browser möglicherweise nicht unterstützt werden gut.
Die folgende Tabelle Bootstrap die neuesten Versionen von Browsern und Plattformen unterstützen:
| Chrom | Firefox | IE | Oper | Safari | |
|---|---|---|---|---|---|
| androide | JA | JA | Nicht anwendbar | NEIN | Nicht anwendbar |
| iOS | JA | Nicht anwendbar | Nicht anwendbar | NEIN | JA |
| Mac OS X | JA | JA | Nicht anwendbar | JA | JA |
| Windows - | JA | JA | JA * | JA | NEIN |
* Bootstrap Unterstützung für den Internet Explorer 8 und späteren Versionen von IE.