ブートストラップをインポートする方法

Bootstrap フレームワークをインポートするには 4 つの方法があります。 CDN を介して HTML コードを追加します。 npm を使用して、JavaScript ファイルをインストールおよびインポートします。 Bootstrap をダウンロードし、ローカルの CSS および JavaScript ファイルを参照します。 Sass または Less 経由でプリプロセッサ ファイルをインストールおよびインポートします。

Bootstrap をインポートする方法

Bootstrap は、Web 開発を簡素化し、応答性の高い Web サイトを作成する人気のフロントエンド フレームワークです。 。 Bootstrap をインポートするには、複数の方法があります:

1. CDN (Content Delivery Network)

これが最も簡単な方法です。次のコードを HTML ヘッダーに追加します:

<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 パッケージ マネージャー (npm)

JavaScript パッケージ マネージャー npm を使用する場合、次のことができます。次のコマンドを実行します:

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

次に、コード内で Bootstrap を参照します:

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

3. ローカル ダウンロード

Bootstrap Web サイト バージョンから最新のものをダウンロードします。そしてそのファイルをプロジェクト ディレクトリにコピーします。次に、コード内でそれらを参照します:

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

4. Sass or Less 経由でインストール

Sass or Less プリプロセッサを使用する場合は、Bootstrap の Sass or Less バージョンをインストールできます。 。

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

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

次に、Bootstrap を Sass 以下のファイルにインポートします:

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

注:

• Bootstrap 4 バージョンの場合は、 を置き換えます。 5.2.0-beta1 と 4.6.2。
• Bootstrap 5 アルファ バージョンの場合は、5.2.0-beta1 を 5.0.0-alpha6 に置き換えます。
• Bootstrap.css は他の CSS ファイルの前に必ず配置してください。

以上がブートストラップをインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。