bootstrap响应式表格实例详解


Posted in Javascript onMay 15, 2017

Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机,现在就bootstrap的响应式举一个例子:

bootstrap响应式表格实例详解

如上图所示,要实现该表格在手机等移动端上只显示代号、名称、和价格,其他以查看详情的方式显示(也就是下图:)

bootstrap响应式表格实例详解

首先,先实现在移动端能由左图到右图的转换:

bootstrap响应式表格实例详解bootstrap响应式表格实例详解

代码如下:

<meta charset="UTF-8">
  <title></title>
  <!--引入bootstrap的css文件-->
  <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" >
  <!--引入js包-->
   
  <!--引入bootstrap的js文件-->
   
  
  
  query($sql);   
   foreach($arr as $v){
 
     echo "
     ";  
     //为什么id='xq'不行?不要用id,id是唯一的,此处有多个查看详情。。。。记住了!!!! 
   } 
 ?>
 <table class="table table-striped">
 <thead>
 <tr>
  <th>代号</th>
  <th>名称</th>
  <th>价格</th>
  <th class="hidden-xs">产地</th> <!-- class="hidden-xs" 目的是在手机上不显示这一列-->
  <th class="hidden-xs">库存</th>
  <th class="hidden-xs">数量</th>
  <th class="visible-xs-block">操作</th>
 </tr>
 </thead>
 <tbody> 
  <!--?php
   require "../DB.class.php";
   $db = new DB();
   $sql = "select * from buyfruits";
   $arr = $db---><tr>
     <td>{$v[0]}</td>
     <td>{$v[1]}</td>
     <td>{$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 class="visible-xs-block">
     <button type="button" class="btn btn-primary btn-sm xq" code="{$v[0]}" id="xq">查看详情</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 nr" 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>";
    $("#neirong").html(str);  
//    $("#mymodal").modal("show"); 双引号不行!!!
//触发模态框
   $('#myModal').modal('show');
   }
  });
 })
</script>

处理页面:chuli.php

<?php
$code=$_POST["code"];
require "../DB.class.php";
$db=new DB();
$sql = "select * from buyfruits where ids='{$code}'";
$arr = $db->strquery($sql);
echo $arr;
?>

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

Javascript 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Vue响应式原理详解
Apr 18 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
什么是SOLID
Mar 24 Javascript
VUE多层路由嵌套实现代码
May 15 #Javascript
JavaScript制作简单的框选图表
May 15 #Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 #Javascript
AngularJs 常用的过滤器
May 15 #Javascript
Vue关于数据绑定出错解决办法
May 15 #Javascript
Jquery把获取到的input值转换成json
May 15 #jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
You might like
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
php类常量用法实例分析
2015/07/09 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
JS防止用户多次提交的简单代码
2013/08/01 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
理解javascript模块化
2016/03/28 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
微信小程序实现点赞业务
2021/02/10 Javascript
Django给admin添加Action的步骤详解
2019/05/01 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
副董事长岗位职责
2014/04/02 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
公司委托书范本5篇
2014/09/20 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Python包argparse模块常用方法
2021/06/04 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL