微信小程序如何开发_Bootstrap响应式表格详解

2021-01-12 11:06

Bootstrap响应式表格详解       这篇文章主要为大家详细介绍了Bootstrap响应式表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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="libs/html5shiv/3.7.0/html5shiv.js" /script 
 script src="libs/respond.js/1.3.0/respond.min.js" /script 
 ![endif]-- 
 /head 
 body 
 h1 汽车信息 /h1 
 table 
 thead 
 th 代号 /th 
 th 名称 /th 
 th 系列 /th 
 th 上市时间 /th 
 th 油耗 /th 
 th 功率 /th 
 th 价格 /th 
 th 详情 /th 
 /tr 
 /thead 
 tbody 
 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 {$v[2]} /td 
 td {$v[3]} /td 
 td {$v[4]} /td 
 td {$v[5]} /td 
 td {$v[7]} /td 
 button type='button' code='{$v[0]}' 详情 /button 
 /td 
 /tr 

 !-- 模态框（Modal） -- 
 div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" 
 div 
 div 
 div 
 button type="button" data-dismiss="modal" aria-hidden="true" times; /button 
 h4 id="myModalLabel" 汽车
 /div 
 div id="neirong" /div 
 div 
 button type="button" data-dismiss="modal" 关闭 /button 
 /div 
 /div !-- /.modal-content -- 
 /div !-- /.modal -- 
 /div 

 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 
 $("#(str);
 //触发模态框
 $('#myModal').modal('show');
 /script 
 /body 
 /html 

2.chuli.php

$code = $_POST["code"];
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from car where code='{$code}'";
echo $db- strquery($sql);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。