bootstrap中怎么設(shè)置響應(yīng)式表格

發(fā)布時間：2021-07-23 14:11:38 來源：億速云閱讀：135 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章為大家展示了bootstrap中怎么設(shè)置響應(yīng)式表格，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

首先我們用到的表是騎車表car：

然后我們要引入幾個文件，分別是bootstrap的css文件和js文件以及jquery包：

<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="jquery-3.2.0.min.js"></script><script src="dist/js/bootstrap.min.js"></script>

然后就是主頁面代碼，除了引入表格樣式和模態(tài)框，其他和以前的php方式一樣：

<body><h2>汽車信息</h2><table class="table table-striped">  <thead>    <tr>      <td>代號</td>      <td>名稱</td>      <td class="hidden-xs">系列</td><!--在手機上隱藏，在電腦是顯示-->      <td class="hidden-xs">上市時間</td>      <td class="hidden-xs">油耗</td>      <td class="hidden-xs">功率</td>      <td>價格</td>      <th class="visible-xs-block">操作</th><!--在手機顯示，在電腦隱藏-->    </tr>    </thead>  <?php    require "DBDA.class.php";    $db = new DBDA();    $sql = "select * from car";    $arr = $db->query($sql);    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>";/*引入bootstrap的按鈕樣式*/    }        ?></table><!-- 模態(tài)框（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">&times;</button>                <h5 class="modal-title" id="myModalLabel">汽車詳細信息</h5>            </div>            <div class="modal-body" id="neirong"></div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>            </div>        </div><!-- /.modal-content -->    </div><!-- /.modal --></div></body><script>$(".xq").click(function(){    //顯示詳細信息        //取代號    var code = $(this).attr("code");    $.ajax({        url:"bootchuli.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);            //觸發(fā)模態(tài)框            $('#myModal').modal('show');        }    });})</script></html>

處理頁面：

<?php$code = $_POST["code"];require "DBDA.class.php";$db = new DBDA();$sql = "select * from car where code='{$code}'";echo $db->strquery($sql);

上述內(nèi)容就是bootstrap中怎么設(shè)置響應(yīng)式表格，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

bootstrap中怎么設(shè)置響應(yīng)式表格

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽