ブートストラップ３のサンプルOffcanvasを使ってレイアウト、ホームページを作成する手順をまとめました。
ブートストラップ３はインストール済みである事を前提としています。
（１）ブートストラップ３のサンプルOffcanvasのファイルを入手
ブートストラップの公式サイトから”source”版をダウンロード。
“examples”フォルダ内の”offcanvas”フォルダ内から入手。
（２）レイアウトファイルを作成
①ヘッダーナビゲーションメニューを_header.html.erbに作成
ナビゲーションメニューとサイトタイトル部分（jumbotron）は、サイト共通で使用するのでヘッダーパーシャル（_header.html.erb）に記述します。
Offcanvasのサンプルページから下記ナビゲーション部分を切り取ってヘッダーパーシャル（app/views/layouts/_header.html.erb）ファイルに貼り付けます。
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<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>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
②右サイドバーを_sidebar.html.erbに作成
サンプルページの右サイドバー部分もサイト共通で使用するのでサイドバーパーシャル（_sidebar.html.erb）に記述します。
Offcanvasのサンプルページから下記右サイドバー部分を切り取って右サイドバーパーシャル（app/views/layouts/_sidebar.html.erb）ファイルに貼り付けます。
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/span-->
</div><!--/row-->
③フッターを_footer.html.erbに作成
フッター部はサイト内で共通なので、パーシャルとして作成します。
Offcanvasのサンプルページから下記フッター部分を切り取ってフッターパーシャル（app/views/layouts/_footer.html.erb）ファイルに貼り付けます。
<hr>
<footer>
<p>© Company 2013</p>
</footer>
④全体のレイアウトファイルapplication.html.erbを作成
①②③で作成したパーシャルを取り込み下記のように記述します。
<!DOCTYPE html>
<html>
<head>
<title>Btstrp</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track
" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
</div><!--/header + main-->
<%= render 'layouts/sidebar' %>
<%= render 'layouts/footer' %>
</div><!--/.container-->
</body>
</html>
（３）Offcanvasのサンプルページを使ってhomeビューを作成
Offcanvasのサンプルページの本文部分は、サイト共通ではなくホームページのみに使用するので個別のビュー（ここではapp/views/static_pages/home.html.erb）に記述します。
Offcanvasのサンプルページから本文部分を切り取ってapp/views/static_pages/home.html.erbファイルに貼り付けます。
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details»</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details»</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details»</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details»</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details»</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details»</a></p>
</div><!--/span-->
</div><!--/row-->
（４）JavaScript、スタイルシートの設定
１）application.jsファイルにBootstrapのライブラリ追加
ナビゲーションメニュー内にあるドロップダウンメニューはBootstrapのJavaScriptライブラリを必要とします。
Railsアセットパイプラインを使ってインクルードします。
$ vi app/assets/javascripts/application.js
下記記述を追加します。
//= require bootstrap
２）Offcanvas固有のJavaScript、スタイルシートの設定
①JavaScript、CSSファイルの入手
ブートストラップの公式サイトから”source”版をダウンロード。
“examples”フォルダ内の”offcanvas”フォルダ内から下記ファイルを入手
offcanvas.cssファイル
offcanvas.jsファイル
②offcanvas.cssファイルの中身をapp/assets/stylesheets/custom.css.scss内にコピー
③offcanvas.jsファイルをapp/assets/javascriptsディレクトリにコピー。