ジャンボトロンの作成
ジャンボトロンは、いくつかの特別なコンテンツや情報に特別な注意を呼び出すための大きな箱を示しています。
ジャンボトロンは、角の丸いグレーのボックスとして表示されます。 それはまた、内部のテキストのフォントサイズを拡大します。
ヒント:ジャンボトロン内には、他を含め、ほぼすべての有効なHTML、置くことができるBootstrap要素/クラスを。
使用し<div>
クラスを持つ要素を.jumbotron
ジャンボトロンを作成するには:
Bootstrapチュートリアル
Bootstrapウェブ上で応答して、モバイル-最初のプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSのフレームワークです。
ジャンボトロン容器内部
内部のジャンボトロンを配置し<div class="container">
あなたはジャンボトロンは、画面の端に拡張しないようにしたい場合:
例
<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>
»それを自分で試してみてください コンテナ外ジャンボトロン
外ジャンボトロン置き<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>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
»それを自分で試してみてください ページヘッダーの作成
ページヘッダーは、セクションの分周器のようなものです。
.page-header
クラスは、見出しの下に水平線を追加します(+要素の周りにいくつかの余分なスペースを追加します):
例ページヘッダ
使用し<div>
クラスを持つ要素を.page-header
ページヘッダを作成するには: