ブートストラップフレームワークをインポートする方法-ブートストラップのチュートリアル-php.cn

ブートストラップフレームワークをインポートする方法

下次还敢

リリース： 2024-04-01 22:48:22

オリジナル

1316 人が閲覧しました

Bootstrap フレームワークをインポートする方法: CDN インポート: CDN リンクを参照して Bootstrap ファイルをインポートします。手動ダウンロード: 公式 Web サイトから Bootstrap ファイルをダウンロードし、手動でインポートします。 Sass/LESS インポート: コンパイラーを使用して、Bootstrap ソースファイルを CSS に変換します。バージョンの選択: ニーズに応じて適切な Bootstrap バージョンを選択します。インポート順序: Bootstrap CSS ファイルをインポートする前に jQuery をインポートします。

ブートストラップフレームワークをインポートする方法

#Bootstrap フレームワークのインポート方法

CDN を使用してインポート

最も簡単な方法は、CDN 経由で Bootstrap フレームワークをインポートすることです。

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

ログイン後にコピー

上記のコードを HTML ファイルの

<head> セクションに貼り付けます。

手動ダウンロードとインポート

Bootstrap の公式 Web サイトからフレームワークファイルをダウンロードして、手動でインポートすることもできます。ファイルをブートストラップして解凍します。

ファイルを CSS ディレクトリにコピーします。
bootstrap.bundle.min.js ファイルを JS ディレクトリにコピーします。
HTML ファイルの <head> セクションで CSS ファイルと JS ファイルを参照します:

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

ログイン後にコピー

Sass/LESS import

開発に Sass または LESS を使用する場合は、コンパイラを使用してブートストラップソースファイルを CSS にコンパイルできます。

<code>// 使用Sass
@import "~bootstrap/scss/bootstrap";

// 使用LESS
@import "~bootstrap/less/bootstrap";</code>

ログイン後にコピー

コンパイルが完了したら、コンパイルされた CSS ファイルを HTML ファイルにインポートします。。

バージョンの選択

バージョンが異なると、異なる機能が含まれる場合があるため、ニーズに応じて適切なバージョンを選択する必要があります。バージョンは、Bootstrap Web サイトまたは CDN リンクから選択できます。

注:

CDN インポートの場合、最新のブートストラップバージョンを取得するには、使用する CDN リンクが最新であることを確認してください。

インポート順序は重要です。Bootstrap CSS ファイルをインポートする前に必ず jQuery をインポートしてください。

Web サイトが CDN をサポートしていない場合は、手動ダウンロード方法を使用できます。

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