bootstrap之表格
给表格行或单元格添加颜色
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 | <div class = "table-responsive" > 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。 <table class = "table" > <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr class = "active" > <td class = "success" >Tanmay</td> <td>Bangalore</td> </tr> <tr class = "success" > <td>Tanmay</td> <td>Bangalore</td> </tr> <tr class = "info" > <td>Sachin</td> <td class = "danger" >Mumbai</td> </tr> <tr class = "warning" > <td>Sachin</td> <td>Mumbai</td> </tr>tbody> <tr class = "danger" > <td>Sachin</td> <td>Mumbai</td> </tr>tbody> </table> </div> |
表格类
1 2 3 4 5 6 7 | <table class = "table table-striped" > 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) <table class = "table table-bordered" > 为所有表格的单元格添加边框 <table class = "table table-hover" > 在 <tbody> 内的任一行启用鼠标悬停状态 <table class = "table table-condensed" > 让表格更加紧凑 |
<tr>, <th> 和 <td> 类
1 2 3 4 5 6 | 类 描述 .active 对某一特定的行或单元格应用悬停颜色 .success 表示一个成功的或积极的动作 .warning 表示一个需要注意的警告 .danger 表示一个危险的或潜在的负面动作 .info 表示信息变化的操作 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步