jumbotron とは、いくつかの特別なコンテンツや情報に注意を喚起するための大きなボックスのことです。
jumbotron は、角の丸い灰色のボックスで表示され、その中のテキストのフォントサイズもまた拡大されます。
チップ:jumbotron 内には、他の Bootstrap 要素/クラスを含む、 ほぼすべての妥当な HTML を記述することができます。
jumbotron を作成するには、クラス .jumbotron
を持った <div>
要素を使用します:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
jumbotron を画面の端まで拡大しないようにする場合は、<div class="container">
内に jumbotron を配置します:
<div class="container">
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing
responsive, mobile-first projects on the
web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Try it Yourself »
jumbotron を画面の端まで拡大したい場合は、<div class="container">
の外に jumbotron を配置します:
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS
framework for developing responsive,
mobile-first projects on the
web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Try it Yourself »
ページ見出しは、セクション区切りのようなものです。
.page-header
クラスは、見出しに下線を追加します(+ 要素周りに特別なスペースを追加します):
ページ見出しを作成するには、クラス .page-header
を持つ <div>
要素を使用します: