<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap响应式表格</title>
<!-- 下面包含相关属性的介绍 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap 样式表 -->
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Bootstrap响应式表格</h2>
<p>特点1：:在小于768px的小型设备下水平滚动。特点2：添加交替单元格的背景色。</p>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>手机号码</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>12345678901</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>12345678902</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>12345678903</td>
</tr>
</tbody>
</table>
</div>
<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 可选: 包含 jQuery 库 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
<script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
二：相关属性的介绍
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport：手机会把一个web页面放到一个虚拟窗口viewport中
width：表示viewport的宽度，一般设置为与屏幕的宽度一致width=device-width
height：表示viewport的高度
initial-scale：页面加载时的缩放比例
maximum-scale：最大比例
minimum-scale：最小比例
user-scalable：是否允许用户进行手动缩放
shrink-to-fit=no：在iOS9中适应屏幕宽度
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
