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 相关文章推荐
jQuery中:empty选择器用法实例
Dec 30 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
JS排序之选择排序详解
Apr 08 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
PHP 编程的 5个良好习惯
2009/02/20 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
Python的Django框架安装全攻略
2015/07/15 Python
Python 内置函数complex详解
2016/10/23 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python多线程抽象编程模型详解
2019/03/20 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
化妆品店促销方案
2014/02/24 职场文书
会计岗位职责模板
2014/03/12 职场文书
房地产广告策划方案
2014/05/15 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
个人工作年终总结
2015/03/09 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
青春雷锋观后感
2015/06/10 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书