English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In diesem Kapitel werden wir die Schlüsselkomponenten der Bootstrap-Grundstruktur erläutern, einschließlich unserer besten Praktiken, um Web-Entwicklung besser, schneller und robuster zu gestalten.
Bootstrap verwendet einige HTML5 Elemente und CSS-Attribute. Um dies normal funktionieren zu lassen, müssen Sie HTML verwenden5 Dokumententyp (Doctype). Daher sollten Sie am Anfang eines Bootstrap-Projekts den folgenden Codeabschnitt enthalten.
<!DOCTYPE html> <html> .... </html>
Wenn Sie am Anfang einer von Bootstrap erstellten Webseite HTML nicht verwenden5 DOCTYPE, könnten Sie mit verschiedenen Browser-Display-Problemen konfrontiert werden, und möglicherweise auch mit Inkompatibilitäten in bestimmten Szenarien, was dazu führen könnte, dass Ihr Code nicht bestanden wird, W3C-Standard-Zertifizierung.
Mobile First ist Bootstrap 3 größte Veränderung.
in früheren Bootstrap-Versionen (bis 2.x), Sie müssen eine andere CSS manuell zitieren, um das gesamte Projekt so zu gestalten, dass es mobile Geräte unterstützt.
Jetzt ist es anders, Bootstrap 3 Die Standard-CSS unterstützt bereits mobile Geräte freundlich.
Bootstrap 3 Ziel ist es, mobile Geräte zu priorisieren, gefolgt von Desktop-Geräten. Dies ist tatsächlich ein sehr aktueller Wandel, da immer mehr Benutzer mobile Geräte verwenden.
Um sicherzustellen, dass Websites, die mit Bootstrap entwickelt werden, für mobile Geräte freundlich sind, müssen Sie sicherstellen, dass angemessene Zeichnungen und Berührungsskalierung hinzugefügt werden, indem viewport meta Tag, wie folgt gezeigt:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width Eigenschaft kontrolliert die Breite des Geräts. Angenommen, Ihre Website wird von Geräten mit verschiedenen Bildschirmauflösungen betrachtet, dann setzen Sie sie auf device-width kann sicherstellen, dass sie korrekt auf verschiedenen Geräten angezeigt wird.
initial-scale=1.0 Stellen Sie sicher, dass die Seite beim Laden 1:1 im Verhältnis präsentiert wird, gibt es keine Zoomfunktion.
In mobilen Browsern, indem man viewport meta zu dem user-scalable=no kann man die Zoomfunktion (Zoomen) deaktivieren.
Unter normalen Umständen,maximum-scale=1.0 mit user-scalable=no zusammen verwendet. So kann die Zoomfunktion deaktiviert werden, und der Benutzer kann nur die Seite scrollen, was Ihren Website eine native App ähnliche Optik verleiht.
Beachten Sie, dass wir diese Methode nicht für alle Websites empfehlen, sondern es immer von Ihrem eigenen Fall abhängt!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." alt="Responsive Bild">
durch Hinzufügen img-responsive class ermöglicht es Bootstrap 3 durch die die Bilder eine bessere Unterstützung für das responsive Layout bieten.
Lassen Sie uns nun schauen, welche CSS-Eigenschaften diese class enthält.
In den folgenden Codezeilen können Sie sehenimg-responsive class verleiht den Bildern eine max-width: 100%; und height: auto; Eigenschaften erlauben es, Bilder im Verhältnis zu skalieren, ohne ihre Größen des übergeordneten Elements zu überschreiten.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}Dies zeigt an, dass die betreffenden Bilder als block. Wenn Sie die Eigenschaft display eines Elements auf block setzen, wird es als Block-Element angezeigt.
einstellen height: autodeterminiert die Höhe der relevanten Elemente durch den Browser.
einstellen max-width for 100% überschreibt jede durch das Attribut width angegebene Breite. Dies macht das Bild besser für responsive Layouts geeignet.
Wenn Sie möchten, dass Bilder, die .img-Bilder in der Klasse responsive horizontal zentriert, verwenden Sie bitte .center-block-Klasse, verwenden Sie nicht .text-center.
Bootstrap 3 Verwenden Sie body {margin: 0;} um die Margen von body zu entfernen.
Siehe unten für die Einstellungen von body:
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 Standardstil der Schriftart von body fest als "Helvetica Neue", Helvetica, Arial, sans-serif.
Die zweite Regel legt die Standardgröße der Textschrift auf 14 Pixel.
Die dritte Regel legt die Standardzeilenhöhe auf 1.428571429.
Die vierte Regel legt die Standardtextfarbe auf #333333.
Die letzte Regel legt die Standardhintergrundfarbe auf weiß fest.
Verwenden Sie @font-family-base, @font-size-base und @line-height-Die base-Eigenschaft als Layout-Stil.
durch das Attribut @link-Farbe setzt die globale Farbe der Links.
Für die Standardstile von Links ist folgendes festgelegt:
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;
}Daher wird die Farbe eines Links, der über dem Cursor steht oder auf dem geklickt wurde, auf #2a6496zeigen. Gleichzeitig wird eine Unterstreichung angezeigt.
Darüber hinaus wird die Farbe eines geklickten Links eine Farbcode von #333 Eine dünne gestrichelte Kontur wird festgelegt. 5 Pixel breit und für Browser basierend auf Webkit. -webkit-focus-ring-color des Browser-Erweiterungs. -2 Pixel.
Alle diese Stile finden Sie in scaffolding.less.
Bootstrap verwendet Normalize um Cross-Browser-Konsistenz zu schaffen.
Normalize.css ist eine sehr kleine CSS-Datei, die in den Standard样式 von HTML-Elementen eine bessere Cross-Browser-Konsistenz bietet.
<div> ... </div>
Bootstrap 3 sehen container class wird verwendet, um den Inhalt der Seite einzubetten. Lassen Sie uns nun diesen .container class。
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Durch den obigen Code werden die linken und rechten Außenabstände (Margin-right、margin-left）wird von dem Browser entschieden.
Bitte beachten Sie, dass der Innenabstand (Padding) fest ist, daher ist der Container standardmäßig nicht einsetzbar.
.container:before,
.container:after {
display: table;
content: " ";
}Dies erzeugt Pseudo-Elemente. Setzen Sie display for table，erzeugt eine anonyme table-cell und einen neuen Blockformatierungsrahmen.:before Pseudo-Elemente verhindern die Kollapsung der oberen Abstandshalter.:after Pseudo-Elemente, um den Float zu bereinigen.
wenn conteneditable Das Attribut appears in HTML, aufgrund einiger Opera-Bugs, ein Leerzeichen um den oben genannten Element zu erstellen. Dies kann durch die Verwendung content: " " um zu beheben.
.container:after {
clear: both;
}es erstellt einen Pseudo-Element und stellt sicher, dass alle Container alle floatenden Elemente enthalten.
Bootstrap 3 CSS hat eine beantragte Reaktionsmediumabfrage, die für den container in verschiedenen Medienabfrage-Schwellenwerten max-width，um dem Rastersystem zu entsprechen.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap funktioniert hervorragend in den neuesten Desktop- und mobilen Browsern.
旧的浏览器可能无法很好地支持。
下表为 Bootstrap 支持最新版本的浏览器和平台：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不适用 | 不适用 | 不适用 |
| iOS | YES | 不适用 | 不适用 | 不适用 | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES* | YES | 不适用 |
* Bootstrap 支持 Internet Explorer 8 以及更高版本的 IE 浏览器。