标签:
1.table(基础) 基本表格
2.table-striped(基于table) 斑马线效果
3.table-bordered(基于table) 带边框
4.table-hover(基于table) 悬停实现背景效果
5.状态类(运用于tr)
5-1 .active
5-2 .success
5-3 .info
5-4 .warning
5-5 .danger
6.sr-only 隐藏(tr不适用)
7.table-responsive 小于768px出现边框(响应式),作用于父元素
示例代码:
1 <div class=‘table-responsive‘> 2 <table class=‘table table-striped table-hover‘> 3 <thead> 4 <tr> 5 <th>编号</th> 6 <th>姓名</th> 7 <th>性别</th> 8 <th>年龄</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr class=‘active‘> 13 <td>1</td> 14 <td>张三</td> 15 <td>男</td> 16 <td>48</td> 17 </tr> 18 <tr> 19 <td>2</td> 20 <td>张三</td> 21 <td>男</td> 22 <td>45</td> 23 </tr> 24 <tr> 25 <td>3</td> 26 <td>张三</td> 27 <td>男</td> 28 <td>487</td> 29 </tr> 30 </tbody> 31 </table> 32 </div>
0.btn 下面的都基于它
1.btn-default 默认
2.btn-success 成功
3.btn-info 一般信息
4.btn-warning 警告
5.btn-danger 危险
6.btn-primary 首选项
7.btn-link 链接
8.尺寸大小
8-1 .btn-lg
8-2 .btn-sm
8-3 .btn-xs
9.btn-block 块级,占用整行
10.active 激活状态,鼠标按下的状态
11.disabled 禁用
1 <a href=‘#‘ class=‘btn btn-default btn-lg‘>Link</a> 2 <button class=‘btn btn-primary‘>Button</button>
标签:
原文地址:http://www.cnblogs.com/GacentJohn/p/5309115.html