php bootstrap表格,初学 Bootstrap 表格

一.基本款

在

编号商品数量

1苹果32西瓜5合计8

在上面两张图中,注意两点,第一,表格是充满了整个网页的;第二,随着网页宽度变大,表格会自适应的变大.

二.条纹表格

通过添加 .table-striped 类可以使

中的行隔行变色.

编号商品数量

1苹果32西瓜53香蕉14西柚6合计15

三.带边框的表格

添加 .table-bordered 类可以给表格和单元格添加边框,为了看到效果,我把表格放到一个容器中.

编号商品数量

1苹果32西瓜53香蕉14西柚6合计15

四.鼠标悬停变色

添加 .table-hover 类可以让

中的行实现鼠标悬停变色.

编号商品数量

1苹果32西瓜53香蕉14西柚6合计15

上图中,鼠标放在第二行上,所以第二行的颜色变得比较深.

五.紧凑型表格

编号商品数量

1苹果32西瓜5合计8

编号商品数量

1苹果32西瓜5合计8

在上图中,注意第二个表格的行高比较小;第一个表格中的

以及 标签的上下左右内边距都是8 px;第二个表格中的是5 px.

六.给表格添加状态类

.active 类可以使行或者单元格变成鼠标悬停时的颜色(#F5F5F5 灰色).

.success 类可以使行或者单元格变成"成功绿"(#E2EFDA).

.info 类可以使行或者单元格变成"信息蓝"(#DCECF6).

.warning 类可以使行或者单元格变成"警告黄"(#FBF8E5).

.danger 类可以使行或者单元格变成"危险红"(#EFDFDE).

编号商品数量

1苹果32西瓜53香蕉14西柚65芒果2合计17

编号商品数量

1苹果32西瓜5合计8

本作品采用《CC 协议》，转载必须注明作者和本文链接