Bootstrap表格样式

Bootstrap表格样式

---

Bootstrap表格样式分类

1. 基础样式.table

   
   

2.带背条纹表格.table-striped

3.带边框.table-border

4.悬停.table-hover

5.紧凑.table-condensed

6.行样式 .active .success .info

7.响应式表格

---

具体使用操作

学习如何使用基础表格样式、带背条纹表格样式、带边框表格样式、悬停表格样式、紧凑表格样式以及行表格样式。

1）新建一个web项目ch05

2）将先前做的ch04的css和js文件模版导入到ch05

3）复制ch04中demo01.html的头文件

4）在ch05中新建一个demo01.html，接着再打开ch05中的demo01.html，将移动设备优和css文件先导入到头文件（粘贴过来就行了）

name="viewport"

//移动设备优

content="width=device-width,initial-scale=1, user-scalable=no”>

//css文件

5）我们先写一个简单的表格

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

6）我们直接运行，可以看bootstrap是没有设全局的table样式的。

7）在table上加一个class="table"，bootstrap定义了一个table，table是一个基础的表格样式。

8）我们再来看运行效果，这就是一个基础的bootstrap表格样式。但我们发表这个表格占满了整个屏幕也就是整个container了。

9）我们将屏幕缩小，可以看到它会依照你的分辨率大小来自适应。

10）接着，我们再来学习“带背条纹表格样式.table-striped”。

（注意：我们在给表格样式的时候，一般是先加基础样式再加其它样式。）

带条纹

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

11）运行效果，这样的话每隔一行就会不同的颜色，也方便进行查看。

12）接下来，我们再来看一个“带边框的表格样式.table-border”。

（注意：“带背条纹表格样式.table-striped”和“带边框的表格样式.table-border”可以放在一起使用。）

带边框

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

13）运行效果

14）接着，我们学习使用“悬停.table-hover”，代码如下：

悬停

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

15）运行效果，当鼠标移动到某一行时，这一行显示成灰色。

16）接着，我们再来学习“紧凑.table-condensed”

坚凑

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

17）运行效果，紧凑型表格也是自适应分辨率，唯一不同的就是内容离边框相对较近。

18）我们将悬停的表格样式的宽度设为600像素，这个只是边距做了不同的设置而已。

19）运行结果

20）然后，我们再来学习行样式.active .success .info

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

21）运行效果，表头是“info”，“success”是绿色表示成功率，“warning”是一个警告，用黄色表示。“danger”是危险用红色表示。这就是设置这些行的颜色，你也不需要自己去定义。

22）最后我们再学习一个表格样式“响应式表格”。“响应式表格”应该注意的是，我们一定要将它放到一个div里边去。div选择器的样式我们叫‘table-responsive’。

---

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

23）运行效果，“响应式表格”就是通过媒体查询来判断你这个像素是多少，从而设置表格的大小。

24）或者我们可以再设置一个样式

---

   

     

序号	姓名	年龄
1	张三	22
1	张三	22
1	张三	22
1	张三	22
1	张三	22

   

25）运行效果，到小屏幕上就是这样的一个分辨率是自动的