Bootstrap表格样式
Bootstrap表格样式分类
- 基础样式.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）运行效果，到小屏幕上就是这样的一个分辨率是自动的
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207743.html原文链接：https://javaforall.net
