表格 > 普通表格

普通表格

通过给表格<table>添加样式.table-bordered 来为表格添加边框样式。

列名 1 列名 2 列名 3 列名 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4

No Padding

通过给表格 <table> 增加样式.table-striped 来为表格增加奇偶行不同背景风格。
列名 1 列名 2 列名 3 列名 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4

表格浮动效果

通过给表格<table> 增加样式.table-hover来为表格增加鼠标悬浮效果
# 用户名
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Wise Man @myorange

每行都有颜色的表格

通过为你的TR和TD <tr>添加样式.success, .danger, .warning.info 来指定背景颜色
# 产品 付款时间 状态
1 TB - Monthly 01/04/2012 已批准
2 TB - Monthly 02/04/2012 拒绝
3 TB - Monthly 03/04/2012 未明确
4 TB - Monthly 04/04/2012 需要电话确认

Condenced table + combined prev. classes

可以通过为表格<table>增加样式 .table-bordered .table-striped .table-condensed .table-hover .smart-form .has-tickbox 来应用组合效果
列名 1 列名 2 列名 3 列名 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4
行 1 行 2 行 3 行 4