脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap响应式表格

Bootstrap响应式表格详解

 更新时间：2017年05月23日 10:32:46   作者：ChrissZhao  
这篇文章主要为大家详细介绍了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="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">&times;</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);

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

您可能感兴趣的文章:

相关文章

  • 基于JS实现一个随机生成验证码功能

    基于JS实现一个随机生成验证码功能

    这篇文章主要介绍了基于JS实现一个随机生成验证码功能，随机生成一个四位数的验证码，本文通过实例代码给大家介绍的非常详细具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • layer更改皮肤的实现方法

    layer更改皮肤的实现方法

    今天小编就为大家分享一篇layer更改皮肤的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 关于小程序优化的一些建议(小结)

    关于小程序优化的一些建议(小结)

    这篇文章主要介绍了关于小程序优化的一些建议(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • switch语句的妙用(必看篇)

    switch语句的妙用(必看篇)

    下面小编就为大家带来一篇switch语句的妙用(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js对象数组按属性快速排序

    js对象数组按属性快速排序

    前一篇《关于selector性能比赛》中提到，目测觉得在$("div,p,a")这样有逗号时，sizzle耗时异常（600多个元素，花了200ms），说是它可能没有优化ie下的排序。
    2011-01-01
  • 微信小程序使用第三方库Underscore.js步骤详解

    微信小程序使用第三方库Underscore.js步骤详解

    大家都知道Underscore.js是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。那么这篇文章我们就来学习下微信小程序如何使用第三方库Underscore.js，有需要的可以参考学习。
    2016-09-09
  • 漂亮实用的页面loading(加载)封装代码

    漂亮实用的页面loading(加载)封装代码

    要做一个异步登录，打算给用户做一点提示，所以就网上找了点代码，自己修改新增了一些，做了一个html+css+js的功能封装,供大家参考，需要的朋友参考下吧
    2017-02-02
  • DEDECMS如何为文章添加HOT NEW标志图片

    DEDECMS如何为文章添加HOT NEW标志图片

    再用织梦建站的时候，常常需要要在列表页添加前两天的文章后面添加个new小图片，那么此功能是怎么实现的呢，下面通过本文给大家详解dedecms为文章添加HOT NEW标志图片，需要的朋友可以参考下
    2015-08-08
  • js与applet相互调用的方法

    js与applet相互调用的方法

    这篇文章主要介绍了js与applet相互调用的方法,结合实例形式分析了js调用java的applet以及java调用js的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 常见浏览器多长时间会提示“脚本运行时间过长”总结

    常见浏览器多长时间会提示“脚本运行时间过长”总结

    这篇文章主要介绍了常见浏览器多长时间会提示“脚本运行时间过长”总结,需要的朋友可以参考下
    2014-04-04

最新评论