码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap表格样式

时间:2016-11-29 14:00:17      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:ble   标识   body   class   boot   warning   sed   success   提示信息   

<body>
<div class="container">
<table class="table" >  //表格基本样式
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<table class="table table-striped" >//表格条纹
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<table class="table table-striped table-bordered" >//表格边框
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<h1>悬停</h1>
<table class="table table-striped table-bordered table-hover" >
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<h1>紧凑</h1>
<table class="table table-striped table-bordered table-hover table-condensed" >
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<h1>行样式</h1>
<table class="table table-striped table-bordered table-hover table-condensed" >
<tr class="info"><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr class="success"><td>张三</td><td>男</td><td>15</td></tr>
<tr class="warning"><td>李四</td><td>男</td><td>15</td></tr>
<tr class="active"><td>王五</td><td>男</td><td>15</td></tr>
</table>
<div class="table-responsive">
<h1>响应式表格</h1>
<table class="table table-striped table-bordered table-hover table-condensed" >
<tr class="info"><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr class="success"><td>张三</td><td>男</td><td>15</td></tr>
<tr class="warning"><td>李四</td><td>男</td><td>15</td></tr>
<tr class="active"><td>王五</td><td>男</td><td>15</td></tr>
</table></div>
</div>
</body>

 

类说明:.table表格基本样式

           .table-striped表示表格条纹

           .table-bordered表示表格边框

           .table-condensed表格内容紧凑

           .table-hover鼠标悬停

            状态类(可以用这个设置表格每行的颜色):.active 鼠标在行或单元格上时所设置的颜色

                       .success标识成功或积极的动作

                       .info标识普通的提示信息或动作

                       .warning表示警告或者用户注意

                       .denger 标识危险或潜在的带来负面影响的动作

bootstrap表格样式

标签:ble   标识   body   class   boot   warning   sed   success   提示信息   

原文地址:http://www.cnblogs.com/jinhong/p/6113052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!