html - 将网格菜单转换为表格 Bootstrap

Question

我有一个带有特定 css 样式的网格菜单，我想将该网格转换为表格以便我可以使用 jquery 数据表，但我不知道如何操作

这是我的网格中的一个元素:

 <div class="row menu-filter-items">


            <div class="col-md-4 margin-b-30 menu-item">
                <a href="#" class="menu-grid">
                    <img src="images/restolist.png" alt="" class="img-fluid"/>
                    <div class="menu-grid-desc">                               
                       <!--  <span class="price float-right">$9.50</span> -->
                        <h4 class="a" id="title">BB</h4>
                        <p>
                            Description
                        </p>
                    </div>                           
                </a>
            </div>

作为 <td> 的元素会是什么？在表格中？

Answer 1

DataTables 可以使用 Bootstrap 的 table styling options 与 Bootstrap 3 无缝集成基于Bootstrap呈现统一设计的界面。

此集成只需包含 DataTables Bootstrap 文件(CSS 和 JS)即可完成，这些文件将设置 DataTables 正常初始化所需的默认值。

来源:datatables.net

提供的代码示例有引导表

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Table Use Sample -->
<div class="container">
  <table class="table">
  
    <tr>
      <td>
        <a href="#">
          <img src="http://via.placeholder.com/140x100" alt="" class="img-fluid"/>
        </a>
      </td>
      </tr>
    
    <tr>
      <td>
          <h4>BB</h4>
      </td>
    </tr>
      
    
    
   <tr>
      <td>
        <p>
          Description
        </p>
      </td>
    </tr>
    
  </table>
</div>








<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

不确定您希望根据您提供的代码对表格进行怎样的格式化，但您明白了。

希望对您有所帮助。