ぱそくま ろご
開発 > Bootstrap > Bootstrap コンテナとグリッド

Bootstrap コンテナとグリッド

Bootstrap コンテナとグリッド

Bootstrapではコンテナという大きな枠の中に、グリッドという枠を使うことできれいにコンテンツを配置できます。 イメージ的にはテーブルレイアウトのように扱え、コンテナがtableタグでグリッドがtrやtd相当になります。(floatでの配置から開放されます。) コンテナは固定幅と画面全幅用の2つがあります。

Bootstrap コンテナとグリッドの使い方

  1. .containerを持つdivタグを用意。これが大枠になります。画面全幅にしたい場合は、.container-fluidを指定。
  2. その中にtrタグに相当する.rowを持つdivタグを用意。
  3. 最後にtdタグに相当する.col-*-*を持つdivタグを用意。

「col-*-*」の1番目の「*」は表示幅に影響するxs、sm、md、lgのいずれかを指定します。詳細は以下で。

「col-*-*」の2番目の「*」はcolspanに相当する数字を書きます。1行最大12カラムになっていますので、「col-lg-4」と指定すると4/12の幅を指定したことと同じになります。

col-*-*の1番目の項目表
クラス接頭語 概要
col-xs(Extra small devices) 携帯端末用。767px以下が対象。
col-sm(Small devices) タブレット用。768px~991pxが対象。
col-md(Medium devices) ディスクトップPCの通常用。992px~1199pxが対象。
col-lg(Large devices) ディスクトップPCの高解像度用。1200px以上が対象。


例:Bootstrap コンテナとグリッドの使い方

<!DOCTYPE html>
<html lang="jp">

  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
          integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">

    <!-- このサンプルではコンテンツが空なので、わかりやすく枠線と高さだけ設定します。 -->
    <style type="text/css">
      div[class^="col-"]{border:1px solid #2D8930;height:6em;}
    </style>

  </head>

  <body>

  <!-- ここがコンテナとグリッド部分 -->
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
         行全体幅。
      </div>
    </div>

    <div class="row">
      <div class="col-sm-8">
         全体の8/12の幅。
      </div>

      <div class="col-sm-4">
         全体の4/12の幅。
      </div>
 
    </div>
  </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"
            integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"
            integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"
            integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
  </body>
</html>

上を、貼り付けるとこんな感じに。

コンテナとグリッドのサンプル

行全体幅。
行全体の8/12の幅。
行全体の4/12の幅。

col-*-*の非表示 - リスポンシブのオプション

.hidden-*-upを指定すると「*」で指定したメディアサイズ以上の場合、非表示にします。 逆に.hidden-*-downを指定すると「*」で指定したメディアサイズ以下の場合、非表示にします。