ブートストラップにHTMLを導入する方法-ブートストラップのチュートリアル-php.cn

ブートストラップにHTMLを導入する方法

下次还敢

リリース： 2024-04-05 02:27:15

オリジナル

492 人が閲覧しました

Bootstrap による HTML の導入

Bootstrap を HTML に導入するにはどうすればよいですか?

次の手順に従って、HTML にブートストラップを導入します:

ブートストラップファイルをダウンロードします:
- Bootstrap 公式 Web サイト (https://getbootstrap.com/) にアクセスし、最新の安定バージョンをダウンロードします。
- ダウンロードした ZIP ファイルを解凍します。
CSS ファイルと JS ファイルをコピーします。
- 解凍したフォルダー ## に bootstrap.css を配置します。 # HTML ファイルディレクトリにコピーします。
- bootstrap.js を HTML ファイルディレクトリにコピーします。
CSS ファイルと JS ファイルを HTML にリンクします:
- HTML ファイル内
  < ;head> ; セクション、スタイルシートへのリンク:
```
<code class="html"><link rel="stylesheet" href="bootstrap.css"></code>
```
  ログイン後にコピー
- HTML ファイルの下部に、JavaScript へのリンク:
```
<code class="html"><script src="bootstrap.js"></script></code>
```
  ログイン後にコピー

例:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container">
    <h1>Hello, Bootstrap!</h1>
  </div>
  <script src="bootstrap.js"></script>
</body>
</html></code>

ログイン後にコピー

CDN を使用する:

CDN (コンテンツ配信ネットワーク) を使用して Bootstrap を導入することもできます。読み込み速度とパフォーマンスを向上させることができます。

HTML ファイルの

セクションで次のコードを使用します:

<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.min.js"></script></code>

ログイン後にコピー

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