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

Bootstrapのコードを少しずつまとめていきます。
今回はパネルの書式です。

パネルは「ヘッダー」「本文」「フッター」で構成される囲み記事です。

<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>

<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>

<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>