So richten Sie eine responsive Tabelle in Bootstrap ein-Bootstrap-Tutorial-php.cn

So richten Sie eine responsive Tabelle in Bootstrap ein

尚

Freigeben： 2019-07-27 15:26:43

Original

3600 Leute haben es durchsucht

So richten Sie eine responsive Tabelle in Bootstrap ein

Das responsive Formular von Bootstrap eignet sich für Mobiltelefone, Tablets und Desktop-Clients.

Im Folgenden erfahren Sie, wie Sie mit Bootstrap eine reaktionsfähige Tabelle implementieren:

Zunächst einmal ist die Tabelle, die wir verwenden, der Fahrradtabellenwagen:

So richten Sie eine responsive Tabelle in Bootstrap ein Dann müssen wir mehrere Dateien einführen, nämlich Bootstrap-CSS-Dateien und JS-Dateien und ein JQuery-Paket:

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

Nach dem Login kopieren

Dann gibt es noch den Hauptseitencode, bis auf die Einführung von Tabellenstilen und Modalboxen das gleiche wie die vorherige PHP-Methode. :

<body>
<h1>汽车信息</h1>
<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=&#39;hidden-xs&#39;>{$v[2]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[3]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[4]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[5]}</td>
      <td>{$v[7]}</td>
      <td class=&#39;visible-xs-block&#39;>
      <button type=&#39;button&#39; class=&#39;btn btn-primary btn-xs xq&#39; code=&#39;{$v[0]}&#39;>详情</button>
      </td>
    </tr>";/*引入bootstrap的按钮样式*/
    }
    
    ?>
</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">&times;</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>

</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);
            //触发模态框
            $(&#39;#myModal&#39;).modal(&#39;show&#39;);
        }
    });
})
</script>
</html>

Nach dem Login kopieren

Verarbeitungsseite:

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

Nach dem Login kopieren

Endgültiges Rendering:

So richten Sie eine responsive Tabelle in Bootstrap ein Mobile Version:

So richten Sie eine responsive Tabelle in Bootstrap ein

Empfohlen: Bootstrap Erste Schritte Tutorial

Das obige ist der detaillierte Inhalt vonSo richten Sie eine responsive Tabelle in Bootstrap ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!