序章
レスポンシブなモバイル ファーストのサイトを構築するための世界で最も人気のあるフレームワークである Bootstrap を jsDelivr とテンプレート スターター ページで使い始めましょう。
クイックスタート
Bootstrap をプロジェクトにすばやく追加したいとお考えですか? 無料のオープン ソース CDN である jsDelivr を使用します。パッケージ マネージャーを使用していますか、それともソース ファイルをダウンロードする必要がありますか? ダウンロード ページに移動します。
CSS
<link>
スタイルシートを他のすべてのスタイルシートの前にコピーして貼り付け、<head>
CSS を読み込みます。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
JS
コンポーネントの多くは、機能するために JavaScript を使用する必要があります。具体的には、独自の JavaScript プラグインとPopperが必要です。次<script>
のいずれかをページの最後近く、終了タグの直前に配置</body>
して有効にします。
バンドル
すべての Bootstrap JavaScript プラグインと依存関係を、2 つのバンドルのいずれかに含めます。ツールチップとポップオーバーの両方bootstrap.bundle.js
にPopperbootstrap.bundle.min.js
が含まれています。Bootstrap に含まれるものの詳細については、コンテンツセクションを参照してください。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
別
別のスクリプト ソリューションを使用する場合は、まず Popper (ツールチップまたはポップオーバーを使用している場合)、次に JavaScript プラグインを使用する必要があります。
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
モジュール
を使用する場合は、 Bootstrap をモジュールとして使用する<script type="module">
セクションを参照してください。
コンポーネント
どのコンポーネントが JavaScript と Popper を明示的に必要としているか知りたいですか? 下の [show components] リンクをクリックします。一般的なページ構造がまったくわからない場合は、ページ テンプレートの例を読み続けてください。
JavaScript が必要なコンポーネントを表示する
- 却下のアラート
- 状態とチェックボックス/ラジオ機能を切り替えるためのボタン
- すべてのスライド動作、コントロール、およびインジケーターのカルーセル
- 折りたたんでコンテンツの表示を切り替える
- 表示と配置のためのドロップダウン ( Popperも必要)
- 表示、配置、およびスクロール動作のモーダル
- Collapse プラグインを拡張してレスポンシブ動作を実装するための Navbar
- 表示と非表示のトースト
- 表示と配置のためのツールチップとポップオーバー ( Popperも必要)
- スクロール動作とナビゲーションの更新のための Scrollspy
スターター テンプレート
ページが最新のデザインおよび開発基準で設定されていることを確認してください。つまり、HTML5 doctype を使用し、適切なレスポンシブ動作のためにビューポート メタ タグを含めることを意味します。すべてをまとめると、ページは次のようになります。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
次のステップについては、レイアウトのドキュメントまたは公式の例にアクセスして、サイトのコンテンツとコンポーネントのレイアウトを開始してください。
重要なグローバル
Bootstrap は、それを使用する際に注意する必要があるいくつかの重要なグローバル スタイルと設定を採用しています。これらはすべて、クロス ブラウザー スタイルの正規化にほぼ専念しています。飛び込みましょう。
HTML5 文書型
Bootstrap では、HTML5 doctype を使用する必要があります。それがないと、ファンキーで不完全なスタイリングが表示されますが、それを含めても大きな問題は発生しません。
<!doctype html>
<html lang="en">
...
</html>
レスポンシブ メタ タグ
Bootstrap はモバイル ファーストで開発されています。これは、最初にモバイル デバイス向けにコードを最適化し、次に必要に応じて CSS メディア クエリを使用してコンポーネントをスケールアップするという戦略です。すべてのデバイスで適切なレンダリングとタッチ ズームを確実に行うには、レスポンシブ ビューポート メタ タグを<head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
この例は、スターター テンプレートで実際に確認できます。
ボックスサイジング
CSS でより簡単なサイズ設定を行うために、グローバルbox-sizing
値を からcontent-box
に切り替えborder-box
ます。これによりpadding
、最終的に計算された要素の幅には影響しませんが、Google マップや Google カスタム検索エンジンなどの一部のサードパーティ ソフトウェアで問題が発生する可能性があります。
まれにオーバーライドする必要がある場合は、次のようなものを使用します。
.selector-for-some-widget {
box-sizing: content-box;
}
上記のスニペットでは、ネストされた要素 (::before
およびを介して生成されたコンテンツを含む) はすべて、その に指定された を::after
継承します。box-sizing
.selector-for-some-widget
ボックス モデルとサイズ設定については、CSS トリック を参照してください。
リブート
クロスブラウザー レンダリングを改善するために、Rebootを使用してブラウザーとデバイス間の不一致を修正し、一般的な HTML 要素にもう少し独自のリセットを提供します。
コミュニティ
Bootstrap の開発に関する最新情報を入手し、これらの役立つリソースを使用してコミュニティに連絡してください。
- The Official Bootstrap Blogを読み、購読してください。
- IRC で仲間の Bootstrappers とチャットします。
irc.libera.chat
サーバー上、チャネル#bootstrap
内。 - 実装のヘルプは、スタック オーバーフロー (タグ付き
bootstrap-5
) にあります。 - 開発者は、 npmまたは同様の配信メカニズムを
bootstrap
介して配布するときに、Bootstrap の機能を変更または追加するパッケージでキーワードを使用して、発見可能性を最大限に高める必要があります。
Twitter で @getbootstrap をフォローして、最新のゴシップやすばらしいミュージック ビデオを入手することもできます。