1 : 基本表格 table
2 : 带斑马线的表格 table table-striped
3 : 带边框的表格 table table-bordered
4 : 有鼠标悬停状态的表格 table table-hover
5 : 更加紧凑的表格 table table-condensed
6 : 多种表格效果整合在一起 table table-striped table-bordered table-hover table-condensed
7 : 激活样式 active
8 : 成功样式 success
9 : 信息样式 info
3 : 带边框的表格 table table-bordered
4 : 有鼠标悬停状态的表格 table table-hover
5 : 更加紧凑的表格 table table-condensed
6 : 多种表格效果整合在一起 table table-striped table-bordered table-hover table-condensed
7 : 激活样式 active
8 : 成功样式 success
9 : 信息样式 info
10 : 警告样式 warning
11 : 危险样式 danger
- 基本表格
拥有横向分割线的表格,宽度占用父容器的
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 带斑马线的表格
通过斑马线把奇偶行的区别表现出来
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-striped"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 带边框的表格
给表格的单元格加上边框
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-bordered"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 有鼠标悬停状态的表格
鼠标悬停高亮显示
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-hover"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 更加紧凑的表格
让表格更加紧凑
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-condensed"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 多种表格效果整合在一起
多种表格样式混合使用
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 激活样式
用于表示该行被选中
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="lol/teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="active"> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 成功样式
用于表示该行的信息是成功的
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="success"> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 信息样式
用于表示该行的信息是正常的
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="info"> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 警告样式
用于表示该行的信息有疑问
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="warning"> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>
- 危险样式
用于表示该行的信息有错误
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="gareen.png"/></td> <td>盖伦</td> <td >616</td> </tr> <tr> <td ><img width="20px" src="teemo.png"/></td> <td >提莫</td> <td >383</td> </tr> <tr class="danger"> <td><img width="20px" src="akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table>