スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒824-0001
  • 福岡県行橋市行事5丁目3−20
  • TEL : 0930-55-2416

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



パネルの書式: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>

ブラウザでの表示

表を含むパネル