Bootstrap 3.0-Lernunterlagen für Anfänger

Als ersten Artikel dieser Studiennotiz beginnen wir wie in anderen Artikeln der Reihe mit einer Einführung in Bootstrap und gehen dann Schritt für Schritt vor.

Vorwort

Im vorherigen Abschnitt wurde Bootstrap hauptsächlich kurz vorgestellt (https://www.jb51.net/web/248352.html). Auf der chinesischen Website http://www.bootcss.com/ ist leicht zu erkennen, dass es jetzt Dokumentationsbeschreibungen für zwei Versionen gibt. Es scheint, dass der Unterschied zwischen den beiden Versionen ziemlich groß ist.

Dem Update von Visual Studio 2013 nach zu urteilen, hat Microsoft jedoch die neue Version von Bootstrap3 zu VS hinzugefügt, sodass es dazu nicht viel zu sagen gibt und Sie sich keine Gedanken über das Erlernen von Bootstrap3 machen müssen.

Laden Sie BootStrap herunter

Die Dokumente auf der offiziellen Website sind sehr detailliert und einfach und es gibt mehrere Möglichkeiten, sie herunterzuladen. Für uns Entwickler ist der einfachste Weg wahrscheinlich der direkte Download der kompilierten und komprimierten CSS- und JavaScript-Dateien, die zwar auch Schriftdateien enthalten, jedoch keine Dokumente und Quellcodedateien. Nach dem Öffnen des entpackten Pakets können Sie feststellen, dass es drei Ordner enthält: css, fonts und js.

Sie können die Dateien in drei Ordnern anzeigen

Dies ist die grundlegendste Bootstrap-Organisation: unkomprimierte Dateien, die direkt in jedem Webprojekt verwendet werden können. Wir stellen minimierte (bootstrap.min.*) und nicht minimierte (bootstrap.*) CSS- und JS-Dateien bereit. Die Schriftsymboldateien stammen von Glyphicons.

Die Datei bower.json listet die von Bootstrap unterstützten jQuery-Versionen auf.

Sie können sehen, dass die Version der abhängigen jQuery-Bibliothek >= 1.9.0 ist.

Besuchen Sie als Nächstes http://jquery.com/

Ich werde die neueste Version 2.03 herunterladen

Sie können direkt über den Internet Explorer auf http://code.jquery.com/jquery-2.0.3.min.js zugreifen.

Speichern Sie es im Ordner „js“ unter dem Ordner „Bootstrap“.

Hinweis: Alle Bootstrap-Plugins erfordern jQuery. Wir empfehlen die Verwendung der komprimierten Version in formellen Projekten, da sie kleiner ist (ohne Kommentare und Leerzeichen).

Bootstrap auf Ihrer Website verwenden

Wir haben eine einfache Basisvorlage erstellt


 Code kopieren
 Der Code lautet wie folgt:

 <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim und Respond.js IE8-Unterstützung von HTML5-Elementen und Medienabfragen --> <!-- WARNUNG: Respond.js funktioniert nicht, wenn Sie die Seite über file:// anzeigen --> <!--[if lt IE 9]>
 <script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
 <script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
 <![endif]--> </head> <body> <h1>Hallo Welt!</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1. Zunächst können wir die Style-Datei von Bootstrap als Webseite referenzieren


 Code kopieren
 Der Code lautet wie folgt:
 <link href="css/bootstrap.min.css" rel="stylesheet" media="bildschirm">

2. Wenn Sie das von der Bootstrap-Architektur bereitgestellte JavaScript-Plugin verwenden müssen, müssen Sie die js-Datei der Architektur mit der Webseite verknüpfen. Wie oben erwähnt, sind JavaScript-Plugins von der jQuery-Bibliothek abhängig, daher müssen wir natürlich auch die jQuery-Bibliotheksdatei verknüpfen und referenzieren


 Code kopieren
 Der Code lautet wie folgt:
 <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script>

3. Der Viewport-<Meta>-Tag, der die Anzeige auf den meisten Mobilgeräten ändern kann, um eine korrekte Zeichnung und Touchscreen-Skalierung sicherzustellen.


 Code kopieren
 Der Code lautet wie folgt:
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">

4. Wir verwenden einige neue Tags in HTML5, aber Browser unter IE9 unterstützen diese Tags nicht und können diesen Tags keine Stile hinzufügen. Um dieses Problem zu beheben, müssen wir die referenzierten Dateien wie folgt verknüpfen


 Code kopieren
 Der Code lautet wie folgt:

 <!--[wenn IE 9]>
 <script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
 <script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
 <![endif]-->

Dies bedeutet, dass diese beiden JS-Dateibibliotheken geladen werden, wenn die IE-Browserversion des Benutzers niedriger als IE9 ist. Nun können diese neuen Tags verwendet und diesen Tags Stile hinzugefügt werden.

Und so wird Ihnen unsere einfachste „Hallo Welt!“-Seite präsentiert.

Zusammenfassen

Wir haben oben auch das responsive Layout aktiviert. Natürlich benötigen manche Websites kein responsives Layout, daher müssen wir dieses Layout manuell deaktivieren. Dieses Dokument enthält auch detaillierte Anweisungen.

Im nächsten Abschnitt lernen wir hauptsächlich das Layout von Bootstrap kennen.

<<: Einführung in Linux-Umgebungsvariablen und Prozessadressraum

>>: Nachteile und sinnvolle Verwendung des MySQL-Datenbankindex

Zusammenfassung der MySql-Import- und Exportmethoden mit mysqldump

Bootstrap 3.0-Lernunterlagen für Anfänger

Zusammenfassung der MySql-Import- und Exportmethoden mit mysqldump

Reine JS-Methode zum Exportieren von Tabellen nach Excel

Was ist Webdesign

Miniprogramm zur Implementierung einer kreisförmigen Text-Scrolling-Animation

Lösung für das Problem, dass die Tomcat-Konfiguration in Intelli Idea nicht gefunden wird

Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code

So konfigurieren Sie Hexo und GitHub zum Binden eines benutzerdefinierten Domänennamens unter Windows 10

Was wir von Googles neuer Benutzeroberfläche (Bilder und Text) lernen können

Awk-Befehlszeile oder Skript, das Ihnen beim Sortieren von Textdateien hilft (empfohlen)

Detaillierte Erklärung des Json-Formats

Artikel empfehlen

So verwenden Sie mysqldump für vollständige und zeitpunktbezogene Sicherungen

CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18

Erklärung des Konzepts und der Verwendung von Like in MySQL

Detaillierte Erklärung des JQuery-Selektors

So stellen Sie einen Redis 6.x-Cluster über Docker bereit

Detaillierte Erläuterung des zeitgesteuerten Protokollschneidens von Nginx

Lösung für das Problem „Fehler beim Konfigurieren von IDEA für die Verbindung zur MySQL-Datenbank“

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

So berechnen Sie den Wert von ken_len im MySQL-Abfrageplan

Detaillierte Erklärung der Docker-Einstiegspunktdatei

Verwendung des Node.js-HTTP-Moduls

Testfragen und Referenzantworten zum Thema Webdesign und Produktion

Lösung zum Vergessen des Root-Passworts für selbst erstelltes MySQL in Alibaba Cloud Linux CentOS 7.2

So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen

Das Problem, dass jquery.form.js den Zugriff im IE verweigert und der Input-Upload-Button aktiv angeklickt werden muss