Latest web development tutorials

Bootstrap 3 CSS Übersicht

Ziel

In diesem Tutorial haben wir die Bootstrap 3 CSS Punkte diskutiert. Als nächstes werden wir Bootstrap 3 arbeiten mehrere wichtige Faktoren zu erklären.

HTML 5 Doctype (Doctype)

Bootstrap 3 verwendet, um einige Elemente von HTML5 und CSS-Attribute. Um für diese zu arbeiten, müssen Sie die HTML5-Dokumenttyp (Doctype) zu verwenden. 

<! DOCTYPE html>
<Html lang = "de">
  ...
</ 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

Dies ist wahrscheinlich 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, um das Projekt gemeinsam mit dem Hauptmobilgerät freundlichen CSS zu machen. Nicht mehr, Bootstrap 3 default CSS selbst ist mobiles Gerät freundlich.

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 = "Ansichtsfenster" content = "width = device-width, initial-scale = 1.0"?>

width Eigenschaft width Steuerungstechnik. Angenommen , Ihre Website wird mit einer anderen Bildschirmauflösung Geräte zu durchsuchen, stellen Sie ihn dann auf Gerätebreite , um sicherzustellen , es macht richtig auf verschiedenen Geräten.

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, oder hängt von Ihren eigenen Umstände!

Responsive Bild

Durch das Hinzufügen img-responsive - Klasse können Bootstrap 3 Bilder ansprechenden Layout zu unterstützen , die freundlicher ist. Schauen wir uns diese Klasse enthält, was Eigenschaft css. Sein Wesen ist das Bild ein max-width zu geben: 100%; und height: auto; Eigenschaft Skalierung erlaubt, nicht größer als die Größe des übergeordneten Elements. 

.img-responsive {
  display: inline-block;
  height: auto;
  max-Breite: 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

Bootstrap 3 unter Verwendung von body {margin: 0;} , um den Körper der Margen zu entfernen.

Betrachten Sie den folgenden Satz von relevanten 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ß.

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 3, wie schon der Vorgänger-Version, verwenden Sie das Normalisieren, Cross-Browser-Konsistenz zu schaffen.

Container

Container - Klasse Bootstrap 3 ist für den Inhalt der Packung Seite. Schauen wir uns die folgende Klasse einen Blick 

.Behälter {
  margin-right: auto;
  margin-left: auto;
}

Durch den obigen Code, die linken und rechten Rand des Behälters durch den Browser zu entscheiden. 

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