AdminLTE box结构小结

box的分类

1. box

1. .box结构包括header，body，footer，相应的class分别是.box-header，.box-body，.box-footer。
2. .box-header中包括title和tools（关闭按钮等），相应的class是.box-title,.box-tools。

<div class="box box-success box-solid">
    <div class="box-header">
        <i class="fa fa-comments-o"><!--标题前的图标--></i>
        <h3 class="box-title">
            标题
        </h3>
        <div class="box-tools pull-right">
            <!--标题右侧的按钮集合，只有一个按钮时可省略.btn-group直接添加相应btn-->
            <div class="btn-group">

            </div>
        </div>
    </div>
    <!--div class="scrollDiv"如果要将body滚动，在body外加一层div-->
    <div class="box-body">

    </div>
    <!-- /div,滚动用div-->
    <div class="box-footer">

    </div>
</div>

1. .box默认有一个顶部颜色，与 .box-default（灰色）相同，.box-success（绿色），.box-warning（黄色），.box-danger（红色）等可覆盖默认的颜色样式
2. .box-solid会使整个box显示一个明显的边框，边框颜色与 .box-success 等相同，当与子元素 .box-header同时存在时，.box-header的背景色与 .box-success相同。
3. .box-header下通常会有 .box-title和 .box-tools。

2. info-box

1. .info-box结构包括左侧图标icon和右侧内容content，对应的class分别为.info-box-icon和.info-box-content。
2. .info-box-content下又可添加.info-box-text，.info-box-number，.info-box-more。

<!--整个box的背景色为白色-->
<div class="info-box">
    <!--左侧的带背景色的图标部分-->
    <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
    <!--右侧无背景色的内容部分-->
    <div class="info-box-content">
        <span class="info-box-text">文字内容</span>
        <span class="info-box-number">数字</span>
        <span class="info-box-more pull-right">更多<!--一般靠右侧显示--></span>
    </div>
</div>

<!--整个box的背景色为aqua-->
<div class="info-box bg-aqua">
    <!--左侧的带加深背景色的图标部分-->
    <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
    <div class="info-box-content">
        <!--右侧显示背景色的内容部分-->
        <span class="info-box-text">文字内容</span>
        <span class="info-box-number">数字</span>
        <div class="progress">
            <div class="progress-bar" style="width: 70%"></div>
        </div>
        <span class="progress-description">
            70% Increase in 30 Days
        </span>
    </div>
</div>

1. 因 .bg-aqua 的位置不同会有不同的info-box背景。
2. 可使用的背景颜色有 .bg-green, .bg-yellow, .bg-red等。

3. small-box

与.small-box对应的子类只有.small-box-footer。

<!--整个box为aqua背景色-->
<div class="small-box bg-aqua">
    <!--要显示的文字-->
    <div class="inner">
        <h3>标题内容</h3>
        <p>内容</p>
    </div>
    <!--可在右侧显示的背景-->
    <div class="icon">
        <i class="fa fa-shopping-cart"></i>
    </div>
    <!--更多链接及图标-->
    <a href="#" class="small-box-footer">
        更新 <i class="fa fa-arrow-circle-right"></i>
    </a>
</div>

区别

1. .box是用.box-success来标识相关颜色的。
2. .info-box和.small-box是用bg-aqua来标识相关颜色的