Bootstrap表格样式分类
- 基础样式:table
- 带背条纹表格:table-striped
- 带边框:table-border
- 悬停:table-hover
- 紧凑:table-condensed
- 行样式 :active 、success 、info
- 响应式表格
操作步骤
- 在桌面新建一个文件夹作为站点来存放页面,以“我的站点”为文件名。(文件名自己随意写)
- 使用DW软件新建站点,站点位置选择自己在桌面新建的文件夹“我的站点”。
新建站点的图文教程 - 在“我的站点”里新建一个html页面“1.html”
- 复制bootstrap需要用到的文件夹到“我的站点”里
下载bootstrap所需的压缩包,解压后就可以复制到站点里用
注:
css文件夹的是bootstrap设定好的样式,确定网页的布局;
fonts文件夹的是bootstrap用到的字体,确定网页内容的字体;
img文件夹的是自己自定义存放的图片;
js文件夹的是bootstrap设定好的脚本语言,确定网页的行为。
- 在“1.html”页面里输入以下代码(头文件部分)
<!DOCTYPE html>
<html lang="en">
<head>
<title>1</title>
<meta charset="UTF-8">
*//width - viewport的宽度 height - viewport的高度
//initial-scale - 初始的缩放比例
//minimum-scale - 允许用户缩放到的最小比例
//maximum-scale - 允许用户缩放到的最大比例
//user-scalable - 用户是否可以手动缩放*
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
//css文件
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
- 写表格(简单的)
<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>
效果如下:(可以看得出来,表格是没有设全局的table样式的)
- 在table上加一个class=“table”,bootstrap定义了一个table,table是一个基础的表格样式。
<table class="table">
效果如下:(我们可以发现这个表格占满了整个屏幕也就是整个container了。)
把页面缩放到屏幕的一半,可以看到它会依照你的分辨率大小来自适应。
(注意:我们在给表格样式的时候,一般是先加基础样式再加其它样式。)
table是基础样式,table-striped是附加样式,完整写table table-striped,基础样式+1个空格+附加样式
- 带背条纹表格样式: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>
效果如下:
- 带边框的表格样式:table-border
table-border和table-striped一起用
<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>
效果如下:
- 悬停: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>
效果如下:(当鼠标移动到某一行时,这一行显示成灰色。)
- 紧凑: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>
效果如下:(紧凑型表格是自适应分辨率,唯一不同的就是内容离边框相对较近。)
- 行样式:active、success、info
<h1> 行样式</h1>
<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>
效果如下:
- 响应式表格
// 响应式表格”就是通过媒体查询来判断你这个像素是多少,从而设置表格的大小。
<h1> 响应式</h1>
<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>
效果如下:
以上为2019-01-16的bootstrap笔记