パネルの書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はパネルの書式です。
パネルは「ヘッダー」「本文」「フッター」で構成される囲み記事です。
パネルの作成
パネルを作成する際に使用するclassは以下の表のとおりです。
要素 | class | 概要 |
---|---|---|
div | panel | パネルの範囲 |
div | panel-default | パネルの色(デフォルト色) |
div | panel-heading | パネルのヘッダー |
h1~h6 | panel-title | h1~h6の見出しをパネル用の書式に変更 |
div | panel-body | パネルの本文 |
div | panel-footer | パネルのフッター |
HTML
<div class="panel panel-default"> <div class="panel-heading"><h2 class="panel-title">初めてホームページを作る方へ</h2></div> <div class="panel-body"> <p>どういう人にホームページを見てほしいのか?たとえばビジネス用のホームページならば、ビジネスの成果に直結するような人に多く来訪したもらいたいものです。アクセス増を焦るあまり、不特定対数を呼び込んでもあまり意味がありません。</p> <p>ターゲットを明確にすること。ターゲットはビジネスの結果に直結するような方に設定することです。</p> </div> <div class="panel-footer text-right">更新日 2016/03/07</div> </div>
ブラウザでの表示
パネルの色
各色のclassは以下の表のとおりです。
class | 色 |
---|---|
panel-default | デフォルトの色 |
panel-primary | 青系 |
panel-success | 緑系 |
panel-info | 薄い青系 |
panel-warning | 黄系 |
panel-danger | 薄い赤系 |
HTML
<div class="panel panel-primary"> <div class="panel-heading"><h2 class="panel-title">初めてホームページを作る方へ</h2></div> <div class="panel-body"> <p>ターゲットを明確にすること。ターゲットはビジネスの結果に直結するような方に設定することです。</p> </div> <div class="panel-footer text-right">更新日 2016/03/07</div> </div> <div class="panel panel-success"> <div class="panel-heading"><h2 class="panel-title">初めてホームページを作る方へ</h2></div> <div class="panel-body"> <p>ターゲットを明確にすること。ターゲットはビジネスの結果に直結するような方に設定することです。</p> </div> <div class="panel-footer text-right">更新日 2016/03/07</div> </div> <div class="panel panel-info"> <div class="panel-heading"><h2 class="panel-title">初めてホームページを作る方へ</h2></div> <div class="panel-body"> <p>ターゲットを明確にすること。ターゲットはビジネスの結果に直結するような方に設定することです。</p> </div> <div class="panel-footer text-right">更新日 2016/03/07</div> </div> <div class="panel panel-warning"> <div class="panel-heading"><h2 class="panel-title">初めてホームページを作る方へ</h2></div> <div class="panel-body"> <p>ターゲットを明確にすること。ターゲットはビジネスの結果に直結するような方に設定することです。</p> </div> <div class="panel-footer text-right">更新日 2016/03/07</div> </div> <div class="panel panel-danger"> <div class="panel-heading"><h2 class="panel-title">初めてホームページを作る方へ</h2></div> <div class="panel-body"> <p>ターゲットを明確にすること。ターゲットはビジネスの結果に直結するような方に設定することです。</p> </div> <div class="panel-footer text-right">更新日 2016/03/07</div> </div>
ブラウザでの表示
表を含むパネル
class「panel」の中に直接table要素を記述します。
HTML
<div class="panel panel-danger"> <div class="panel-heading">大特価PC販売中:在庫残りわずか!</div> <div class="panel-body"> <p>大特価PC残りわずかとなっております。早い者勝ち!全て行橋工場生産の日本製です。</p> </div> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr><th>製品No.</th><th>タイプ</th><th>OS</th><th>MSオフィス</th><th>一般料金</th><th>会員料金</th></tr> </thead> <tbody> <tr><td>hts001</td><td>デスクトップ</td><td>win10</td><td>有</td> <td class="text-right">68,800円</td> <td class="text-right">68,000円</td></tr> <tr><td>hts002</td><td>デスクトップ</td><td>win7</td><td>有</td><td class="text-right">77,800円</td> <td class="text-right">77,000円</td></tr> <tr><td>hts003</td><td>ノート</td><td>win10</td><td>有</td><td class="text-right">84,800円</td> <td class="text-right">84,400円</td></tr> <tr><td>hts004</td><td>ノート</td><td>win10</td><td>無</td> <td class="text-right">74,800円</td> <td class="text-right">74,400円</td></tr> <tr><td>hts005</td><td>ノート</td><td>win7</td><td>有</td> <td class="text-right">95,200円</td> <td class="text-right">94,400円</td></tr> </tbody> </table> </div> </div>