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

BootStrap---2.表格和按钮

时间:2016-03-23 00:31:46      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

下面的都是类名。以后提到的如不意外都是表示类名形式,因为bootstrap大部分都是添加类名已显示效果

一.表格

  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>

 


 

二.按钮(a,input,button)

 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>

 

BootStrap---2.表格和按钮

标签:

原文地址:http://www.cnblogs.com/GacentJohn/p/5309115.html

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