ジャンボトロン Jumbotron

WEBサイトにおける主要コンテンツを紹介するのに適したワイドな表示スタイル。

使い方

ポイントは3つ。

1. class属性にjumbotronを指定したdiv要素を用意する。
2. class属性にcontainerを指定した要素の内側にジャンボトロンを配置する場合、角を丸くする。
3. class属性にcontainerを指定した要素の外側にジャンボトロンを配置する場合、幅はフル・ワイドとなり、角は丸くしない。

<div class="container">
	<div class="jumbotron">
	</div>
</div>
<div class="jumbotron">
	<div class="container">
	</div>
</div>

class属性にcontainerを指定した要素の内側にジャンボトロンを配置

class属性にcontainerを指定した要素の内側にジャンボトロンを配置する場合、角を丸くする。

表示サンプル

ソースコード

<div class="jumbotron">
	<h1>ジャンボトロン</h1>
	<p>WEBサイトにおける主要コンテンツを紹介するのに適したスタイル。</p>
	<p><a class="btn btn-primary btn-lg" href="./jumbotron.html" role="button">もっと詳しく</a></p>
</div>

class属性にcontainerを指定した要素の外側にジャンボトロンを配置

class属性にcontainerを指定した要素の外側にジャンボトロンを配置する場合、幅はフル・ワイドとなり、角は丸くしない。

表示サンプル

ソースコード

<div class="jumbotron">
	<div class="container">
		<h1>サンプル</h1>
		<p><a href="../components/jumbotron.html#usage1" target="_blank">フル・ワイドのジャンボトロン</a>のサンプル。</p>
	</div>
</div>