So installieren Sie Bootstrap-Bootstrap-Tutorial-php.cn

So installieren Sie Bootstrap

藏色散人

Freigeben： 2023-01-13 00:22:15

Original

17949 Leute haben es durchsucht

bootstrap Installationsmethode: 1. Laden Sie die Bootstrap-Datei von der offiziellen Bootstrap-Website herunter und verwenden Sie dann 3. Installieren Sie über npm; Composer Einfach installieren.

So installieren Sie Bootstrap

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootstrap-Version 3.3.7, Dell G3-Computer.

Verwandte Tutorial-Empfehlungen: „Bootstrap-Tutorial“

Bootstrap ist ein beliebtes Framework in der Front-End-Entwicklung, einfach und flexibel. Es basiert auf HTML, CSS und JavaScript definiert Seitenelemente, CSS definiert das Seitenlayout und JavaScript ist für die Reaktion der Seitenelemente verantwortlich. Bootstrap kapselt HTML, CSS und JavaScript in funktionale Komponenten, was einfach und grob zu verwenden ist.

Wie installiere ich Bootstrap?

1. Laden Sie die Bootstrap-Datei von der offiziellen Bootstrap-Website herunter und verwenden Sie dann Bootstrap herunterladen: Laden Sie die vorkompilierte und komprimierte Version von Bootstrap herunter (Dokumentation und Quellcode nicht enthalten).

Code herunterladen: Der Bootstrap-Quellcode, wie er auf der offiziellen Website vorgestellt wird, erfordert die Kompilierung von Less-Dateien und einige Installationen.

Wenn Sie neu bei Bootstrap sind, wird empfohlen, das erste herunterzuladen und direkt zu verwenden. So installieren Sie Bootstrap

Dateistruktur

Die heruntergeladene Datei ist ein komprimiertes Paket. Nachdem wir sie dekomprimiert haben, können wir die Struktur der Datei sehen.

So installieren Sie Bootstrap

html Verwendung von Bootstrap

HTML Die Verwendung von Bootstrap erfordert die Bezugnahme auf die Dateien jquery.js, bootstrap.min.js und bootstrap.min.css, um eine normale HTML-Datei in eine Datei umzuwandeln, die Bootstrap verwendet.

Methode 1: Zusammenfügen der HTML- und Bootstrap-Ordner

Wir haben den vorbearbeiteten Bootstrap heruntergeladen und dekomprimiert, um den Bootstrap-Ordner zu erhalten, und verwenden Sie dann relative Pfade, um auf jquery js zu verweisen , die Dateien „bootstrap.min.js“ und „bootstrap.min.css“ reichen aus.

Methode 2: HTML-Referenzen jquery.js, bootstrap.min.js und bootstrap.min.css im CDN

So installieren Sie Bootstrap Viele CDN-Dienste haben diese Dateien bereits hochgeladen, rufen Sie sie einfach direkt auf.

Zum Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>在线尝试 Bootstrap 实例</title> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
  
  <h1>Hello, world!</h1> 
  
</body> 
</html>

Nach dem Login kopieren

Darüber hinaus können Sie auch die folgenden CDN-Dienste nutzen:

Empfohlen für den inländischen Gebrauch: https://www.staticfile.org/

Empfohlen für den internationalen Gebrauch: https://cdnjs. com/

2. Installation über Bower

Sie können Bootstraps Less-, CSS-, JavaScript- und Schriftartdateien auch über Bower installieren und verwalten.

$ bower install bootstrap

Nach dem Login kopieren

3. Installation über npm

Sie können Bootstrap auch mit dem npm-Tool installieren:

$ npm install bootstrap@3

Nach dem Login kopieren

require('bootstrap') Die Funktion des Codes besteht darin, alle jQuery-Plug-Ins von Bootstrap zu laden. Unter anderem exportiert das Bootstrap-Modul selbst nichts. Sie können ein einzelnes Bootstrap-Plug-in manuell laden, indem Sie die /js/*.js-Dateien in das Verzeichnis der obersten Ebene des Installationspakets laden.

Die package.json-Datei von Bootstrap enthält einige zusätzliche Metadaten:

less – der Pfad zur Eintrags-Less-Datei des Bootstrap-Quellcodes

style – der Pfad zur unkomprimierten CSS-Datei von Bootstrap

4. Installation über Composer

Sie können auch Installieren Sie das Bootstrap-Installationspaket über Composer (offizielle chinesische Website: Composer Chinese website), das Less-, CSS-, JavaScript- und Schriftartendateien enthält:

$ composer require twbs/bootstrap

Nach dem Login kopieren

Was Sie beim Kompilieren von Less/Sass-Quellcode beachten sollten

Bootstrap verwendet Autoprefixer, um bestimmte automatisch voranzustellen CSS Fügen Sie herstellerspezifische Präfixe zu Attributen hinzu. Wenn Sie Bootstrap aus der Less/Sass-Quelle kompilieren und nicht das mit Bootstrap gelieferte Gruntfile verwenden, müssen Sie Autoprefixer in Ihre Kompilierungstools und -prozesse integrieren. Wenn Sie unsere vorkompilierten Bootstrap-Dateien oder die von uns bereitgestellten Gruntfile-Dateien verwenden, besteht kein Grund zur Sorge, wir haben dies bereits für Sie erledigt.

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