多くのページでは、メニューやオプションの表示領域としてページを区切っています。上部メニューバーや左右サイドバーなどです。見た目も綺麗になるので作りましょう。
Bootstrapではグリッドシステムという仕組みが実装されていて、比較的簡単かつレスポンシブ(ユーザーの画面の大きさに合わせて表示が調整されること)にレイアウトを調整することが出来るようになっています。
グリッドシステムはCSSのclassを利用して調整され
<div class="row">~</div>
を一つの段の区切りとみなし、その中を
<div class="col-大きさ-列数"></div>
のように区切ります。列数は合計で12になるようにし、大きさはxs,sm,md,lgが用意されています。
詳しくはhttp://getbootstrap.com/css/を参照してください。
グリッドシステムを用いて、サイドバーを作りましょう。(まだ実用的な機能はなくて構いません。)
上記のような、どのページにも使う要素は毎回書くのは(たとえコピーするとしても)面倒ですし、コードに同じ部分を繰り返す場所が増えます。
そのようなパーツはパーシャル(部分テンプレート)として切り分け、使うとき呼び出すのみにするのが効率的です。
views/layout
フォルダーに _sidebar.html.erb という新しいファイルを作り、サイドバーの中身を移しましょう。
必ずしもアンダースコアで始める必要はありませんが、わかりやすくするためにつけるのが一般的です。
できたら
<%= render :partial => "./layouts/sidebar" %>
をサイドバーのあったところに書くと、_sidebar.html.erb の内容が表示されます。
フッターも非常に一般的な構成要素です。
西暦の年表示が入ったフッターをパーシャルとして追加しましょう。
今までのページ(index.html.erb等)で、<html>、<body>のようなHTMLの基本的な構成要素を書いてこなかったと思います。これはRailsのファイルシステムでテンプレートが自動で適用されるようになっているからです。
デフォルトでは、views/layouts
フォルダー内のapplication.html.erbがテンプレートとして使われます。
先ほど作ったパーシャルは毎回表示されてほしいので、ここに加えましょう。
特定のページにのみ適用されるレイアウトを作り、コントローラーで指定し、適用しましょう。
gitへのコミットは論理的なまとまりに基づいてコミットします。
その方があとでログを見た時にわかりやすく、探したい変更を探しやすいためです。
今回でいえば、サイドバー、フッター、レイアウトfor〇〇 のような具合です。
また、開発用gemと同様にgitも様々なツールが用意されています。
その中でも、「 Tig 」は非常に便利なツールですので是非入れておきましょう。
https://jonas.github.io/tig/