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)运行效果,到小屏幕上就是这样的一个分辨率是自动的