Bootstrap-jumbotron
提供:Dev Guides
ブートストラップ-ジャンボトロン
この章では、Bootstrapがサポートするもう1つの機能であるJumbotronについて説明します。 名前が示すように、このコンポーネントはオプションで見出しのサイズを増やし、ランディングページのコンテンツに多くのマージンを追加できます。 ジャンボトロンを使用するには-
- .jumbotron のクラスでコンテナ<div>を作成します。
- 大きい<h1>に加えて、_font-weight_は200pxに削減されます。
次の例はこれを示しています-
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>
次の例に示すように、すべての .container クラスの外で .jumbotron クラスを使用し、代わりに .container を追加して、角のない全幅のジャンボトロンを取得します-
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>