响应式前端框架Bootstrap系列(4)表格

通过bs,可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。

,
标签 描述
),用来标识表格列。)。 内使用。
为表格添加基础样式。
表格标题行的容器元素(
表格主体中的表格行的容器元素(
一组出现在单行上的表格单元格的容器元素()。
默认的表格单元格。
特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在
关于表格存储内容的描述或总结。
标签样式有以下几种:

.table 表格基本样式
.table-striped 在

内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.table-responsive 可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。


基本建表演示代码:

基本的表格布局
产品 付款日期 状态
产品1 23/11/2013 待发货
产品2 10/11/2013 发货中
产品3 20/10/2013 待确认
产品4 20/10/2013 已退货
效果图:

响应式前端框架Bootstrap系列(4)表格_第1张图片

实际应用中,基本表格并不能满足需求,bs已经为我们考虑到了,我们还可以在

添加色彩样式,实现类似于带状态的表格效果,色彩样式有以下几种:

.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作


演示代码:

带状态表格布局
产品 付款日期 状态
产品1 23/11/2013 待发货
产品2 10/11/2013 发货中
产品3 20/10/2013 待确认
产品4 20/10/2013 已退货
效果图:

响应式前端框架Bootstrap系列(4)表格_第2张图片

你可能感兴趣的:(前端集合,bootstrap3)