Schlüsselpunkte für das Lernen:
1. Stiefelstrap -Übersicht
2. Stiefelstrap -Funktionen
3. Stiefelstruktur
4. Erstellen Sie die erste Seite
5. Verschiedene Vorbereitungen zum Lernen
In dieser Lektion erfahren wir hauptsächlich die Geschichte, Funktionen, Verwendungsmöglichkeiten von Boostrap und warum Boostrap für die Entwicklung unserer Webprojekte ausgewählt wurde.
eins. Bootstrap -Übersicht
Bootstrap ist ein Open -Source -Framework, das auf HTML, CSS und JavaScript basiert, das von zwei technischen Ingenieuren von Twitter (dem weltweit größten Weibo) entwickelt wurde. Der Framework -Code ist einfach und visuell schön und kann verwendet werden, um die Webseitenanforderungen basierend auf PC- und Mobilgeräten schnell zu erstellen.
Im Juni 2010 lösten Ingenieure in Twitter das Problem der Zusammenarbeit und Vereinigung bei Aufgaben mit Front-End-Entwicklungen. Nach verschiedenen Lösungen wurde Bootstrap endlich bestätigt und im August 2011 veröffentlicht. Nach langer Zeit der Iteration und des Upgrades hat sich das ursprüngliche CSS-gesteuerte Projekt zu einem Open-Source-Framework mit einem multifunktionalen Web-Front-End mit vielen JavaScript-Plug-Ins und Icons entwickelt.
Der wichtigste Teil von Bootstrap ist das reaktionsschnelle Layout, das mit dem Seitenzugriff auf PC, PAD und Mobiltelefonen kompatibel sein kann.
Bootstrap -Download und Demonstration:
Offizielle Website der Inlandsdokument -Übersetzung: http://www.bootcss.com
PIAOCHENGEG Web Club Offizielle Website: http://www.ycku.com
zwei. Bootstrap -Funktionen
Bootstrap ist aufgrund seiner sehr praktischen Funktionen und Funktionen sehr beliebt. Die Hauptkernfunktionen sind wie folgt:
(1). Cross-Device, Cross-Browser
Es ist mit allen modernen Browsern kompatibel, einschließlich der kritisierten IE7 und 8. Natürlich berücksichtigt dieser Kurs nicht mehr Browser unter IE9.
(2). Responsive Layout
Es kann nicht nur Anzeigen auf verschiedenen Auflösungen auf der PC -Seite unterstützen, sondern auch reaktionsschnelle Switching -Anzeigen von mobilen Pads, Mobiltelefonen und anderen Bildschirmen unterstützt.
(3). Umfassende Komponenten zur Verfügung gestellt
Bootstrap bietet hoch praktische Komponenten, darunter: Navigation, Beschriftungen, Symbolleisten, Schaltflächen und andere Komponenten, die für Entwickler bequem sind.
(4). Eingebautes JQuery-Plug-In
Bootstrap bietet viele praktische JQuery-Plug-Ins, die den Entwicklern die Implementierung verschiedener allgemeiner Spezialeffekte im Web ermöglichen.
(5). Unterstützen Sie HTML5 und CSS3
HTML5 -Semantik -Tags und CSS3 -Eigenschaften werden gut unterstützt.
(6). Unterstützen Sie weniger dynamischen Stil
Weniger verwendet Variablen, Verschachtelung und Operationen, um schnellere und flexiblere CSS zu schreiben. Es funktioniert gut mit Bootstrap.
drei. Bootstrap -Struktur
Wenn Sie die Dokumentstruktur von Boostrap verstehen möchten, müssen Sie sie zunächst auf der offiziellen Website herunterladen. Die Bootstrap -Download -Adresse lautet wie folgt:
Bootstrap -Download -Adresse: http://v3.bootcss.com/ (Produktionsumgebung auswählen, v3.3.4)
Nach der Dekompression präsentiert das Verzeichnis eine solche Struktur:
Bootstrap/
├── CSS/
│├── Bootstrap.css
│├── Bootstrap.css.map
│├── Bootstrap.min.css
│├── Bootstrap-themen.css
│├── Bootstrap-themen.css.map
│└── Bootstrap-themen.min.css
├── js/
│├── Bootstrap.js
│└── Bootstrap.min.js
└── Schriftarten/
├── Glyphicons-Halflings-Regular.eot
├── Glyphicons-Halflings-Regular.svg
├── Glyphicons-Halflings-Regular.ttf
├── Glyphicons-Halflings-Regular.woff
└── Glyphik-Halflings-Regular.WOFF2
Es ist hauptsächlich in drei Kernverzeichnisse unterteilt: CSS (Stil), JS (Skript) und Schriftarten (Schriftart).
1. Im CSS -Verzeichnis gibt es vier Dateien mit CSS -Suffix. Diejenigen, die das Wort min enthalten, sind komprimierte Versionen, die im Allgemeinen verwendet werden. Diejenigen, die nicht enthalten, sind Dateien ohne Komprimierung, und Sie können lernen, den CSS -Code zu verstehen. Während die Datei mit MAP -Suffix eine CSS -Quellcode -Mapping -Tabelle ist, die in bestimmten Browser -Tools verwendet wird.
2.JS -Verzeichnis enthält zwei Dateien, die unkomprimierte und komprimierte JS -Dateien sind.
3.Fonts Verzeichnis enthält Schriftdateien mit unterschiedlichen Suffixen.
Vier. Erstellen Sie die erste Seite
Wir erstellen eine HTML5 -Seite, stellen die Kerndatei von Bootstrap ein und testen dann, ob sie normal angezeigt wird.
// Die erste Bootstrap <! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> Bootstrap Einführung </title> <link rel = "styleSheet" href = "css/bootstrap.min src = "js/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
fünf. Verschiedene Vorbereitungen für das Lernen
1. Entwicklungstools. Wir verwenden Sublime Text3 als Entwicklungstool für Bootstrap und installiert das Plug-In der EMMET-Codegenerierung.
2. Die Testwerkzeuge sind neben herkömmlichen modernen Browsern zweitens als mobile Testwerkzeuge. Wir verwenden Opera Mobile Emulator und Chrome's Mobile Web Testing Tools.
3. Die erforderliche Stiftung ist mindestens das Fundament des HTML5 -Staffel -1 -Kurs. Bootstrap hat viele JQuery-Plug-Ins eingebaut. Obwohl es viel einfacher ist als JQuery oder JS selbst. Wenn Sie die Grundlage von JQuery- und JS-Kursen haben, werden Sie ein tieferes Verständnis Ihres Lernens haben.
V.
Das obige ist die relevante Kenntnis des Bootstrap -Frameworks, das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird für Sie hilfreich sein!