ブートストラップ３のjumbotronの設定内容と修整方法

ブートストラップ３のjumbotronは、offcanvasのサンプルでも使用されていますがサイトタイトル部分として利用できます。
このjumbotronのデフォルトの設定内容を確認し、デフォルトから修整してみました。
　
ここでは、サンプルOffcanvasで作成したサンプルページのjumbotronを修整してみます。

●デフォルトの設定内容

（サンプルoffcanvasのHTML）

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is an ・・</p>
</div>

（スタイルシート）
.jumbotron {
  padding: $jumbotron-padding;
  margin-bottom: $jumbotron-padding;
  font-size: $jumbotron-font-size;
  font-weight: 200;
  line-height: ($line-height-base * 1.5);
  color: $jumbotron-color;
  background-color: $jumbotron-bg;

　
●スタイルシートを修正
　
app/assets/stylesheets/custom.css.scssに記述した @import "bootstrap"; より上の行に変更するパラメータを記述します。
　
①タイトル部分（<h1>Hello, world!</h1>）の文字サイズが大きいので小さくします。
　
このjumbotron内のH1タグだけでなく、アプリ全体でH1タグのサイズを小さくするので下記記述を追加します。
　
$font-size-h1: 30px !important;
　
②jumbotron内の文字サイズ、余白が大きいため下記記述を追加します。
　
$jumbotron-padding: 10px;
$jumbotron-font-size: 15px;
　
これで、サイトタイトル部分を全体的に小さくする事が出来ました。
　
$font-size-h1: 30px !important;
$jumbotron-padding: 10px;
$jumbotron-font-size: 15px;