溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Bootstrap如何實現(xiàn)響應(yīng)式表格

發(fā)布時間：2021-08-13 09:51:18 來源：億速云 閱讀：170 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)Bootstrap如何實現(xiàn)響應(yīng)式表格的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺式機(jī)、平板電腦和手機(jī)

Bootstrap如何實現(xiàn)響應(yīng)式表格

下面是手機(jī)端顯示的樣式

Bootstrap如何實現(xiàn)響應(yīng)式表格

代碼如下：

1.test.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<h2>汽車信息</h2>

<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>


<!-- 模態(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">汽車詳細(xì)信息</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>


<script type="text/javascript">
$(".xq").click(function(){
 //顯示詳細(xì)信息 
 //取代號
 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);
   //觸發(fā)模態(tài)框
   $('#myModal').modal('show');
  }
 });
})

</script>

</body>

</html>

2.chuli.php

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

感謝各位的閱讀！關(guān)于“Bootstrap如何實現(xiàn)響應(yīng)式表格”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手