ブートストラップ３のサンプルレイアウトoffcanvasの設定方法

ブートストラップ３のサンプルレイアウトoffcanvasの設定方法をまとめました。

１）ファイルの入手
　
①ブートストラップの公式サイトから”source”版をダウンロード。
　
②”examples”フォルダ内に”offcanvas”フォルダ内があります。
　
２）ファイルの配置
　
index.html、offcanvas.js、offcanvas.cssをサーバー内に適宜配置します。
　
３）index.html内のインクルード設定
　
index.html内のCSS、JavaScript部分を自分の環境に合わせて修正します。
　
<link href=”../../dist/css/bootstrap.min.css” rel=”stylesheet”>
<link href=”offcanvas.css” rel=”stylesheet”>

<script src=”../../dist/js/bootstrap.min.js”></script>
<script src=”offcanvas.js”></script>
　
４）動作確認
　
ブラウザでアクセスし、下記を確認します。
　
・ウィンドウサイズを変化させるとカラムの構成が３カラム、２カラム、１カラムと自動で変更されること。
　
・ウィンドウサイズを小さくするとナビゲーションメニューが折りたたまれ、クリックするとドロップダウンで表示される事。
　
・ウィンドウサイズを小さくするとサイトヘッダー部に”Toggle nav”ボタンが表示され、クリックすると左右にスライドする事。
　
※”Toggle nav”ボタン
　
ブートストラップ３の標準機能以外が使われていて、下記部分が該当します。
　
①JavaScript

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

　
②HTMLの該当部分

<div class="container">
  <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 btn-xs" data-toggle="offcanvas">Toggle nav</button>
      </p>

　
③スタイルシート

@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 */
  }
}

　
ウィンドウサイズを小さくすると、”Toggle nav”のボタン（data-toggle=”offcanvas”クラス）が表示され、クリックすると”row-offcanvas”クラスのスタイル設定に”active”が適用されたり、取り消されたりして、ウィンドウの位置がスライドします。