Kapitel 1: Erste Einführung in Bootstrap_javascript-Fähigkeiten

Lernpunkte:

1.Bootstrap-Übersicht

2.Bootstrap-Funktionen

3.Bootstrap-Struktur

4. Erstellen Sie die erste Seite

5. Verschiedene Vorbereitungen zum Lernen

In dieser Lektion verstehen wir hauptsächlich die Geschichte, Eigenschaften und Verwendungsmöglichkeiten von Boostrap und warum wir Boostrap für die Entwicklung unserer Webprojekte wählen.

1. Bootstrap-Übersicht

Bootstrap ist ein Open-Source-Framework, das auf HTML, CSS und JavaScript basiert und von zwei technischen Ingenieuren von Twitter (dem weltweit größten Weibo) entwickelt wurde. Der Framework-Code ist prägnant und optisch ansprechend und kann zum schnellen und einfachen Erstellen von Webseitenanforderungen basierend auf PCs und Mobilgeräten verwendet werden.

Im Juni 2010 arbeiteten Ingenieure bei Twitter daran, das Problem der Zusammenarbeit und Vereinheitlichung bei Front-End-Entwicklungsaufgaben zu lösen. Nachdem verschiedene Optionen durchgegangen waren, wurde Bootstrap schließlich fertiggestellt und im August 2011 veröffentlicht. Nach einer langen Zeit iterativer Upgrades hat es sich von einem anfänglichen CSS-gesteuerten Projekt zu einem multifunktionalen Web-Front-End-Open-Source-Framework mit vielen integrierten JavaScript-Plug-Ins und Symbolen entwickelt.

Der wichtigste Teil von Bootstrap ist sein responsives Layout, das mit dem Seitenzugriff auf PC, PAD und Mobiltelefonen kompatibel sein kann.

Bootstrap-Download und Demo:

Offizielle Website für die Übersetzung inländischer Dokumente: http://www.bootcss.com

Offizielle Website des Laicheng Web Club: http://www.ycku.com

2. Bootstrap-Funktionen

Bootstrap erfreut sich aufgrund seiner sehr nützlichen Funktionen und Features großer Beliebtheit. Die wichtigsten Kernfunktionsmerkmale sind wie folgt:

(1) Geräteübergreifend, browserübergreifend

Kompatibel mit allen modernen Browsern, einschließlich der stärker kritisierten IE7 und 8. Browser unter IE9 werden in diesem Kurs natürlich nicht mehr berücksichtigt.

(2). Responsives Layout

Es unterstützt nicht nur Anzeigen mit verschiedenen Auflösungen auf der PC-Seite, sondern unterstützt auch die reaktionsschnelle Umschaltanzeige auf mobilen PADs, Mobiltelefonen und anderen Bildschirmen.

(3). Umfangreiche Komponenten bereitgestellt

Bootstrap bietet äußerst praktische Komponenten, darunter Navigation, Beschriftungen, Symbolleisten, Schaltflächen und eine Reihe von Komponenten, die für Entwickler bequem aufzurufen sind.

(4). Integriertes jQuery-Plug-in

Bootstrap bietet viele praktische JQuery-Plug-Ins, die es Entwicklern erleichtern, verschiedene gängige Spezialeffekte im Web zu implementieren.

(5). Unterstützt HTML5, CSS3

HTML5-semantische Tags und CSS3-Attribute werden gut unterstützt.

(6). Unterstützen Sie den WENIGER dynamischen Stil

LESS verwendet gemischte Codierung mit Variablen, Verschachtelungen und Operationen, um schnelleres und flexibleres CSS zu schreiben. Es lässt sich gut mit Bootstrap entwickeln.

3. Bootstrap-Struktur

Wenn Sie zunächst die Dokumentstruktur von Boostrap verstehen möchten, müssen Sie es lokal von der offiziellen Website herunterladen. Die Bootstrap-Download-Adresse lautet wie folgt:

Bootstrap-Download-Adresse: http://v3.bootcss.com/ (wählen Sie die Produktionsumgebung, v3.3.4)

Nach der Dekomprimierung hat das Verzeichnis die folgende Struktur:

bootstrap/
├── css/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
│├── bootstrap-theme.css.map
│└── bootstrap-theme.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
└── glyphicons-halflings-regular.woff2

ist hauptsächlich in drei Kernverzeichnisse unterteilt: CSS (Stil), JS (Skript) und Schriftarten (Schriftarten).

1.css Es gibt vier Dateien mit dem Suffix „css“ im Verzeichnis. Die Dateien, die das Wort „min“ enthalten, sind im Allgemeinen unkomprimiert und Sie können mehr über „css“ erfahren Code; und die Dateien mit dem Kartensuffix sind Die Datei ist eine CSS-Quellcode-Zuordnungstabelle, die in einigen spezifischen Browser-Tools verwendet wird.

2.js-Verzeichnis enthält zwei Dateien, eine unkomprimierte und eine komprimierte js-Datei.

3.fonts-Verzeichnis enthält Schriftartdateien mit unterschiedlichen Suffixen.

4. Erstellen Sie Ihre erste Seite

Wir erstellen eine HTML5-Seite, importieren die Kerndateien von Bootstrap und testen dann, ob sie normal angezeigt wird.

//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap 介绍</title>
　　<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
　　<button class="btn btn-info">Bootstrap</button>
　　<script src="js/jquery.min.js"></script>
　　<script src="js/bootstrap.min.js"></script>
</body>
</html> 

5. Verschiedene Vorbereitungen für das Studium

1. Entwicklungstools: Wir verwenden Sublime Text3 als Entwicklungstool für Bootstrap und haben das Emmet-Codegenerierungs-Plug-in installiert

2. Testtools, zusätzlich zu herkömmlichen modernen Browsern, das zweite ist ein mobiles Testtool. Wir verwenden Opera Mobile Emulator und das mobile Webtesttool.

3. Die erforderliche Grundlage ist zumindest die Grundlage des HTML5-Kurses. Bootstrap verfügt über viele integrierte jQuery-Plug-ins, obwohl es viel einfacher zu verwenden ist als jQuery oder JS selbst, wenn Sie über die Grundlagen verfügen jQuery- und JS-Kurse, dann werden das Lernen und das Verständnis tiefer sein;

4. Kursauflösung: Für Grundkurse verwenden wir 1024 x 768 zur Aufzeichnung, aber einige spezielle Teile, wie z. B. Responsive- und Projektkurse, erfordern eine hochauflösende Aufzeichnung und werden mit 1440 x 900 aufgezeichnet.

Das Obige ist das relevante Wissen über das Bootstrap-Framework, das Ihnen der Herausgeber vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein!