English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In diesem Tutorial lernen Sie, wie man Bootstrap 3 Erstellen Sie eine grundlegende Bootstrap-Vorlage mit der kompilierten Version.
Hier erfahren Sie, wie einfach es ist, mit Bootstrap Webseiten zu erstellen. Stellen Sie sicher, dass Sie vor dem Start einen Code-Editor sowie einige Kenntnisse in HTML und CSS haben.
Wenn Sie erst angefangen haben, Web-Entwicklung durchzuführen, bitteHier beginnen Sie mit den Grundlagen von HTML»
Na gut, lassen Sie uns direkt loslegen.
gibt es zwei Versionen zum Downloadkompilierte BootstrapundBootstrap-QuellcodeDateien. Sie könnenHier herunterladen Bootstrap-Dateien
Kompilierte und verkleinerte Versionen von CSS- und JavaScript-Dateien sowie ikonische Schriftartenformate sind enthalten, um schneller und einfacher Web-Entwicklung zu ermöglichen. Der Quellcode enthält alle Originalsource-Dateien von CSS und JavaScript sowie eine lokale Kopie der Dokumentation.
Um ein besseres Verständnis zu erreichen, legen wir den Fokus auf die kompilierten Bootstrap-Dateien. Dies spart Ihnen Zeit, da Sie sich nicht jedes Mal um separate Funktionen und Dateien kümmern müssen. Wenn Sie beschließen, Ihre Website in die Produktionsumgebung zu verschieben, verbessert dies die Website-Leistung und spart wertvolle Bandbreite, da die HTTP-Anfragen und Download-Größen kleiner sind, da die Dateien kompiliert und komprimiert werden können.
Nachdem Sie Bootstrap heruntergeladen haben, entpacken Sie das Zip-Archiv, um die Struktur zu betrachten. Sie finden die folgende Datei-Struktur und Inhalte.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
Wie Sie sehen können, bietet die kompilierte Version von Bootstrap kompilierte CSS- und JS-Dateien (bootstrap.*）， sowie kompilierte und komprimierte CSS- und JS-Dateien (bootstrap.min.*）。
Schriftdateien glyphicons-halflings-regular.*Im Ordner befinden sich vier Schriftdateien(). Diese Schriftdateien enthalten die Glyphicons Halflings-Sammlung250 Symbole.
Hinweis:Das ist die grundlegendeste Form von Bootstrap, die in jedem Webprojekt schnell verwendet werden kann. Beachten Sie, dass Bootstrap-JavaScript-Plugins jQuery enthalten müssen. Sie finden hierhttps://jquery.com/download/Laden Sie die neueste Version von jQuery-Formularen herunter.
Bis jetzt haben Sie die Struktur und den Zweck der Bootstrap-Dateien verstanden, es ist an der Zeit, Bootstrap wirklich zu verwenden. In diesem Abschnitt erstellen wir ein grundlegendes Bootstrap-Template, das alle Inhalte enthält, die wir in der Datei-Struktur erwähnt haben.
Lassen Sie uns schrittweise die folgenden Schritte durchlaufen. Am Ende dieses Tutorials erstellen Sie eine HTML-Datei, die die Nachricht 'Hello world' im Webbrowser anzeigt.
Öffnen Sie Ihren bevorzugten Code-Editor und erstellen Sie eine neue HTML-Datei. Beginnen Sie mit einem leeren Fenster und geben Sie folgenden Code ein, speichern Sie ihn als 'basic.html' auf Ihrem Schreibtisch ab.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-content="IE=edge">-Kompatibel <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>测试看看‹/›
Hinweis:Always include the viewport meta tag in the document section <meta> within <head> to enable touch zoom and ensure correct presentation on mobile devices. It also includes X-content="IE=edge">-Kompatibel mit Edge-Modus
Um diese HTML-Datei als Bootstrap-Vorlage zu setzen, müssen Sie nur die entsprechenden Bootstrap-CSS- und JS-Dateien hinzufügen. Sie sollten die JavaScript-Datei am Ende der Seite hinzufügen-SchließenTags (d.h.) hinzufügen, um die Leistung der Webseite zu verbessern.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-content="IE=edge">-Kompatibel <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> !-- Optional Bootstrap theme --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>测试看看‹/›
Wir sind alle bereit!Nachdem Sie die CSS- und JS-Dateien von Bootstrap sowie die erforderlichen jQuery-Bibliotheken hinzugefügt haben, können Sie mit der Entwicklung jeder Website oder Anwendung mit dem Bootstrap-Framework beginnen.
Speichern Sie die Datei jetzt unter-template.html
Hinweis:Die Erweiterung .html ist wichtig-Einige Texteditoren (z.B. Notepad) speichern die Erweiterung automatisch als .txt.
Öffnen Sie die Datei im Browser. Navigieren Sie zu Ihrer Datei und doppelklicken Sie darauf. Sie wird in Ihrem Standard-Webbrowser geöffnet. (Wenn nicht, öffnen Sie den Browser und ziehen Sie die Datei hinein.)
Wenn Sie nicht selbst die Installation und das Hosting von Bootstrap oder jQuery durchführen möchten, können Sie die kostenlos verfügbaren CDN (Content Delivery Network)-Links verwenden, um die CSS- und JavaScript-Dateien von Bootstrap sowie die JavaScript-Bibliothek von jQuery in das Dokument einbetten.
CDN bietet durch die Verringerung der Ladezeit einen Leistungsvorteil, da sie Bootstrap-Dateien auf mehreren Servern weltweit hosten und die Dateien von dem nächstgelegenen Server liefern, wenn ein Benutzer eine Datei anfordert.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> !-- Optional Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>测试看看‹/›
为了实现子资源完整性(SRI)，在Bootstrap
CDN中增加了完整性和crossorigin属性。它是一种安全功能，通过确保您的网站获取的文件（从CDN或任何位置）在没有意外操作的情况下交付，从而降低来自受损CDN的攻击风险。它的工作原理是允许您提供一个获取的文件必须匹配的加密散列。
属性integrity和crossorigin已添加到引导CDN实现子资源完整性(SRI). Es ist eine Sicherheitsfunktion, die es Ihnen ermöglicht, sicherzustellen, dass alle Dateien, die über die Website übertragen werden (von CDN oder jedem anderen Ort), ohne zufällige Verarbeitung erhalten werden, was das Risiko eines Angriffs auf die CDN verringert. Es funktioniert durch das Erlauben, dass Sie eine verschlüsselte Hash-Wertangabe liefern müssen, die mit der gelesenen Datei übereinstimmen muss.
Hinweis:Wenn die Besucher Ihrer Website bereits von derselben CDN Bootstrap-Dateien heruntergeladen haben, werden diese aus dem Browser-Cache geladen und nicht neu heruntergeladen, was die Ladezeit verkürzt.