BootStrap---2.表格和按钮

mac2022-06-30  103

下面的都是类名。以后提到的如不意外都是表示类名形式,因为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>

 

转载于:https://www.cnblogs.com/GacentJohn/p/5309115.html

最新回复(0)