bootstrap条纹边框悬停表格的使用

2024-10-12 18:48:14

1、首先看下bootstrap普通的表格<!DOCTYPE html><html><head> <m髫潋啜缅eta charset="utf-8"> <title>Bootstrap 测试</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery-2.0.3.js"></script> <script src="../js/bootstrap.min.js"></script></head><body><table class="table" style="width:400px"> <caption>普通表格布局</caption> <thead> <tr> <th>学校</th> <th>地区</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td>小学</td> <td>南京</td> <td>200</td> </tr> <tr> <td>初中</td> <td>南京</td> <td>300</td> </tr> <tr> <td>小学</td> <td>上海</td> <td>500</td> </tr> </tbody></table></body></html>引用bootstrap.min.css、jquery-2.0.3.js和bootstrap.min.js添加class="table"打开浏览器测试看下效果

3、边框表格最主要的是添加bootstrap自带的class属性class="table table-bordered"，添加次属性之后，可以自动给表格添加显示边框

5、bootstrap已经给我们定义好了成功、警告、危险不同级别的颜色显示，我们直接使用就可以class="success"class="warning"class="danger"