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. java的特点跨平台原理以及JDK的安装

    终于开始了期待已久的java,了解java首先要了解下计算机语言的发展历史 机器语言--->汇编语言--->--->高级语言(面向过程的语言和面向对象的语言) 机器语言 每一个计算机 ...

  2. 【Egret】里使用audio标签达到默认播放背景音乐

    方法一 <audio id="bgmMusic" style="position:absolute;" src="resource/assets ...

  3. 记录一次raid数据恢复及回迁成功的案例

    故障发生在两块盘组成的一个raid0上,其中的一块盘亮黄灯,被raid卡踢出后,raid崩溃,下面就把当时抢救数据的整个过程进行介绍. 由于硬盘是两块SAS 300G的硬盘,先把硬盘从机器中拔出来,然 ...

  4. 手机自动化测试：appium源码分析之bootstrap一

    手机自动化测试:appium源码分析之bootstrap一   前言: poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.popte ...

  5. windows系统System32中各种实用的工具

    工具类 这些工具可以直接打开运行  输入名字就可以调出来了 我还会上传一个java程序,运行后会显示一个界面,直接调用这些工具 1.SnippingTool.exe   截图 2.calc.exe   ...

  6. R语言生成随机数

    1.概述 作为一种语言进行统计分析,R有一个随机数生成各种统计分布功能的综合性图书馆.R语言可以针对不同的分布,生成该分布下的随机数.其中,有许多常用的个分布可以直接调用.本文简单介绍生成常用分布随机 ...

  7. codevs2019 Uva10029 递变阶梯

    提交地址:[codevs][Uva] 题目描述  递变是指通过增加.减少或改变单词x中的一个字母,使它变成字典中的另一个单词y.比如将dig变成dog,将dog变成do都是递变.递变阶梯是一个按字典序 ...

  8. 用MPLAB IDE编程时，软件总是弹出一个窗口提示： “the extended cpu mode configuration bit is enabled,but the program that was loaded was not built using extended cpu instructions. therefore,your code may not work properly

    用MPLAB IDE编程时,软件总是弹出一个窗口提示:"the extended cpu mode configuration bit is enabled,but the program ...

  9. js继承之原型链方式实现

    温故而知新: 在之前的文章已经重点了解了原型对象,今天就理一理这个原型对象在原型链式的继承中的使用 function a(x,y){this.x=x;this.y=y;} //定义一个函数,当构造函数 ...

  10. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...