トップページ >  Bootstrap >  Bootstrapのアラート
初版2014/07/11： 最終更新日2014/07/11
  Bootstrapのアラート
目次
・Bootstrapのアラート
・Bootstrapのアラートに罫線を入れる
・Bootstrapのアラートを横にスクロールできるようにする
Bootstrapのアラート
Bootstrapでアラートを表示します。
div要素のclassにalert属性を追加します。
また、色を変えることができ、alert-success,alert-warning,alert-danger,alert-infoを指定すると色が変わります。

<div class="container">
  <table class="table">
    <tr>
      <th>ヘッダ１</th>
      <th>ヘッダ２</th>
    </tr>
    <tr>
      <td>1行1列</td>
      <td>1行2列</td>
    </tr>
    <tr>
      <td>2行1列</td>
      <td>2行2列</td>
    </tr>
  </table>
</div>

テーブルレイアウトを使用したDEMOです。

Bootstrapのアラートに罫線を入れる
Bootstrapのアラートに罫線を入れることができます。
class="table-bordered"を追加すると罫線が入ります。

<div class="container">
  <table class="table table-bordered">
    <tr>
      <th>ヘッダ１</th>
      <th>ヘッダ２</th>
    </tr>
    <tr>
      <td>1行1列</td>
      <td>1行2列</td>
    </tr>
    <tr>
      <td>2行1列</td>
      <td>2行2列</td>
    </tr>
  </table>
</div>

テーブルに罫線入れたDEMOです。

Bootstrapのアラートに罫線を入れる
Bootstrapでは偶数行の色を変えることが簡単にできます。
class="table-striped"を追加すると偶数行の背景色がグレーになります。

<div class="container">
  <table class="table table-striped">
    <tr>
      <th>ヘッダ１</th>
      <th>ヘッダ２</th>
    </tr>
    <tr>
      <td>1行1列</td>
      <td>1行2列</td>
    </tr>
    <tr>
      <td>2行1列</td>
      <td>2行2列</td>
    </tr>
    <tr>
      <td>3行1列</td>
      <td>3行2列</td>
    </tr>
    <tr>
      <td>4行1列</td>
      <td>4行2列</td>
    </tr>
  </table>
</div>

テーブルの偶数行の背景色を変えたDEMOです。

特定の行だけ色を変更したい場合は、trタグのclass属性にdanger,success,warning,activeのいずれかを指定すると行単位で色を変更することが可能になります。
また、ヘッダーの色を変えることもでき、偶数行の背景色を変更していても特定行のclass指定が優先されます。

<div class="container">
  <table class="table table-striped">
    <tr class="danger">
      <th>ヘッダ１</th>
      <th>ヘッダ２</th>
    </tr>
    <tr class="success">
      <td>1行1列</td>
      <td>1行2列</td>
    </tr>
    <tr class="warning">
      <td>2行1列</td>
      <td>2行2列</td>
    </tr>
    <trclass="active">
      <td>3行1列</td>
      <td>3行2列</td>
    </tr>
    <tr>
      <td>4行1列</td>
      <td>4行2列</td>
    </tr>
  </table>
</div>

テーブルの特定行の背景色を変えたDEMOです。

Bootstrapのアラートを横にスクロールできるようにする
Bootstrapで表示するテーブルが横に長い場合に自動的にスクロールしてくれるようにすることができます。
tableタグをdivタグで囲み、divタグのclass属性にtable-responsiveを指定します。

<div class="table-responsive">
  <table class="table table-striped">
    <tr>
      <th>ヘッダ１</th>
      <th>ヘッダ２</th>
      <th>ヘッダ３</th>
      <th>ヘッダ４</th>
      <th>ヘッダ５</th>
      <th>ヘッダ６</th>
      <th>ヘッダ７</th>
      <th>ヘッダ８</th>
      <th>ヘッダ９</th>
      <th>ヘッダ１０</th>
      <th>ヘッダ１１</th>
      <th>ヘッダ１２</th>
      <th>ヘッダ１３</th>
      <th>ヘッダ１４</th>
      <th>ヘッダ１５</th>
      <th>ヘッダ１６</th>
    </tr>
    <tr>
      <td>1行1列</td>
      <td>1行2列</td>
      <td>1行3列</td>
      <td>1行4列</td>
      <td>1行5列</td>
      <td>1行6列</td>
      <td>1行7列</td>
      <td>1行8列</td>
      <td>1行9列</td>
      <td>1行10列</td>
      <td>1行11列</td>
      <td>1行12列</td>
      <td>1行13列</td>
      <td>1行14列</td>
      <td>1行15列</td>
      <td>1行16列</td>
    </tr>
    <tr>
      <td>1行1列</td>
      <td>1行2列</td>
      <td>1行3列</td>
      <td>1行4列</td>
      <td>1行5列</td>
      <td>1行6列</td>
      <td>1行7列</td>
      <td>1行8列</td>
      <td>1行9列</td>
      <td>1行10列</td>
      <td>1行11列</td>
      <td>1行12列</td>
      <td>1行13列</td>
      <td>1行14列</td>
      <td>1行15列</td>
      <td>1行16列</td>
    </tr>
  </table>
</div>

テーブルをレスポンシブに対応したDEMOです。

HOME