Heim >Web-Frontend >Bootstrap-Tutorial >So verweisen Sie auf Bootstrap in HTML
So verweisen Sie auf Bootstrap in HTML
- 藏色散人Original
- 2020-11-18 10:28:097524Durchsuche
So referenzieren Sie Bootstrap in HTML: 1. Verwenden Sie die Methode „link rel“, um Bootstrap online zu referenzieren. 2. Laden Sie Bootstrap lokal herunter, platzieren Sie die erforderlichen Dateien unter dem Projekt und fügen Sie sie dann in die entsprechende Datei ein.
Empfohlen: „Bootstrap-Video-Tutorial“
Einführung von Bootstrap
Es gibt im Allgemeinen zwei Möglichkeiten, Bootstrap zu verwenden:
Bezogen auf den Online-Bootstrap-Stil,
Bootladen Falle vor Ort.
Online-Zitat
Die Grundvorlage lautet wie folgt:
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap引入</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>Vorteile: Bootstrap muss nicht lokal installiert werden und Pfadprobleme müssen beim Zitieren nicht berücksichtigt werden
Nachteile: Sobald der Online-Stil nicht verfügbar ist, wird er beeinträchtigt die Darstellung des gesamten Seitenstils
Lokale Referenz
Laden Sie Bootstrap lokal herunter.
Greifen Sie direkt auf die 3 URLs im obigen Code zu, um den Code zu erhalten
Gehen Sie zum Herunterladen auf die offizielle Website von Bootstrap http://v3.bootcss.com/ und die offizielle Website von JQuery
http://jquery.com/ die entsprechenden Dateien
Platzieren Sie die erforderlichen Dateien zum einfachen Nachschlagen unter dem Projekt
Die Verzeichnisstruktur von Bootstrap ist wie folgt:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2Die am häufigsten verwendeten sind css/bootstrap.min.css, js/bootstrap.min.js
jquery.min.js finden Sie unter JQuery von der offiziellen Website herunterladen
Fügen Sie es abschließend einfach in die entsprechende Datei ein.
Vorteile: Stellen Sie sicher, dass der Seitenstil auch bei schlechten Netzwerkbedingungen weiterhin normal angezeigt werden kann.
Nachteile: Es muss im Voraus installiert oder heruntergeladen werden, und Pfadprobleme müssen bei der Referenzierung berücksichtigt werden.
Das obige ist der detaillierte Inhalt vonSo verweisen Sie auf Bootstrap in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!