ブートストラップにはいくつかのコンテナがあります-フロントエンドQ&A-php.cn

ブートストラップにはいくつかのコンテナがあります

青灯夜游

リリース： 2022-01-10 11:39:31

オリジナル

4073 人が閲覧しました

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>

ログイン後にコピー

レイアウト効果は次のとおりです (ブートストラップフローレイアウト):

ブートストラップにはいくつかのコンテナがあります