Habakiri には汎用的に使える固有の CSS クラスがいくつか用意されています。
.section
ワンページデザイン等でセクションを区切りたいときに余白を確保するためのクラスです。
サンプルコード
<div class="section"> <p class="text-center">サンプルです</p> </div> <section class="section"> <h1 class="text-center">サンプルです</h1> <p class="text-center">サンプルです</p> </section>
表示サンプル
サンプルです
サンプルです
サンプルです
.section .section__title
セクションにタイトルをつけるときに良い感じに表示するクラスです。デフォルトのh1だとサイズが大きいので少し小さめで、中央揃えになるように調整してあります。
サンプルコード
<section class="section"> <h1 class="section__title">タイトル</h1> <p class="text-center">サンプルです</p> </section>
表示サンプル
タイトル
サンプルです
.section.section–image
セクションに背景画像を設定するときに良い感じにサイズを調整するクラスです。
サンプルコード
<div class="section section--image" style="background-image:url( url )"> <h1 class="section__title">タイトル</h1> <p class="text-center">サンプルです</p> </div>
表示サンプル
タイトル
サンプルです
.section.section–fixed
セクションに背景画像を設定するときに背景画像を固定するクラスです。
サンプルコード
<div class="section section--image section--fixed" style="background-image:url( url )"> <h1 class="section__title">タイトル</h1> <p class="text-center">サンプルです</p> </div>
表示サンプル
タイトル
サンプルです
.jumbotron .btn-default
.jumbotronは Bootstrap 固有のクラスですが、その中にこちらも Bootstrap 固有のクラスである.btn-defaultを配置したときに、流行りのゴーストボタンなデザインになるように調整しています。
サンプルコード
<div class="jumbotron section--image" style="background-image:url( url )"> <h1 class="text-center">タイトル</h1> <p class="text-center">サンプルです</p> <div class="row"> <div class="col-md-6 col-md-offset-3"> <a class="btn btn-default btn-block">ボタン</a> </div> </div>