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 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
JS封装cavans多种滤镜组件
Feb 15 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之第三天
2006/10/09 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python中集合类型(set)学习小结
2015/01/28 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
c/c++某大公司的两道笔试题
2014/02/02 面试题
电子商务毕业生求职信
2013/11/10 职场文书
求职信怎么写范文
2014/05/26 职场文书
五一劳动节活动总结
2015/02/09 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
MySQL Server 层四个日志
2022/03/31 MySQL
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电