Bootstrap响应式表格详解【篮球世界杯赌球】

2019-08-12 15:31 来源:未知

Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机

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

篮球世界杯赌球 1

篮球世界杯赌球 2

下面是手机端显示的样式

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

篮球世界杯赌球 3

篮球世界杯赌球 4

代码如下:

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

1.test.php

篮球世界杯赌球 5 篮球世界杯赌球 6

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" />
<script src="jquery-3.2.0.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
  <!--[if lt IE 9]>
   <script src="http://www.westovermarket.com/uploads/allimg/190812/153102K04-6.jpg"></script>
   <script src="http://www.westovermarket.com/uploads/allimg/190812/15310240P-7.jpg"></script>
  <![endif]-->
</head>

<body>
<h1>汽车信息</h1>

<table class="table table-striped">
 <thead>
 <tr>
  <th>代号</th>
  <th>名称</th>
  <th class="hidden-xs">系列</th>
  <th class="hidden-xs">上市时间</th>
  <th class="hidden-xs">油耗</th>
  <th class="hidden-xs">功率</th>
  <th>价格</th>
  <th class="visible-xs-block">详情</th>
 </tr>
 </thead>
 <tbody>
 <?php
 require "DBDA.class.php";
 $db = new DBDA();
 $sql = "select * from car";
 $arr = $db->query($sql,1);
 foreach($arr as $v)
 {
  echo "<tr>
  <td>{$v[0]}</td>
  <td>{$v[1]}</td>
  <td class='hidden-xs'>{$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>{$v[7]}</td>
  <td class='visible-xs-block'>
  <button type='button' class='btn btn-primary btn-xs xq' code='{$v[0]}'>详情</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" 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><div>价格:" lie[7] "</div>";
   $("#neirong").html(str);
   //触发模态框
   $('#myModal').modal('show');
  }
 });
})

</script>

</body>

</html>

代码如下:

TAG标签:
版权声明:本文由美洲杯赌球发布于计算机教程,转载请注明出处:Bootstrap响应式表格详解【篮球世界杯赌球】