AdminLTE

Documentation for the box component and its variants.

The box component is used for variety of reasons. Mainly used to hold content of a specific widget.

Structure: the box has three main sections. The header, body and footer. Example of usage below.

<div class="box">
     <div class="box-header">
          <h3 class="box-title">Title</h3><!-- /.box-title -->
     </div><!-- /.box-header -->
     <div class="box-body">
          <!-- main content -->
          Box body
     </div>
     <div class="box-footer">
          Box footer
     </div>
</div>

Variants: AdminLTE provides multiple ways to customize your box's color, look and feel.

For a default box we can add colored border using the .box-* classes (where * is the name of the style) to the box component. Styles available are:
- .box-primary
- .box-success
- .box-danger
- .box-warning
- .box-info
Example of usage:

Title

Box body

Box footer

```

 To get a fully colored header instead of a top border only, add the `.box-solid` class to the box. Example:
 ```html

Title

Box body

Box footer

``` A box can be converted to a tile, which is a fully colored widget, by adding any of the available `.bg-*` classes. For example, to get a green box, we add `bg-green` to the box. ```html

Title

Box body

Box footer

```

List of bg classes:
- bg-light-blue equivalent to primary color
- bg-green equivalent to success color
- bg-yellow equivalent to warning color
- bg-red equivalent to danger color
- bg-aqua equivalent to info color
Additional bg classes:
- bg-purple
- bg-blue
- bg-navy
- bg-teal
- bg-maroon
- bg-black
- bg-gray
- bg-olive
- bg-lime
- bg-orange
- bg-fuchsia

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d