「Bootstrap ComponentsのJumbotron」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Jumbotron」のサンプルページです。
- classを「jumbotron」にする。
- 「.container」or「.container-fluid」が別途必要
※「.container」or「.container-fluid」がないと見た感じ「padding」の左右が無いだけっぽい。他にも問題あるトコがあるかもしれない。
基本のラベル
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
実際のソース
<div class="container-fluid">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg bootstrap" href="#" role="button">Learn more</a></p>
</div>
</div>フルサイズ（中の余白が狭くなるだけ？）
クラス・containerを中に入れる。
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
実際のソース
<div class="jumbotron">
<div class="container-fluid">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg bootstrap" href="#" role="button">Learn more</a></p>
</div>
</div>.container無し
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
実際のソース
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg bootstrap" href="#" role="button">Learn more</a></p>
</div>