HTMLでBootstrapをリンクする方法

CDNを使用する方法: BootstrapはCDN（Contents Delivery Network）を通じて提供されています。CDNを使用すると、Bootstrapのファイルを自分のウェブサイトにダウンロードする必要がなくなります。以下は、CDNを使用してBootstrapをリンクする方法です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- ここにコンテンツを追加 -->

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ローカルにBootstrapファイルをダウンロードする方法: CDNを使用せずにBootstrapのファイルをローカルにダウンロードして使用することもできます。以下は、BootstrapのCSSとJavaScriptファイルをダウンロードしてリンクする方法です。

まず、Bootstrapの公式ウェブサイトからBootstrapの最新バージョンをダウンロードします。ダウンロードしたファイルを自分のウェブサイトのディレクトリに配置し、以下のようにリンクします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
<body>
  <!-- ここにコンテンツを追加 -->

  <script src="path/to/bootstrap.bundle.min.js"></script>
</body>
</html>

上記の例では、path/to/の部分は実際のファイルのパスに置き換えてください。

これらの方法を使用すると、HTMLファイルでBootstrapをリンクして使用することができます。適切な方法を選択し、ウェブサイトのデザインにBootstrapの便利な機能を活用してください。