Bootstrap3 JumbotronとPageHeaderの使い方

Tweet

Pocket

Bootstrap3の中でも使われてなさそうで以外とよく使われているのがJumbotronとPageHeaderコンポーネントです。

JumbotronはLPやトップページのヘッダー部分にカバー画像と合わせて使われることが多く、実はかなり重要なコンポーネントなのです。PageHeaderの方はページのタイトル部分でよく使われ、こちらもなくてはならない存在。

普段は独自にHTML書いてCSSでスタイルしているところも、Bootstrap3で用意されているコンポーネントを使うことで効率よくWeb制作ができるようになります。

JumbotronとPageHeaderの使い方

Jumbotronの使い方

LPのトップに表示したり、大きくコンテンツを見せたいときに使えるのがJumbotronコンポーネント。メインコンテンツの中に入れるだけでなく、画面幅いっぱいに表示することもできます。

<!-- 通常のLabel -->
<div class="jumbotron text-center">
  <h1>新しいサービス登場！</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius eveniet repellat sed magni dolor natus deleniti tempora dolorem blanditiis repellendus itaque in sint!</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">もっと見る</a></p>
</div>

<!-- フルワイドで表示 -->
<div class="jumbotron">
  <div class="container">
    <h1>新しいサービス登場！</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius eveniet repellat sed magni dolor natus deleniti tempora dolorem blanditiis repellendus itaque in sint!</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">もっと見る</a></p>
  </div>
</div>

PageHeaderの使い方

コンポーネント名通りページのヘッダー（見出しタイトル）として使えるのがこのコンポーネント。ページの見出しには積極的に使っていきたいです。

<div class="page-header">
  <h1>サンプルページの見出し <small>サブタイトルも書けます</small></h1>
</div>

デモページはこちら