Bootstrap Jumbotron と ページ見出し

❮ 前章へ 次章へ ❯

Jumbotron の作成

jumbotron とは、いくつかの特別なコンテンツや情報に注意を喚起するための大きなボックスのことです。

jumbotron は、角の丸い灰色のボックスで表示され、その中のテキストのフォントサイズもまた拡大されます。

チップ:jumbotron 内には、他の Bootstrap 要素/クラスを含む、 ほぼすべての妥当な HTML を記述することができます。

jumbotron を作成するには、クラス .jumbotron を持った <div> 要素を使用します:

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.


コンテナ内の Jumbotron

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

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> 要素を使用します:

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
Try it Yourself »

❮ 前章へ 次章へ ❯