ブートストラップ4コンテナ
コンテナ
前の章から、Bootstrapにはサイトのコンテンツをラップするための包含要素が必要であることを学びました。
コンテナは、その中のコンテンツを埋めるために使用され、2つのコンテナクラスが利用可能です。
- この
.containerクラスは、レスポンシブな固定幅のコンテナを提供します - この
.container-fluidクラスは、ビューポートの全幅にまたがる全幅のコンテナを提供します
固定コンテナ
クラスを使用.containerして、レスポンシブな固定幅のコンテナーを作成します。
その幅（max-width）は、画面サイズによって異なることに注意してください。
|
極小 <576px |
小さい ≥576px |
ミディアム ≥768px |
大きい ≥992px |
特大 ≥1200px |
|
|---|---|---|---|---|---|
| 最大幅 | 100％ | 540px | 720px | 960px | 1140px |
以下の例を開き、ブラウザウィンドウのサイズを変更して、コンテナの幅がさまざまなブレークポイントで変化することを確認します。
例
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
液体容器
クラスを使用して、.container-fluid常に画面の幅全体にまたがる全幅のコンテナを作成します（width常に100%）：
例
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
コンテナパディング
デフォルトでは、コンテナには15pxの左右のパディングがあり、上部または下部のパディングはありません。したがって、余分なパディングやマージンなどの間隔ユーティリティを使用して、見栄えをさらに良くすることがよくあります。たとえば、.pt-3「16pxの上部パディングを追加する」という意味です。
例
<div class="container pt-3"></div>
BS4ユーティリティの章で、スペーシングユーティリティの詳細を学びます。
コンテナの境界線と色
境界線や色などの他のユーティリティも、コンテナと一緒に使用されることがよくあります。
例
私の最初のブートストラップページ
このコンテナには、境界線といくつかの追加のパディングとマージンがあります。
私の最初のブートストラップページ
このコンテナには、暗い背景色と白いテキスト、およびいくつかの余分なパディングとマージンがあります。
私の最初のブートストラップページ
このコンテナには、青い背景色と白いテキスト、およびいくつかの追加のパディングとマージンがあります。
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
BS4カラーの章とBS4ユーティリティの章で、色と境界線ユーティリティの詳細を学びます。
レスポンシブコンテナ
.container-sm|md|lg|xlクラスを使用して、レスポンシブコンテナを作成することもできます。
コンテナのmax-widthは、さまざまな画面サイズ/ビューポートで変更されます。
| クラス |
極小 <576px |
小さい ≥576px |
ミディアム ≥768px |
大きい ≥992px |
特大 ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100％ | 540px | 720px | 960px | 1140px |
.container-md |
100％ | 100％ | 720px | 960px | 1140px |
.container-lg |
100％ | 100％ | 100％ | 960px | 1140px |
.container-xl |
100％ | 100％ | 100％ | 100％ | 1140px |
例
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
知ってますか？
W3.CSSは、Bootstrap4の優れた代替手段です。
W3.CSSは、より小さく、より速く、より使いやすくなっています。
W3.CSSを学習したい場合は、W3.CSSチュートリアルにアクセスしてください。