表格
类型
名称 | 描述 |
---|---|
表头 | 一般表格的第一行作为表头,用于描述表中每一列数据名称。为区别于表格其他行,表头具备不同的样式,例如字体加粗等。在垂直显示一组数据的表格中,表头也可能是垂直的第一列,而不是行。 |
内容 | 一般内容会在单元格内靠左对齐,对于数字可能靠右对齐比较好。在一些表格中,内容可以按单元格选择或者按行选择,选中的部分会以不同的样式区分。为了使得行与行便于区分,通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。 |
表尾 | 表位放置与表末尾提供与表相关补充数据或操作,不过并不常见。 |
参数
隔行交替样式的表
.table-striped
# | First Name | Last Name | Username |
---|---|---|---|
1 | Sunshine | Sunday | catouse |
4 | Sunday | Sunshine | catouse |
2 | catouse | azhi | zenUI |
3 | Lady Gaga | catouse |
响应鼠标悬停
.table-hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | Sunshine | Sunday | catouse |
4 | Sunday | Sunshine | catouse |
2 | catouse | azhi | zenUI |
3 | Lady Gaga | catouse |
带所有边框的表格
.table-bordered
# | First Name | Last Name | Username |
---|---|---|---|
1 | Sunshine | Sunday | catouse |
4 | Sunday | Sunshine | catouse |
2 | catouse | azhi | zenUI |
3 | Lady Gaga | catouse |
更为紧凑的表格
.table-condensed
# | First Name | Last Name | Username |
---|---|---|---|
1 | catouse | hello | world |
2 | jay | thks | jajaja |
3 | JK row | thks | Pa |
色彩标记
可以根据语义标记整行或者某一单元格
# | 描述 | Payment Taken | Status |
---|---|---|---|
1 | 表示成功或积极的行为。 | 01/04/2012 | Approved |
2 | 表示一个危险或存有潜在危险的行为。 | 02/04/2012 | Declined |
3 | 表示警告,可能需要注意。 | 03/04/2012 | Pending |
4 | 标记为激活行。 | 04/04/2012 | Call in to confirm |