Bootstrapを使ってみる Table編

まずは基本形

20151108_01

これはtableタグにtableクラスを指定しただけの状態。
これだけで何かシャープな感じがする。
コードは以下

theadとtbodyのタグを指定してヘッダと表データを明確に区別すると
表示も変わります。
表内のデータはthタグを指定すると強調されます。

20151108_02

 

table-striped

table-stripedクラスを追加で指定すると、
奇数行に背景色が付くようになる。

20151108_03

 

table-bordered

table-borderedクラスを追加で指定すると、枠線が付き、
従来のテーブル表示に近い形に

20151108_04

 

table-hover

table-hoverクラスを追加で指定すると、
マウスカーソルを合わせた行の色が変わるようになる。
もちろんマウスカーソルを外すと元の色に戻る

20151108_04

 

Condensed table

table-condensedクラスを追加で指定すると、
通常に比べてコンパクトな表になる。
公式の説明みると各Cellのpaddingが半分になっている模様

20151108_05

 

Contextual classes

tr、td、thにクラスを指定することでbuttonの時のように色付けが可能。
trで行単位。
td、thでセル単位に色付けが可能
指定可能なクラスは以下

    • active
      success
      info
      warning
      danger
  • 20151108_06