Bootstrap表格制作代碼

2019-11-19 17:07:38

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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>

效果圖：