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>

尝试一下 »

結果は以下のとおりです。

超大屏幕(Jumbotron)

全幅を占有し、角丸なしのジャンボトロンを得るには、すべての.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>

尝试一下 »

結果は以下のとおりです。

全宽的超大屏幕(Jumbotron)
其他扩展