Bootstrap响应式表格详解


Posted in Javascript onMay 23, 2017

Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

Bootstrap响应式表格详解

下面是手机端显示的样式

Bootstrap响应式表格详解

代码如下:

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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
探索node之事件循环的实现
Oct 30 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 #Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 #Javascript
详解vue嵌套路由-params传递参数
May 23 #Javascript
详解vue嵌套路由-query传递参数
May 23 #Javascript
vue-router 中router-view不能渲染的解决方法
May 23 #Javascript
angular+webpack2实战例子
May 23 #Javascript
jquery实现图片轮播器
May 23 #jQuery
You might like
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
javascript实现画板功能
2020/04/12 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
python抓取百度首页的方法
2015/05/19 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Pytorch之Variable的用法
2019/12/31 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
教你打造完美的创业计划书
2014/01/06 职场文书
教师节活动总结
2014/08/29 职场文书
话题作文之成长
2019/12/09 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Java tomcat手动配置servlet详解
2021/11/27 Java/Android