プレースホルダ
概要（About） プレースホルダを使用して、アプリケーションの体感を向上させることができる。HTMLとCSSのみで構築されているため、JavaScriptで作成する必要はない。ただし、表示を切り替えるには、カスタムJavaScriptが必要。それらの外観、色、サイズは、ユーティリティクラスを使用して簡単にカスタマイズできる。 実例（Examples）v5.3.1設定変更 次の例では、一般的なカ...
概要（About） プレースホルダを使用して、アプリケーションの体感を向上させることができる。HTMLとCSSのみで構築されているため、JavaScriptで作成する必要はない。ただし、表示を切り替えるには、カスタムJavaScriptが必要。それらの外観、色、サイズは、ユーティリティクラスを使用して簡単にカスタマイズできる。 実例（Examples）v5.3.1設定変更 次の例では、一般的なカ...
概要（Overview） ポップオーバー・プラグインを使用するときに知っておくべきこと： ポップオーバーは、サードパーティのライブラリであるPopperを利用して位置情報を取得している。ポップオーバーが動作するためには bootstrap.min.js の前にpopper.min.jsを組み込むか、Popperを中に組み込んでいる bootstrap.bundle.min.js を使用する必...
v5.3.0での新しいマークアップ— プログレスバーの以前のHTML構造を非推奨とし、よりアクセスしやすいものに置き換えた。従来の設定構造は、v6まで引き続き使用可能。 使い方（How it works）v5.2.0デザイン変更、v5.3.0設定変更 プログレスコンポーネントは、2つのHTML要素、幅を設定するCSS、いくつかの属性で構築。HTML5の <progress> 要...
使い方（How it works） スクロールスパイは、アンカーの href によって参照される id を持つ要素がスクロールされて表示されるときに、アンカー（<a>）要素の .active クラスを切り替える。スクロールスパイは、Bootstrapのナビゲーションコンポーネントかリストグループと組み合わせるのが最適だが、現在のページの任意のアンカー要素でも機能する。その仕組みは次の...
概要（About） Bootstrapの「スピナー」を使用して、プロジェクトの読み込み状態を表示できる。HTMLとCSSだけで構築されているため、JavaScriptを作成する必要はない。ただし、可視性を切り替えるには任意のJavaScriptが必要。外観、配置、サイズは、Bootstrapの各ユーティリティクラスで簡単にカスタマイズできる。 アクセシビリティのために、各ローダーには role=...
トーストは、モバイルとデスクトップオペレーティングシステムによって一般化されたプッシュ通知を模倣するように設計された軽量の通知である。Flexboxで作られているので、整列配置が簡単にできる。 概要（Overview） トーストプラグインを使用するときに知っておくべきこと： トーストはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある（そのため実行コードが必要）。 ト...
概要（Overview） ツールチップ・プラグインを使用するときに知っておくべきこと： ツールチップは、サードパーティのライブラリであるPopperを利用して位置情報を取得している。ツールチップが動作するためには、bootstrap.min.js の前にpopper.min.jsを組み込むか、Popperを中に組み込んでいる bootstrap.bundle.min.js を使用する必要があ...
アプローチ（Approach） Rebootは、Normalizeの上で構築され、要素のセレクタのみを使用して多少独断的なスタイルで多くのHTML要素を提供。追加のスタイルは、クラスだけで行われる。例えば、より単純なベースラインのためにいくつかの <table> のスタイルを再構築して、後で .table や .table-bordered などを提供。 Rebootで再定義すべきも...
基本設定（Global settings） Bootstrapは、基本的なグローバル表示、文字の体裁、リンクのスタイルを設定。より多くの制御が必要な場合は、テキストユーティリティクラスを参照する。 各OSやデバイスに最適な font-family を選択し、ネイティブ・フォントスタックを使用。 より包括的でアクセスしやすいタイプスケールのために、訪問者が必要に応じてブラウザのデフォルトをカ...
レスポンシブイメージ（Responsive images） Bootstrapの画像は、.img-fluid でレスポンシブになる。これにより max-width:100%;, height:auto; が適用され、親の幅に合わせて拡大縮小される。 見本 プレースホルダレスポンシブイメージ .img-fluid あり .img-fluid なし（原寸大）※画面からはみ出す部分は非表示に設定し...