本文實例為大家分享了Bootstrap表格制作的具體代碼，供大家參考，具體內容如下
Bootstrap 支持的一些表格元素：
可用于表格中的tablede 樣式
可用于表格中的<tr>, <th> 和 <td>
html與css代碼
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > <style> div{ font-family: '宋體'; color: #0A0A0A; } tr,td{ width:30px; height: 50px; font-size:24px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>表格</h1> </div> <p class="text-muted" style="font-size: 18px;">小妞妞的成績單：</p> <!-- <p class="text-muted">本行內容是減弱的</p> --> <table class="table table-striped table-bordered table-hover table-condensed"> <!-- .table-striped 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) .table-bordered 為所有表格的單元格添加邊框 .table-hover 在 <tbody> 內的任一行啟用鼠標懸停狀態 .table-condensed 讓表格更加緊湊 --> <thead> <tr class="active"> <th>科目</th> <th>成績</th> </tr> </thead> <tbody> <tr class="success"> <td>語文</td> <td>90</td> </tr> <tr> <td>數學</td> <td>95</td> </tr> <tr class="warning"> <td>英語</td> <td>85</td> </tr> <tr class="danger"> <!-- .active 對某一特定的行或單元格應用懸停顏色；.success表示一個成功的或積極的動作； .warning 表示一個需要注意的警告；.danger 表示一個危險的或潛在的負面動作； --> <td>綜合</td> <td>200</td> </tr> </tbody> </table> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
