ジャンボトロン

ジャンボトロンの作成

ジャンボトロンは、特別なコンテンツや情報に特別な注意を払うための大きなボックスを示します。
ジャンボトロンは、角が丸い灰色のボックスとして表示されます。また、その中のテキストのフォントサイズを拡大します。
ヒント: ジャンボトロンの中には、他のBootstrapの要素やクラスを含め、ほぼすべての有効なHTMLを置くことができます。
ジャンボトロンを作成するには、クラス .jumbotron<div> タグに追加します。

container内のジャンボトロン

ジャンボトロンを画面の端まで伸ばさないようにするには、ジャンボトロンを <div class="container"> の中に置きます。

Bootstrapチュートリアル

Bootstrapは、モバイルファーストウェブサイトを開発するための最も一般的なHTML、CSS、およびJavaScriptフレームワークです。

Bootstrapは完全に無料で使用できます!

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrapチュートリアル</h1> 
    <p>Bootstrapは、モバイルファーストウェブサイトを開発するための最も一般的なHTML、CSS、およびJavaScriptフレームワークです。</p> 
  </div>
  <p>Bootstrapは完全に無料で使用できます!</p> 
</div>

container外のジャンボトロン

ジャンボトロンを画面の端まで伸ばしたい場合は、ジャンボトロンを <div class="container"> の外側に置きます。

<div class="jumbotron">
  <h1>Bootstrapチュートリアル</h1> 
  <p>Bootstrapは、モバイルファーストウェブサイトを開発するための最も一般的なHTML、CSS、およびJavaScriptフレームワークです。</p> 
</div>
<div class="container">
  <p>Bootstrapは完全に無料で使用できます!</p> 
</div>

ページヘッダーの作成

ページヘッダーはセクションディバイダーに似ています。
.page-header クラスは、見出しの下に水平線を追加します(+要素の周りに余白を追加します)。

<div class="page-header">
  <h1>ページヘッダー</h1>
</div>