首页 > 代码库 > Boostrap表格练习
Boostrap表格练习
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>table</title> <!-- <link rel="stylesheet" href=http://www.mamicode.com/"../css/bootstrap.css"> --> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </head><style>body{ font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft Yahei",sans-serif;}table thead{ background-color: #555; border-top: 1px solid #555;}table thead tr{ color: #fff;}.table > thead > tr > th{ border-left: 1px solid #555; border-right: 1px solid #555; border-bottom: 1px solid #555;}</style><body><div class="container"> <br><br> <table class="table table-bordered table-hover table-condensed"> <thead> <tr> <th>类</th> <th>描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>.table</td> <td>为任意<table>添加基本样式 (只有横向分隔线)</td> <td>null</td> </tr> <tr> <td>.table-bordered</td> <td>为所有表格的单元格添加边框</td> <td>null</td> </tr> <tr> <td>.table-hover</td> <td>在 <tbody>内的任一行启用鼠标悬停状态</td> <td>null</td> </tr> <tr> <td>.table-condensed</td> <td>让表格更加紧凑</td> <td>null</td> </tr> </tbody> </table> <br><br> <table class="table table-bordered"> <thead> <tr> <th>类</th> <th>描述</th> <th>示例</th> </tr> </thead> <tr class="active"> <td>.active</td> <td>将悬停的颜色应用在行或者单元格上</td> <td>null</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功的操作</td> <td>null</td> </tr> <tr class="info"> <td>.info</td> <td>表示信息变化的操作</td> <td>null</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示一个警告的操作</td> <td>null</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示一个危险的操作</td> <td>null</td> </tr> </table> </div></body></html>
Boostrap表格练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。