ホームページ > 記事 > ウェブフロントエンド > ブートストラップフレームワークをインポートする方法
ブートストラップフレームワークをインポートする方法
- 下次还敢オリジナル
- 2024-04-01 22:48:221323ブラウズ
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 サイトからフレームワーク ファイルをダウンロードして、手動でインポートすることもできます。ファイルをブートストラップして解凍します。- bootstrap.min.css
- ファイルを 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 サイトの他の関連記事を参照してください。