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;?>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
