Bootstrap 超大屏幕(Jumbotron)
この章では、Bootstrapがサポートするもう一つの機能、ジャンボトロン(Jumbotron)について説明します。名前の通り、このコンポーネントは見出しのサイズを大きくし、ランディングページのコンテンツにより多くのマージン(margin)を追加します。ジャンボトロン(Jumbotron)を使用する手順は次のとおりです。
- class を持つ.jumbotron. のコンテナ <div> を作成します。
- より大きな<h1>に加えて、フォントの太さfont-weight200 に減らされます。
以下の例はこの点を示しています。
实例
<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面!</h1>
<p>これは超大スクリーン(Jumbotron)の例です。</p>
<p><a class="btn btn-primary btn-lg" role="button">学习更多</a>
</p>
</div>
</div>
尝试一下 »
結果は以下のとおりです。
全幅を占有し、角丸なしのジャンボトロンを得るには、すべての.containerclass 外での使用.jumbotronclass、以下の例に示すように
实例
<div class="jumbotron">
<div class="container">
<h1>欢迎登陆页面!</h1>
<p>これは超大スクリーン(Jumbotron)の例です。</p>
<p><a class="btn btn-primary btn-lg" role="button">学习更多</a>
</p>
</div>
</div>
尝试一下 »
結果は以下のとおりです。