Bootstrap3の中でも使われてなさそうで以外とよく使われているのがJumbotronとPageHeaderコンポーネントです。
JumbotronはLPやトップページのヘッダー部分にカバー画像と合わせて使われることが多く、実はかなり重要なコンポーネントなのです。PageHeaderの方はページのタイトル部分でよく使われ、こちらもなくてはならない存在。
普段は独自にHTML書いてCSSでスタイルしているところも、Bootstrap3で用意されているコンポーネントを使うことで効率よくWeb制作ができるようになります。
JumbotronとPageHeaderの使い方
Jumbotronの使い方
LPのトップに表示したり、大きくコンテンツを見せたいときに使えるのがJumbotronコンポーネント。メインコンテンツの中に入れるだけでなく、画面幅いっぱいに表示することもできます。
Class名 | 概要 |
---|---|
.jumbotron |
Jumbotronコンポーネントの表示 |
.jumbotron > .container |
フルワイドの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の使い方
コンポーネント名通りページのヘッダー(見出しタイトル)として使えるのがこのコンポーネント。ページの見出しには積極的に使っていきたいです。
Class名 | 概要 |
---|---|
.page-header |
ページヘッダーを表示 |
<div class="page-header">
<h1>サンプルページの見出し <small>サブタイトルも書けます</small></h1>
</div>