AdminLTELogo

盒子组件

有两种类型的盒子,信息盒和小的盒子。这两种盒子都用于显示统计片段。

信息盒
消息 1,410
收藏夹 410
上传 13,648
<div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Messages</span>
    <span class="info-box-number">1,410</span>
  </div>
</div>
<div class="info-box bg-success">
  <span class="info-box-icon"><i class="far fa-flag"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Bookmarks</span>
    <span class="info-box-number">410</span>
  </div>
</div>
<div class="info-box bg-gradient-warning">
  <span class="info-box-icon"><i class="far fa-copy"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Uploads</span>
    <span class="info-box-number">13,648</span>
  </div>
</div>
注意!

要将文本换行,向 info-box-text 添加类 text-wrap。

带进度条的信息盒
收藏夹 41,410
30天内增长70%
喜欢的 41,410
30天内增长70%
活动 41,410
30天内增长70%
<div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Bookmarks</span>
    <span class="info-box-number">41,410</span>
    <div class="progress">
      <div class="progress-bar bg-info" style="width: 70%"></div>
    </div>
    <span class="progress-description">
      70% Increase in 30 Days
    </span>
  </div>
</div>
<div class="info-box bg-success">
  <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Likes</span>
    <span class="info-box-number">41,410</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>
<div class="info-box bg-gradient-warning">
  <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Events</span>
    <span class="info-box-number">41,410</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>
小盒子

150

新订单

更多信息

44

用户注册

更多信息
<div class="small-box bg-info">
  <div class="inner">
    <h3>150</h3>
    <p>New Orders</p>
  </div>
  <div class="icon">
    <i class="fas fa-shopping-cart"></i>
  </div>
  <a href="#" class="small-box-footer">
    More info <i class="fas fa-arrow-circle-right"></i>
  </a>
</div>
<div class="small-box bg-gradient-success">
  <div class="inner">
    <h3>44</h3>
    <p>User Registrations</p>
  </div>
  <div class="icon">
    <i class="fas fa-user-plus"></i>
  </div>
  <a href="#" class="small-box-footer">
    More info <i class="fas fa-arrow-circle-right"></i>
  </a>
</div>
加载样式

要模拟加载状态,只需将此代码放在.info-box / .small-box关闭标签之前。

提示!

我们推荐.fa-2x用于信息盒和.fa-3x用于小盒子以获得合适大小的加载图标,
就像在这个文档中一样。

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
消息 1,410
收藏夹 41,410
30天内增长70%

150

新订单

更多信息

你也可以使用暗色加载样式,通过添加.dark.overlay如此代码。

<div class="overlay dark">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
消息 1,410
收藏夹 41,410
30天内增长70%

150

新订单

更多信息