bootstrap表格的基本操作
阿新 • • 發佈:2018-11-02
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>bootstrap表格的基本操作</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-striped table-bordered table-hover"> <caption class="h3 text-center">學生資訊表</caption> <thead> <tr> <th>學號</th> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr class="active"> <td>01</td> <td>Sam</td> <td>男</td> <td>29</td> </tr> <tr class="danger"> <td>02</td> <td>Xiong</td> <td>男</td> <td>29</td> </tr> <tr class="info"> <td>03</td> <td>大寶</td> <td>女</td> <td>20</td> </tr> <tr class="success"> <td>04</td> <td>二寶</td> <td>女</td> <td>18</td> </tr> <tr class="warning"> <td>05</td> <td>三寶</td> <td>男</td> <td>16</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
更多的表格操作可看下:https://v3.bootcss.com/css/#tables