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

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

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

                                       

代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--引入bootstrap的css文件-->

		<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"  />

		<!--引入js包-->

		<script src="../jquery-3.2.0.js"></script>

		<!--引入bootstrap的js文件-->

	    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

	</head>

	<body>

		<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->query($sql);

            foreach($arr as $v){

            	   echo "

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

			     //为什么id='xq'不行？不要用id，id是唯一的，此处有多个查看详情。。。。记住了！！！！

            }

	?>

  </tbody>

</table>

	</body>

</html>

　　其次：实现点击查看详情出现模态框

<!-- 引用模态框（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;

?>

　　

bootstrap实例 之 响应式表格-----2017-05-15的更多相关文章

  1. 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

    本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...

  2. Bootstrap 响应式表格

    响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...

  3. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  4. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  5. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

  6. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  7. 使用Bootstrap 3开发响应式网站实践02,轮播

    本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...

  8. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Spring+SpringMVC+MyBatis+easyUI整合优化篇（三）代码测试

    日常啰嗦 看到标题你可能会问为什么这一篇会谈到代码测试,不是说代码优化么?前两篇主要是讲了程序的输出及Log4j的使用,Log能够帮助我们进行bug的定位,优化开发流程,而代码测试有什么用呢?其实测试 ...

  2. 浅谈HTTP中Get与Post的区别[转载]

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  3. 老李分享：《Linux Shell脚本攻略》 要点（二）

    老李分享:<Linux Shell脚本攻略> 要点(二)   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课 ...

  4. AngularJS1.X学习笔记2-数据绑定

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了 ...

  5. 常用SQL_官方文档使用

    SQL语句基础理论 SQL是操作和检索关系型数据库的标准语言,标准SQL语句可用于操作关系型数据库. 5大主要类型: ①DQL(Data Query Language,数据查询语言)语句,主要由于se ...

  6. [Paxos] Paxos Made Simple 读后感

    Paxos 由著名图灵奖获得者Leslie Lamport提出,该算法是分布式一致性算法中的奠基之作,今天初读此文仅将相关学习心得予以记录. 1.Paxos 是什么?主要用来解决什么问题? Paxos ...

  7. spring之注解

    1.@Autowired 可以对成员变量.方法和构造函数进行自动配置(根据类型进行自动装配) public class UserImpl implements User { @Autowired pr ...

  8. 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  9. 【小瑕疵】在div里插入img后在底部留有缝隙怎么解决

    [本文转载自http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html] 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图 ...

  10. 关于Java中Arrays.sort()方法TLE

    最近一直在练用Java写题,今天无意发现一道很简单的二分题(链接),我一开始是直接开int[]数组调用Arrays.sort()去排序,没想到TLE了,原来是因为jdk中对于int[]的排序是使用快速 ...