<div class="prom-box prom-box-default">

  <h3>这是默认的标题，一般的内容都可以使用</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="prom-box prom-box-info">

  <h3>这是蓝色的标题，一般用于通知内容</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="prom-box prom-box-warning">

  <h3>这是黄色的标题，一般用于重要内容</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="prom-box prom-box-danger">

  <h3>这是红色的标题，一般用于特别留意的内容</h3>

  <p>这里是一段说明内容，如果留空，则本部分仅显示标题</p>

</div>

<div class="panel panel-default"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-primary"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-success"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-info"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-warning"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-danger"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是标题</h3>

  </div>

  <div class="panel-body">

   这里是说明的文本，您可以随意修改这里的文本。

  </div>

</div>

<div class="panel panel-danger shadow1"> 

  <div class="panel-heading">

    <h3 class="panel-title">这里是带阴影的内容</h3>

  </div>

  <div class="panel-body">

   您只需要在 class的末尾加上 shadow1 或者 shadow2 就可以自动产生阴影

  </div>

</div>