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>
注意！

若要將文字換行，請將 text-wrap 類別新增至 info-box-text。若要使用 … 截斷文字，請將 text-truncate 類別新增至 info-box-content。(這裡您應該新增工具提示以顯示完整片語)

具有進度條的資訊方塊
書籤 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

新訂單

更多資訊