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

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Bootstrap 3.0-Lernunterlagen für Anfänger

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Tabellen-Paging-Funktion implementiert durch Vue2.0+ElementUI+PageHelper

Das Balkendiagramm von Vue + Echart realisiert Statistiken zu Epidemiedaten

Mehrere Navigationsrichtungen, die in Zukunft beliebt sein werden

MySQL-Initialisierungskennwortvorgang unter Mac

So verbergen und fälschen Sie die Versionsnummer in Nginx

Detaillierte Analyse der MySQL-Sperrblockierung

Detaillierte Erklärung zur Verwendung von Bild-Tags in HTML

Detaillierte Erklärung des TARGET-Attributs des HTML-Hyperlink-Tags A

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Artikel empfehlen

JavaScript-Beispielcode zum Ermitteln, ob eine Datei vorhanden ist

Einführung in die Wissenspunkte MySql-Tabelle, Datenbank, Sharding und Partitionierung

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

Der gesamte Prozess der Installation von Gogs mit Pagoda Panel und Docker

So installieren und konfigurieren Sie GitLab unter Ubuntu 20.04

Zusammenfassung der Verwendung von clipboard.js

Detaillierte Erklärung der Beziehung zwischen Vue und VueComponent

Verwenden Sie js, um js-Funktionen in Iframe-Seiten aufzurufen

Ein ausführliches Tutorial zur Master-Slave-Replikation und Lese-/Schreibtrennung der MySQL-Datenbank

Docker unter Linux installieren (sehr einfache Installationsmethode)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

Einige Hinweise zum Ändern des innodb_data_file_path-Parameters von MySQL

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels

Beheben Sie den Fehler während der Verbindungsausnahme in Docker