Heim > Artikel > Web-Frontend > So importieren Sie Bootstrap-Dateien

So importieren Sie Bootstrap-Dateien

藏色散人Original: 2019-07-13 11:27:0113110Durchsuche

Bootstrap ist eine Reihe von Open-Source-Front-End-Frameworks für die Website- und Webanwendungsentwicklung, einschließlich HTML-, CSS- und JavaScript-Frameworks, die Typografie, Formulare, Schaltflächen, Navigation und andere verschiedene Komponenten bereitstellen und Javascript-Erweiterungen, die die Entwicklung dynamischer Webseiten und Webanwendungen erleichtern sollen.

So führen Sie Bootstrap-Dateien ein

Es gibt im Allgemeinen zwei Möglichkeiten, Bootstrap einzuführen:

Beziehen Sie sich auf den Online-Bootstrap-Stil,

Laden Sie Bootstrap als Referenz lokal herunter.

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 ist auch nicht erforderlich Berücksichtigung des Pfadproblems beim Zitieren

Nachteile: Sobald der Online-Stil deaktiviert ist, wirkt sich dies auf die Darstellung des gesamten Seitenstils aus

Lokale Referenz

Laden Sie Bootstrap lokal herunter.

Greifen Sie direkt auf die drei URLs im obigen Code zu, um den Code zu erhalten.

Gehen Sie zur offiziellen Website von Bootstrap http://v3.bootcss.com/ und zu JQuery

offizielle Website http://jquery.com/ Laden Sie die entsprechenden Dateien herunter

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.woff2

Die am häufigsten verwendeten sind css/bootstrap.min.css, js/bootstrap.min.js

jquery.min.js kann von der offiziellen JQuery-Website heruntergeladen werden

Schließlich Fügen Sie es einfach in die entsprechende Datei ein.

Vorteile: Stellen Sie sicher, dass der Seitenstil auch unter schlechten Netzwerkbedingungen weiterhin normal angezeigt werden kann

Nachteile: Es muss im Voraus installiert oder heruntergeladen werden und Pfadprobleme müssen beim Zitieren berücksichtigt werden.

Verwandte Empfehlungen: „Bootstrap-Tutorial“

Das obige ist der detaillierte Inhalt vonSo importieren Sie Bootstrap-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So führen Sie Bootstrap in Vue einNächster Artikel：So führen Sie Bootstrap in Vue ein

In Verbindung stehende Artikel

Mehr sehen