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文件先导入到头文件（粘贴过来就行了）
<meta name="viewport"
//移动设备优
content="width=device-width,initial-scale=1, user-scalable=no”>
<title>demo01></title>
//css文件
<link rel="stylesheet" href="css/bootstrap.min.css"/>
5）我们先写一个简单的表格
<body>
<div class="container">
<table>
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
</div>
</body>
6）我们直接运行，可以看bootstrap是没有设全局的table样式的。
7）在table上加一个class="table"，bootstrap定义了一个table，table是一个基础的表格样式。
<table class="table table-striped">
8）我们再来看运行效果，这就是一个基础的bootstrap表格样式。但我们发表这个表格占满了整个屏幕也就是整个container了。
9）我们将屏幕缩小，可以看到它会依照你的分辨率大小来自适应。
10）接着，我们再来学习“带背条纹表格样式.table-striped”。
（注意：我们在给表格样式的时候，一般是先加基础样式再加其它样式。）
<h1>带条纹</h1>
<table class="table table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
11）运行效果，这样的话每隔一行就会不同的颜色，也方便进行查看。
12）接下来，我们再来看一个“带边框的表格样式.table-border”。
（注意：“带背条纹表格样式.table-striped”和“带边框的表格样式.table-border”可以放在一起使用。）
<h1>带边框</h1>
<table class="table table-bordered table-striped">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
13）运行效果
14）接着，我们学习使用“悬停.table-hover”，代码如下：
<h1>悬停</h1>
<table class="table table-bordered table-striped table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
15）运行效果，当鼠标移动到某一行时，这一行显示成灰色。
16）接着，我们再来学习“紧凑.table-condensed”
<h1>坚凑</h1>
<table class="table table-bordered table-condensed">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
17）运行效果，紧凑型表格也是自适应分辨率，唯一不同的就是内容离边框相对较近。
18）我们将悬停的表格样式的宽度设为600像素，这个只是边距做了不同的设置而已。
19）运行结果
20）然后，我们再来学习行样式.active .success .info
<table class="table table-bordered ">
<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
<tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
21）运行效果，表头是“info”，“success”是绿色表示成功率，“warning”是一个警告，用黄色表示。“danger”是危险用红色表示。这就是设置这些行的颜色，你也不需要自己去定义。
22）最后我们再学习一个表格样式“响应式表格”。“响应式表格”应该注意的是，我们一定要将它放到一个div里边去。div选择器的样式我们叫‘table-responsive’。
<hr />
<div class="row">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
</div>
</div>
23）运行效果，“响应式表格”就是通过媒体查询来判断你这个像素是多少，从而设置表格的大小。
24）或者我们可以再设置一个样式
<hr/>
<div class="row">
<div class="col-sm-4">
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
<tr><td>1</td><td>张三</td><td>22</td></tr>
</table>
</div>
</div>
</div>
25）运行效果，到小屏幕上就是这样的一个分辨率是自动的
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
