Bootstrap 3.0 Studiennotizen CSS-bezogene Ergänzung

Die wesentlichen Inhalte dieses Artikels sind wie folgt:

1. Browserunterstützung

2. Bilder

3. Reaktionsfähige Tools

4. Aufgetretene Probleme

5. Zusammenfassung

Browserunterstützung

Bootstrap zielt darauf ab, auf den neuesten Desktop- und Mobilbrowsern die beste Leistung zu erzielen. Dies bedeutet, dass einige Komponenten auf älteren Browsern möglicherweise etwas anders aussehen, die Funktionalität jedoch weiterhin erhalten bleibt.

Insbesondere unterstützt Bootstrap die neuesten Versionen dieser Browser:

Bootstrap funktioniert auch gut auf Chromium, Chrome für Linux, Firefox für Linux und Internet Explorer 7, obwohl Bootstrap diese nicht offiziell unterstützt.

Internet Explorer 8 und 9 werden unterstützt. Sie sollten sich jedoch darüber im Klaren sein, dass viele CSS3-Eigenschaften und HTML5-Elemente – beispielsweise abgerundete Rechtecke und Schlagschatten – definitiv nicht unterstützt werden. Darüber hinaus benötigt Internet Explorer 8 Respond.j, um Medienabfragen zu unterstützen.

Bild

Durch Hinzufügen verschiedener Klassen zum <img>-Element können Sie dessen Stil einfach ändern.

Sie sollten wissen, dass Internet Explorer 8 keine abgerundeten Rechtecke unterstützt.

Übrigens, responsive Bilder

Durch Hinzufügen der Klasse .img-responsive können Sie Bilder in Bootstrap 3 benutzerfreundlicher für responsive Layouts machen. Das Wesentliche besteht darin, dem Bild die Attribute „max-width: 100 %“ und „height: auto“ zu geben, damit das Bild proportional skaliert werden kann und die Größe des übergeordneten Elements nicht überschreitet.

Reaktionsfähige Werkzeuge

Beschleunigen Sie die Entwicklung für Mobilgeräte, indem Sie diese Dienstprogrammklassen verwenden, um Seiteninhalte basierend auf dem Bildschirm und verschiedenen Medienabfragen anzuzeigen oder auszublenden.

Versuchen Sie, diese Klassen zu verwenden, und vermeiden Sie die Erstellung unterschiedlicher Versionen derselben Site, um sie für unterschiedliche Geräte zu optimieren. Das responsive Tool funktioniert derzeit nur mit Elementen auf Blockebene und unterstützt keine Inline-Elemente oder Tabellenelemente.

Verfügbare Kurse

Durch die einzelne oder kombinierte Verwendung der folgenden Klassen können Sie Seiteninhalte für unterschiedliche Bildschirmgrößen ausblenden oder anzeigen.

Druckklasse

Verwenden Sie wie bei regulären responsiven Klassen die folgenden Klassen, um Inhalte für Drucker auszublenden oder anzuzeigen.

Testfälle

Passen Sie die Größe Ihres Browserfensters an oder laden Sie diese Seite auf verschiedenen Geräten, um die oben genannten Tool-Klassen zu testen.

Aufgetretene Probleme

1. Browserkompatibilität: Diese wurde bereits eingeführt. Im Moment verwende ich hauptsächlich IE10, die neueste Version von Chrome und die neueste Version von FireFox.

2. Wird die CSS-Datei neu geladen, wenn sich die Browserbreite ändert: Meine Antwort lautet derzeit nein, da nur die für die aktuelle Größe passende Stilklasse neu gelesen wird. (Ich weiß nicht, ob diese Erklärung plausibel ist)

3.PrntScr-Siebdruck, ich habe es noch nicht im Bootstrap gefunden. Wenn es jemand irgendwo findet, lassen Sie es mich bitte wissen.

4. Ich weiß nicht, ob jeder require.js kennt. Es sollte hauptsächlich verwendet werden, um die Geschwindigkeit beim Surfen im Internet zu verbessern, aber ich weiß nicht, wie man es verwendet und wie man es mit Bootstrap verwendet.

5. Die Rolle von !important: Dies sollte vielen Front-End-Belagerungsingenieuren sehr klar sein.

6.Bootstrap.js-Referenz: Denken Sie daran, zuerst auf die jQuery-Bibliothek zu verweisen, und stellen Sie sicher, dass die Reihenfolge klar ist.

Natürlich gibt es bestimmt noch weitere Fragen, aber die fallen mir gerade nicht ein, also merke ich mir vorerst einfach diese 6.

Zusammenfassen

Ich habe einfach das Bootstrap-CSS geklärt. Verstehen Sie viele Stilklassen, einfache Kombinationen und Anwendungen sowie die zu verwendenden Elemente. Dann können Sie eine gute Benutzeroberfläche entwerfen, ohne viel über das Frontend zu wissen. Natürlich kommen später bessere Dinge, wie Bootstrap Component und JavaScript-Plugins, die die Front-End-Entwicklung einfacher und leistungsfähiger machen.