最新のWeb開発のチュートリアル
 

Bootstrap Jumbotron and Page Header


ジャンボトロンの作成

ジャンボトロンは、いくつかの特別なコンテンツや情報に特別な注意を呼び出すための大きな箱を示しています。

ジャンボトロンは、角の丸いグレーのボックスとして表示されます。 それはまた、内部のテキストのフォントサイズを拡大します。

ヒント:ジャンボトロン内には、他を含め、ほぼすべての有効な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ページヘッダを作成するには:

<div class="page-header">
  <h1>Example Page Header</h1>
</div>
»それを自分で試してみてください