组件

项目中各种通用的 UI 组件的示例

表格

用于各种使用统计表格或数据列表的场景。

	字体大小	行高	字体颜色	补白	边框粗细	边框颜色
表头	`16px`	`40px`	`#4C4C4C`	纵：`10px` 横：`15px`	`2px`	`#ECF4FB`
表身	`14px`	`40px`	`#666666`	纵：`10px` 横：`15px`	`1px`	`#ECF4FB`

组件来自 Bootstrap 3，使用方法参见官方文档。

目录

普通表格
隔行换色表格
带边框表格
悬停变色表格
紧缩表格

普通表格

#	校区	年级	班级
1	刺暮校区	高三年级	刺暮二班
2	第十一校区	高三年级	高三一班
3	十八罗汉分校	高二年级	高二十班

<!-- HTML -->

<table class="table">
  ...
</table>

隔行换色表格

#	校区	年级	班级
1	刺暮校区	高三年级	刺暮二班
2	第十一校区	高三年级	高三一班
3	十八罗汉分校	高二年级	高二十班

<!-- HTML -->

<table class="table table-striped">
  ...
</table>

带边框表格

#	校区	年级	班级
1	刺暮校区	高三年级	刺暮二班
2	第十一校区	高三年级	高三一班
3	十八罗汉分校	高二年级	高二十班

<!-- HTML -->

<table class="table table-bordered">
  ...
</table>

悬停变色表格

#	校区	年级	班级
1	刺暮校区	高三年级	刺暮二班
2	第十一校区	高三年级	高三一班
3	十八罗汉分校	高二年级	高二十班

<!-- HTML -->

<table class="table table-hover">
  ...
</table>

紧缩表格

#	校区	年级	班级
1	刺暮校区	高三年级	刺暮二班
2	第十一校区	高三年级	高三一班
3	十八罗汉分校	高二年级	高二十班

<!-- HTML -->

<table class="table table-condensed">
  ...
</table>

设计师开发者