Bootstrap-jumbotron

ブートストラップ-ジャンボトロン

この章では、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>

Copy

次の例に示すように、すべての .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>

Copy