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. Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  2. net.sz.framework 框架 轻松搭建服务---让你更专注逻辑功能---初探

    前言 在之前的文章中,讲解过 threadmodel,socket tcp ,socket http,log,astart ,scripts: 都是分片讲解,从今天开始,将带大家,一窥 net.sz. ...

  3. Linux云自动化运维第八课

    第十三单元 软件安装 一.软件名称识别 [abrt-addon-ccpp]-[2.1.11-19].[el7].[x86_64].rpm ###rpm结尾的适用与redhat操作系统 ||       ...

  4. （转）Java线程面试题 Top 50

    原文链接:http://www.importnew.com/12773.html   本文由 ImportNew - 李 广 翻译自 javarevisited.欢迎加入Java小组.转载请参见文章末 ...

  5. 第一个python爬虫程序

    1.安装Python环境 官网https://www.python.org/下载与操作系统匹配的安装程序,安装并配置环境变量 2.IntelliJ Idea安装Python插件 我用的idea,在工具 ...

  6. PCIE_DMA实例三：Xilinx 7系列(KC705/VC709)FPGA的EDK仿真

    一:前言 好久没写博客了,前段时间有个朋友加微信请教关于PCIe的一些学习方法.本人也不是专家,只是略知一些皮毛.对于大家反馈的问题未必能一一解答,但一定知无不言.以后我会常来博客园看看,大家可以把问 ...

  7. linux sort命令详解(转)

    sort命令是帮我们依据不同的数据类型进行排序,其语法及常用参数格式: sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位来排序. 参 数 ...

  8. OpenDigg安卓开源项目月报201704

    由OpenDigg 出品的安卓开源项目月报第一期来啦.我们的安卓开源月报集合了OpenDigg一个月来新收录的优质安卓开源项目,方便安卓开发人员便捷的找到自己需要的项目工具. DiscreteScro ...

  9. kafka各个版本特性预览介绍

    kafka-0.8.2 新特性 producer不再区分同步(sync)和异步方式(async),所有的请求以异步方式发送,这样提升了客户端效率.producer请求会返回一个应答对象,包括偏移量或者 ...

  10. iptables配置详解

    iptables主要参数 -A 向规则链中添加一条规则,默认被添加到末尾 -T指定要操作的表,默认是filter -D从规则链中删除规则,可以指定序号或者匹配的规则来删除 -R进行规则替换 -I插入一 ...