VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

ブートストラップ３のグリッドの挙動をまとめました

wp-admin

ブートストラップ３ではグリッドの指定方法がそれまでのバージョンから変更されました。offcanvasのサンプルコードを使って実際に動かしながら確認してみました。

※目次をクリックすると目次の下部にコンテンツが表示されます。

ブートストラップのサンプルoffcanvasのレイアウト
offcanvasのレイアウトは下記のようになっています。 
<div class="col-xs-12 col-sm-9">
  <div class="col-6 col-sm-6 col-lg-4">
  <div class="col-6 col-sm-6 col-lg-4">
  <div class="col-6 col-sm-6 col-lg-4">
  <div class="col-6 col-sm-6 col-lg-4">
  <div class="col-6 col-sm-6 col-lg-4">
  <div class="col-6 col-sm-6 col-lg-4">
<div class="col-xs-6 col-sm-3>
グリッドのオプションの種類
①.col-lg-（ラージデバイス用）
　
・1200px以上、デスクトップ
・上記幅以下になると折りたたむ
・最大コンテナー幅：1170px
　
②.col-mg-（ミディアムデバイス用）
　
・992px以上、デスクトップ
・上記幅以下になると折りたたむ
・最大コンテナー幅：970px
　
③.col-sm-（スモールデバイス用）
　
・768px以上、タブレット
・上記幅以下になると折りたたむ
・最大コンテナー幅：750px
　
④.col-xg-（極スモールデバイス用）
　
・768px以下、スマートフォン
・上記幅以下でも折りたたまない
・最大コンテナー幅：なし（自動）
offcanvasの設定でグリッドの仕様を確認する
offcanvasでは複数の画面サイズに応じて意図するレイアウトになるように複数のタイプのオプションを設定しています。
　
単独で指定した場合はどうなるかを確認しながら、複数のオプションを指定する効果を確認します。
　
※offcanvas用のスタイルシートでも画面サイズに応じた設定をしているのですが、グリッドの効果のみ確認したいので、下記記述を削除して動作確認しています。
　
<link href=”css/offcanvas.css” rel=”stylesheet”>
　
①.col-lg-（ラージデバイス用）のみ指定した場合
　 
<div class="col-lg-9">　　　　　//①タイトル
　<div class="col-lg-4">　　　//③1段目記事左
　<div class="col-lg-4">　　　//④1段目記事中
　<div class="col-lg-4">　　　//⑤1段目記事右
　<div class="col-lg-4">　　　//⑥2段目記事左
　<div class="col-lg-4">　　　//⑦2段目記事中
　<div class="col-lg-4">　　　//⑧2段目記事右
<div class="col-lg-3>　　　　　　//②右サイドバー

　
・ウィンドウサイズが1200px以上の場合の表示イメージ
　
①①①①①①①①①②②②
③③③④④④⑤⑤⑤②②②
⑥⑥⑥⑦⑦⑦⑧⑧⑧②②②
　
・768px以上1200px以下の場合
　
①①①①①①①①①
③③③③③③③③③
④④④④④④④④④
⑤⑤⑤⑤⑤⑤⑤⑤⑤
⑥⑥⑥⑥⑥⑥⑥⑥⑥
⑦⑦⑦⑦⑦⑦⑦⑦⑦
⑧⑧⑧⑧⑧⑧⑧⑧⑧
②②②②②②②②②
　
上記のように1200px以下になるとレイアウトが崩れてしまいます。
　
②.col-lg-（ラージデバイス用）と.col-sm-（スモールデバイス用）を使って指定した場合
　
ラージデバイス場合は①のレイアウトにし、1200px以下のミディアムデバイス、768px以上のスモールデバイスのレイアウトは下記のように2列3段の記事レイアウトにしたい場合は下記のように指定します。

<div class="col-sm-9">　　　　　//①タイトル
　<div class="col-sm-6 col-lg-4">　　　//③1段目記事左
　<div class="col-sm-6 col-lg-4">　　　//④1段目記事中
　<div class="col-sm-6 col-lg-4">　　　//⑤1段目記事右
　<div class="col-sm-6 col-lg-4">　　　//⑥2段目記事左
　<div class="col-sm-6 col-lg-4">　　　//⑦2段目記事中
　<div class="col-sm-6 col-lg-4">　　　//⑧2段目記事右
<div class="col-sm-3>　　　　　　//②右サイドバー

　
・ウィンドウサイズが1200px以上の場合の表示イメージ
　
①①①①①①①①①②②②
③③③④④④⑤⑤⑤②②②
⑥⑥⑥⑦⑦⑦⑧⑧⑧②②②
　
・768px以上1200px以下
　
①①①①①①①①②②②
③③③③④④④④②②②
⑤⑤⑤⑤⑥⑥⑥⑥②②②
⑦⑦⑦⑦⑧⑧⑧⑧②②②
　
・768px以下
　
①①①①①①①①
③③③③③③③③
④④④④④④④④
⑤⑤⑤⑤⑤⑤⑤⑤
⑥⑥⑥⑥⑥⑥⑥⑥
⑦⑦⑦⑦⑦⑦⑦⑦
⑧⑧⑧⑧⑧⑧⑧⑧
②②②②②②②②
②②②②②②②②
　
768px以下になると右サイドバーが一番下に折り返され、最大幅で表示されます。
　
③768px以下で右サイドバーのレイアウトを設定したい場合
　
768pxで、メインコンテンツ部をフル幅、右サイドバーを半分の幅でレイアウトします。
　

<div class="col-xs-12 col-sm-9">
　<div class="col-sm-6 col-lg-4">
　<div class="col-sm-6 col-lg-4">
　<div class="col-sm-6 col-lg-4">
　<div class="col-sm-6 col-lg-4">
　<div class="col-sm-6 col-lg-4">
　<div class="col-sm-6 col-lg-4">
<div class="col-xs-6 col-sm-3>

　
・768px以下
　
①①①①①①①①
③③③③③③③③
④④④④④④④④
⑤⑤⑤⑤⑤⑤⑤⑤
⑥⑥⑥⑥⑥⑥⑥⑥
⑦⑦⑦⑦⑦⑦⑦⑦
⑧⑧⑧⑧⑧⑧⑧⑧
②②②②
②②②②
　
④右サイドバーを一番下に表示しないようにする
　
右サイドバーを一番下ではなく、ボタンの押下で左右にスライドし、隠れている部分を表示させるようにする。
　
offcanvasのスタイルシートとjQueryの設定で実施しています。
　
・スタイルシート　offcanvas.css

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }
}

　
・jQuery　　offcanvas.js

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

　
・HTML

<div class="row row-offcanvas row-offcanvas-right">
  <div class="col-xs-12 col-sm-9">
    <p class="pull-right visible-xs">
      <button type="button" class="btn btn-primary btnata-toggle="offcanvas">Toggle nav</button>
    </p>
モバイルバージョンを終了