Bootstrap响应式表格详解
作者：ChrissZhao 时间：2023-07-02 05:23:58
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机
下面是手机端显示的样式
代码如下：
1.test.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" />
<script src="jquery-3.2.0.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>汽车信息</h1>
<table class="table table-striped">
<thead>
<tr>
<th>代号</th>
<th>名称</th>
<th class="hidden-xs">系列</th>
<th class="hidden-xs">上市时间</th>
<th class="hidden-xs">油耗</th>
<th class="hidden-xs">功率</th>
<th>价格</th>
<th class="visible-xs-block">详情</th>
</tr>
</thead>
<tbody>
<?php
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from car";
$arr = $db->query($sql,1);
foreach($arr as $v)
{
echo "<tr>
<td>{$v[0]}</td>
<td>{$v[1]}</td>
<td class='hidden-xs'>{$v[2]}</td>
<td class='hidden-xs'>{$v[3]}</td>
<td class='hidden-xs'>{$v[4]}</td>
<td class='hidden-xs'>{$v[5]}</td>
<td>{$v[7]}</td>
<td class='visible-xs-block'>
<button type='button' class='btn btn-primary btn-xs xq' code='{$v[0]}'>详情</button>
</td>
</tr>";
}
?>
</tbody>
</table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">汽车详细信息</h4>
</div>
<div class="modal-body" id="neirong"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(".xq").click(function(){
//显示详细信息
//取代号
var code = $(this).attr("code");
//查询该汽车的所有信息
$.ajax({
url:"chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success: function(data){
var lie = data.trim().split("^");
var str = "<div>代号："+lie[0]+"</div><div>名称："+lie[1]+"</div>
<div>系列："+lie[2]+"</div><div>上市时间："+lie[3]+"</div><div>油耗："+lie[4]+"</div><div>功率："+lie[5]+"</div><div>价格："+lie[7]+"</div>";
$("#neirong").html(str);
//触发模态框
$('#myModal').modal('show');
}
});
})
</script>
</body>
</html>
2.chuli.php
<?php
$code = $_POST["code"];
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from car where code='{$code}'";
echo $db->strquery($sql);
标签：Bootstrap,响应式,表格
0
投稿猜你喜欢
django框架之cookie/session的使用示例(小结)
2023-06-24 08:24:42
python写的ARP攻击代码实例
2023-05-23 19:45:46
浅谈python连续赋值可能引发的错误
2023-07-12 04:13:32
用代码帮你了解Python基础(3)
2021-03-20 07:22:46
jquery动态遍历Json对象的属性和值的方法
2024-06-09 00:53:36
Python实现随机划分图片数据集的示例代码
2021-08-01 16:35:32
Pandas 实现分组计数且不计重复
2022-01-30 03:39:56
详解Python 字符串相似性的几种度量方法
2023-06-19 14:12:39
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2024-04-22 13:06:34
python3 lambda表达式详解
2021-03-01 20:28:20
Python中zip()函数的解释和可视化(实例详解)
2023-11-04 15:02:18
javascript嵌套函数和在函数内调用外部函数的区别分析
2024-04-22 22:44:27
python中append实例用法总结
2023-10-03 09:46:20
在antd Form表单中select设置初始值操作
2024-05-02 17:03:12
python shutil操作文件实例讲解
2022-05-20 06:42:08
网页设计者应当注意九大要点
2007-08-10 13:30:00
如何真正的了解python装饰器
2023-03-16 09:08:23
Visual Studio Code搭建django项目的方法步骤
2022-11-28 22:04:00
是在客户端确认还是在服务器端确认？
2010-07-14 21:05:00
如何使用Pytorch完成图像分类任务详解
2023-10-05 16:37:05
