Greenapple-room

Bs3doc：Jumbotron

2016.01.03 Bootstrap Ver3 Jumbotron ドキュメント

Jumbotron（ジャンボトロン）

ジャンボトロン（ページトップなどに表示する見出しユニット）を表示します。
名前が変わりましたが、Bootstrap2でいうところのhero-unit（ヒーローユニット）です。
（ウィンドウ幅いっぱいで表示の説明箇所で、背景の壁紙とJumbotronの背景色が似通っていて分かりづらいためにJumbotronの背景色を少し暗めに変更しています）

サンプル01－ジャンボトロン表示
サンプル02－ジャンボトロンをウィンドウ幅いっぱいで表示

サンプル01－ジャンボトロン表示

Bootstrapの使い方

Bootstrapの新バージョン、Bootstrap3がリリースされました。
今流行のフラットデザイン・レスポンシブデザインがデフォルト・旧ブラウザ(IE7以前・Firefox3.6)のサポート打ち切りなどなど。
・・・・

<div class="jumbotron">
    <h1>Bootstrapの使い方</h1>
    <p>
        Bootstrapの新バージョン、Bootstrap3がリリースされました。<br>
        今流行のフラットデザイン・レスポンシブデザインがデフォルト・旧ブラウザ(IE7以前・Firefox3.6)のサポート打ち切りなどなど。<br>
        ・・・・
    </p>
    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

コーディング

.jumbotron: 01行目　ジャンボトロン内に表示したいタグを.jumbotronで囲みます

サンプル02－ジャンボトロンをウィンドウ幅いっぱいで表示

Bootstrapの使い方

Bootstrapの新バージョン、Bootstrap3がリリースされました。
今流行のフラットデザイン・レスポンシブデザインがデフォルト・旧ブラウザ(IE7以前・Firefox3.6)のサポート打ち切りなどなど。
・・・・

<div class="jumbotron">
    <div class="container">
        <h1>Bootstrapの使い方</h1>
        <p>
            Bootstrapの新バージョン、Bootstrap3がリリースされました。<br>
            今流行のフラットデザイン・レスポンシブデザインがデフォルト・旧ブラウザ(IE7以前・Firefox3.6)のサポート打ち切りなどなど。<br>
            ・・・・
        </p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
    </div>
</div>

仕様

.container外の描画範囲は、ウィンドウの幅と同等になります
.container外で.jumbotronを指定すると、同様に.jumbotronの描画範囲もウィンドウの幅と同等になりグレー背景がウィンドウ枠いっぱいに描画されます
その中で.containerを定義し表示コードを記述していくと、ウィンドウ幅いっぱいを使用したジャンボトロンが出来上がります

コーディング

.jumbotron: 01行目　.containerを.jumbotronで囲みます

© Copyright 2024 GreenApple-Room