bootstrap響應式表格執行個體詳解，bootstrap執行個體詳解

bootstrap響應式表格執行個體詳解，bootstrap執行個體詳解

Bootstrap 的響應式 CSS 能夠自適應於台式機、平板電腦和手機，現在就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;?>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。