以下に、Bootstrap CSSファイルをリンクする方法とコード例をいくつか紹介します。
- CDN経由でBootstrap CSSをリンクする方法:
CDN(Content Delivery Network)は、ホスティングされた外部ファイルを利用する方法の一つです。Bootstrapの公式CDNを使用すると、簡単にBootstrap CSSをリンクすることができます。以下はその例です。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap CSS Link</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<!-- ここにコンテンツを追加 -->
</body>
</html>
- ローカルに保存したBootstrap CSSをリンクする方法:
BootstrapのCSSファイルをローカルに保存している場合は、次のようにリンクすることができます。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap CSS Link</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
<body>
<!-- ここにコンテンツを追加 -->
</body>
</html>
以上の方法を使用すると、BootstrapのスタイルがHTMLドキュメントに適用されます。これにより、ボタン、フォーム、ナビゲーションバーなどのBootstrap提供のコンポーネントを使用することができます。
この投稿では、BootstrapのCSSファイルをリンクする方法とコード例を紹介しました。これにより、WebデザインにおいてBootstrapを使用する際の出発点となるでしょう。