まず、Bootstrap 5の公式ウェブサイト(https://getbootstrap.com)から、Bootstrapの最新バージョンをダウンロードしてください。ダウンロードしたファイルには、CSSとJavaScriptのファイルが含まれています。
次に、HTMLファイルを開き、以下のようなコードを追加します。これにより、Bootstrapのスタイルと機能が適用されます。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5の使用例</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
<body>
<!-- ここにコンテンツを追加 -->
<script src="path/to/bootstrap.min.js"></script>
</body>
</html>
上記のコードでは、<link>
タグを使用してbootstrap.min.cssファイルを読み込み、<script>
タグを使用してbootstrap.min.jsファイルを読み込んでいます。href
およびsrc
属性の値は、実際のファイルのパスに置き換えてください。
このようにすると、Bootstrap 5のスタイルシートとJavaScriptファイルがHTMLに正しく組み込まれます。これにより、Bootstrapのクラスやコンポーネントを使用して、レスポンシブなデザインやインタラクティブな要素を作成することができます。
たとえば、以下のようなコードを使用すると、ボタンを作成できます。
<button class="btn btn-primary">Click me!</button>
このコードでは、btn
クラスとbtn-primary
クラスを使用して、プライマリボタンスタイルを適用しています。
以上が、Bootstrap 5をHTMLに組み込む方法のシンプルな例です。Bootstrapのさまざまな機能やコンポーネントを使用することで、より洗練されたデザインを作成することができます。詳細な情報やコード例については、Bootstrapの公式ドキュメントを参照してください。