Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

ブートストラップ3のサンプルOffcanvasを使ってレイアウト、ホームページを作成

ブートストラップ3のサンプルOffcanvasを使ってレイアウト、ホームページを作成する手順をまとめました。

 

ブートストラップ3はインストール済みである事を前提としています。

 

(1)ブートストラップ3のサンプルOffcanvasのファイルを入手

 

ブートストラップの公式サイトから"source"版をダウンロード。

 

"examples"フォルダ内の"offcanvas"フォルダ内から入手。

 

(2)レイアウトファイルを作成

 

①ヘッダーナビゲーションメニューを_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>&copy; 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>

 

(3)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&raquo;</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&raquo;</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&raquo;</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&raquo;</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&raquo;</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&raquo;</a></p>

  </div><!--/span-->

</div><!--/row-->

 

(4)JavaScript、スタイルシートの設定

 

1)application.jsファイルにBootstrapのライブラリ追加

 

ナビゲーションメニュー内にあるドロップダウンメニューはBootstrapのJavaScriptライブラリを必要とします。

 

Railsアセットパイプラインを使ってインクルードします。

 

$ vi app/assets/javascripts/application.js

 

下記記述を追加します。

//= require bootstrap

 

2)Offcanvas固有のJavaScript、スタイルシートの設定

 

①JavaScript、CSSファイルの入手

 

ブートストラップの公式サイトから"source"版をダウンロード。

 

"examples"フォルダ内の"offcanvas"フォルダ内から下記ファイルを入手

offcanvas.cssファイル

offcanvas.jsファイル

 

②offcanvas.cssファイルの中身をapp/assets/stylesheets/custom.css.scss内にコピー

 

③offcanvas.jsファイルをapp/assets/javascriptsディレクトリにコピー。