6.5.7 表格行状态
Bootstrap
为表格行或单元格提供了如下状态样式。
样式类 |
描述 |
.active |
高亮状态。添加鼠标悬停在行或单元格上时所设置的背景色。 |
.success |
添加标识成功行为的背景色。 |
.info |
添加标识普通提示信息的背景色。 |
.warning |
添加标识警告或用户注意的背景色。 |
.danger |
添加标识危险或负面影响的背景色。 |
|
|
程序示例
例如如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 标识不同状态的样式 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="container"> <table class="table table-condensed"> <caption> <b>疯狂体系图书</b> </caption> <thead> <tr> <th>书名</th> <th>作者</th> <th>价格</th> </tr> </thead> <tbody> <tr class="active"> <td>疯狂Java讲义</td> <td>李刚</td> <td>109</td> </tr> <tr> <td>疯狂HTML 5/CSS 3/JavaScript讲义</td> <td>李刚</td> <td>79</td> </tr> <tr class="success"> <td>疯狂前端开发讲义</td> <td>李刚</td> <td>79</td> </tr> <tr> <td>疯狂Android讲义</td> <td>李刚</td> <td>108</td> </tr> <tr class="info"> <td>轻量级Java EE企业应用实战</td> <td>李刚</td> <td>108</td> </tr> <tr> <td>疯狂XML讲义</td> <td>李刚</td> <td>69</td> </tr> <tr class="warning"> <td>疯狂iOS讲义</td> <td>李刚</td> <td>99</td> </tr> <tr> <td>经典Java EE企业应用实战</td> <td>李刚</td> <td>79</td> </tr> <tr class="danger"> <td>疯狂Swift讲义</td> <td>李刚</td> <td>69</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" style="text-align:right">现总计:9本图书</td> </tr> </tfoot> </table> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
Bootstrap
为表格行状态提供的这些CSS
样式只是为其添加了具有某种常规意义的背景色,这种背景色只是一种视觉上的效果。因此如果需要传达更明确的状态,请确保通过内容本身(比如通过文字说明)来表达对应的状态。
原文链接: 6.5.7 表格行状态