ホームページ > 記事 > ウェブフロントエンド > ブートストラップにはいくつかのコンテナがあります
ブートストラップにはいくつかのコンテナがあります
- 青灯夜游オリジナル
- 2022-01-10 11:28:584048ブラウズ
Bootstrap には 2 種類のコンテナがあります: 1. 固定レイアウト コンテナ: 「class="container"」のコンテナにデフォルトのグリッドを配置して固定レイアウトを作成します; 2. 流体レイアウト コンテナ: 流体レイアウトを配置しますコンテナ "class="container-fluid"" を使用してグリッドを流体コンテナに配置し、流体レイアウトを作成します。
このチュートリアルの動作環境: Windows7 システム、bootsrap3.3.7 バージョン、DELL G3 コンピューター
Bootstrap コンテナー
Bootstrap では、コンテナはレスポンシブ レイアウトの基礎です。Bootstrap では、すべてのコンテンツをコンテナ内で定義することを推奨しており、コンテナは Bootstrap グリッド システムを有効にするための必須の前提条件です。
Bootstrap は 2 種類のレイアウト コンテナーを提供します。1 つは固定幅レイアウト コンテナー、もう 1 つは流動レイアウト コンテナーです。グリッドを何らかのコンテナに配置すると、それに応じてグリッドをレイアウトできます。
固定レイアウト
Bootstrap のデフォルト グリッドを class="container" を使用してコンテナに配置し、固定幅レイアウトを作成します。固定レイアウトはページ全体の中央に配置されます。例:
<body>
<div class="container">
...
</div>
</body>効果は次のようになります (ブートストラップ固定レイアウト コンテナー):
簡単に言うと、すべてのコンテンツを class= に配置します。 「container」コンテナを使用すると、中央揃えの固定幅レイアウトを作成できます。具体的な例は次のとおりです。
<body>
<div class="container">
<div class="row">
<div class="span4">span4</div>
<div class="span8">span8</div>
</div>
<div class="row">
<div class="span3">span3</div>
<div class="span6">span6</div>
<div class="span3">span3</div>
</div>
</div>
</body>レイアウト効果を次の図に示します (ブートストラップ固定レイアウトの例)。
フロー レイアウト
同様に、class="container-fluid" を使用して Bootstrap の流体グリッドを流体コンテナに配置することで、流体レイアウトを作成できます。流動的なレイアウトはビューポートの幅全体を埋めます。例:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>レイアウト効果は次のとおりです (ブートストラップ フロー レイアウト):
[関連する推奨事項: 「ブートストラップ チュートリアル##」 # 》]
以上がブートストラップにはいくつかのコンテナがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。