So importieren Sie Bootstrap

Es gibt vier Möglichkeiten, das Bootstrap-Framework zu importieren: Fügen Sie HTML-Code über CDN hinzu. Verwenden Sie npm, um die JavaScript-Dateien zu installieren und zu importieren. Laden Sie Bootstrap herunter und verweisen Sie auf lokale CSS- und JavaScript-Dateien. Installieren und importieren Sie Präprozessordateien über Sass oder Less.

So importieren Sie Bootstrap

Bootstrap ist ein beliebtes Front-End-Framework, das die Webentwicklung vereinfacht und reaktionsfähige Websites erstellt. Um Bootstrap zu importieren, gibt es mehrere Methoden:

1 CDN (Content Delivery Network)

Dies ist die einfachste Methode. Fügen Sie den folgenden Code zu Ihrem HTML-Kopfabschnitt hinzu:

<code class="html"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script></code>

2. Node.js Package Manager (npm)

Wenn Sie den JavaScript-Paketmanager npm verwenden, können Sie den folgenden Befehl ausführen:

<code class="shell">npm install bootstrap --save</code>

Dann in Ihrem Bootstrap wird im Code referenziert:

<code class="javascript">import 'bootstrap'</code>

3. Lokaler Download

Laden Sie die neueste Version von der Bootstrap-Website herunter und kopieren Sie die Dateien in Ihr Projektverzeichnis. Dann referenzieren Sie sie in Ihrem Code:

<code class="html"><link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/bootstrap.bundle.min.js"></script></code>

4. Installation über Sass or Less

Wenn Sie den Sass or Less-Präprozessor verwenden, können Sie die Sass or Less-Version von Bootstrap installieren.

<code class="shell"># Sass
npm install bootstrap-sass --save

# Less
npm install bootstrap-less --save</code>

Dann importieren Sie Bootstrap in Ihre Sass- oder Less-Datei:

<code class="sass">@import 'bootstrap'</code>

Hinweis:

• Für die Bootstrap 4-Version ersetzen Sie 5.2.0-beta1 durch 4.6.2 Code>. <code>5.2.0-beta1 替换为 4.6.2。
• 对于 Bootstrap 5 Alpha 版本，将 5.2.0-beta1 替换为 5.0.0-alpha6
Ersetzen Sie für die Bootstrap 5 Alpha-Version 5.2.0-beta1 durch 5.0.0-alpha6.
• Stellen Sie sicher, dass Sie Bootstrap.css vor Ihren anderen CSS-Dateien platzieren.

🎜

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