ace bootstrap后台框架-widgetBox

widgetBox-ace页面中的一块封闭的区域，有些类似弹出框，不过它是潜在页面中的。

最外围的样式，定义一个box

.widget-box  {

1. padding: 0;
2. -webkit-box-shadow: none;
3. box-shadow: none;
4. margin: 3px 0;
5. border-bottom: 1px solid  #CCC ;

}

//如果不需要背景色，添加此样式

.widget-box.transparent  {//头部透明，可选用

1. border: 0;
2. box-shadow: none;

}

widget-box.transparent>.widget-header  {

1. background: 0;
2. filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
3. border: 0;
4. border-bottom: 1px solid  #dce8f1 ;
5. color:  #4383b4 ;
6. padding-left: 3px;

}

.widget-box.transparent .widget-body  {

1. border: 0;
2. background-color:  transparent ;

}

//如果使用了这个样式就会把widget-header的背景样式都给覆盖 ，可选用

widget-header-flat  {

1. background:  #f7f7f7 ;
2. filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);

}

//头部样式

.widget-header  {

1. -webkit-box-sizing: content-box;
2. -moz-box-sizing: content-box;
3. box-sizing: content-box;
4. position: relative;
5. min-height: 38px;
6. background:  #f7f7f7 ;
7. background-image: -webkit-gradient(linear,left 0,left 100%,from( #fff ),to( #eee ));
8. background-image: -webkit-linear-gradient(top,#fff,0%,#eee,100%);
9. background-image: -moz-linear-gradient(top,#fff 0,#eee 100%);
10. background-image: linear-gradient(to bottom, #fff  0, #eee  100%);
11. background-repeat: repeat-x;
12. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffeeeeee',GradientType=0);
13. color:  #669fc7 ;
14. border: 1px solid  #CCC ;
15. border-bottom: 1px solid  #DDD ;
16. padding-left: 12px;

}

//头部工具栏,可以是下拉菜单、按钮、tab页标签等，只要能放的下都可以定义

.widget-toolbar {

1. display: inline-block;
2. padding: 0 10px;
3. line-height: 37px;
4. float: right;
5. position: relative;

}

//内容区

.widget-body  {

1. border: 1px solid  #CCC ;
2. border-top: 0;
3. background-color:  #FFF ;

}

案例

<div class="widget-box transparent"> 
           <div class="widget-header widget-header-flat"> 
     <h4>隐藏header-widget-box</h4>
 <div class="widget-toolbar"> 
      <a href="#" data-action="collapse">
<i class="icon-chevron-up"></i>
</a>
 </div>
   </div>
   <div class="widget-body">
      测试隐藏header-widget-box
    </div>
 </div>