Source概要
ラッピング コンテナー、強力なグリッド システム、柔軟なメディア オブジェクト、レスポンシブ ユーティリティ クラスなど、Bootstrap プロジェクトをレイアウトするためのコンポーネントとオプション。
コンテナーは、Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッド システムを使用するときに必要です。レスポンシブな固定幅コンテナー (max-width
ブレークポイントごとに変化することを意味します) または流動幅 (100%
常に幅が広いことを意味します) から選択します。
コンテナーは入れ子にすることができますが、ほとんどのレイアウトでは入れ子になったコンテナーは必要ありません。
.container-fluid
ビューポートの幅全体にわたる、全幅のコンテナに使用します。
Bootstrap はモバイル ファーストになるように開発されているため、いくつかのメディア クエリを使用して、レイアウトとインターフェイスの適切なブレークポイントを作成します。これらのブレークポイントは、主にビューポートの最小幅に基づいており、ビューポートの変更に合わせて要素を拡大できます。
Bootstrap は主に、レイアウト、グリッド システム、およびコンポーネントのソース Sass ファイルで次のメディア クエリ範囲 (またはブレークポイント) を使用します。
ソース CSS を Sass で記述しているため、すべてのメディア クエリは Sass mixin を介して利用できます。
ときどき、逆方向 (指定された画面サイズ以下)のメディア クエリを使用します。
繰り返しになりますが、これらのメディア クエリは Sass mixin からも利用できます。
最小および最大のブレークポイント幅を使用して、画面サイズの単一セグメントをターゲットにするためのメディア クエリと mixin もあります。
これらのメディア クエリは、Sass mixin 経由でも利用できます。
同様に、メディア クエリは複数のブレークポイント幅にまたがる場合があります。
同じ画面サイズ範囲を対象とする Sass mixin は次のようになります。
いくつかの Bootstrap コンポーネントはz-index
、コンテンツを配置するための 3 番目の軸を提供することによってレイアウトを制御するのに役立つ CSS プロパティである を利用します。Bootstrap では、ナビゲーション、ツールチップ、ポップオーバー、モーダルなどを適切にレイヤー化するように設計されたデフォルトの z-index スケールを使用しています。
これらのより高い値は、理想的には競合を回避するのに十分なほど高く、具体的な任意の数から始まります。ツールチップ、ポップオーバー、ナビゲーションバー、ドロップダウン、モーダルなど、階層化されたコンポーネント全体でこれらの標準セットが必要です。これにより、動作を合理的に一貫させることができます。100
+ または+を使用できなかった理由はありません500
。
これらの個々の値のカスタマイズはお勧めしません。1 つを変更すると、おそらくすべてを変更する必要があります。
コンポーネント内の重なり合う境界線 (入力グループのボタンや入力など) を処理するために、デフォルト、ホバー、およびアクティブ状態に 、、およびの 1 桁未満z-index
の値を使用します。ホバー/フォーカス/アクティブでは、兄弟要素の上に境界線を表示するために、特定の要素をより高い値で最前面に移動します。1
2
3
z-index