Title1

Title2

Title3

3-4 Bootstrap table

  1. 官網:https://bootstrap-table.com/docs/getting-started/introduction/
    GitHub:https://github.com/wenzhixin/bootstrap-table 
    範例:https://examples.bootstrap-table.com/
    參數:https://bootstrap-table.com/docs/api/table-options/
  2. 注意不要設定「 data-height='400'」,否則標題與內容無法對齊
  3. 使用(CDN):
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
    

     

  4. 通过 data 属性的方式
    无需编写 JavaScript 启用 bootstrap table,我们对普通的 table 设置 data-toggle="table" 即可。

    <table data-toggle="table">
        <thead>
            <tr>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$2</td>
            </tr>
        </tbody>
    </table>
    


    我们也可以通过设置远程的 url 如 data-url="data1.json" 来加载数据。

  5.