AdminLTELogo

卡片組件

卡片組件是此範本中最廣泛使用的組件。您可以將它用於顯示圖表到僅顯示文字區塊的任何內容。它有多種不同的樣式，我們將在下面進行探討。

預設卡片標記

預設卡片範例

標籤
卡片的內容
卡片的頁腳
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Default Card Example</h3>
    <div class="card-tools">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="badge badge-primary">Label</span>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
  <div class="card-footer">
    The footer of the card
  </div>
  <!-- /.card-footer -->
</div>
<!-- /.card -->
卡片變體

您可以透過新增任何情境類別來變更卡片的樣式。

預設

預設卡片範例

卡片的內容
卡片的頁腳

主要卡片範例

卡片的內容
卡片的頁腳

次要卡片範例

卡片的內容
卡片的頁腳

成功卡片範例

卡片的內容
卡片的頁腳

資訊卡片範例

卡片的內容
卡片的頁腳

警告卡片範例

卡片的內容
卡片的頁腳

危險卡片範例

卡片的內容
卡片的頁腳

深色卡片範例

卡片的內容
卡片的頁腳
<div class="card">...</div>
<div class="card card-primary">...</div>
<div class="card card-secondary">...</div>
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
<div class="card card-dark">...</div>
外框

主要卡片範例

卡片的內容
卡片的頁腳

次要卡片範例

卡片的內容
卡片的頁腳

成功卡片範例

卡片的內容
卡片的頁腳

資訊卡片範例

卡片的內容
卡片的頁腳

警告卡片範例

卡片的內容
卡片的頁腳

危險卡片範例

卡片的內容
卡片的頁腳

深色卡片範例

卡片的內容
卡片的頁腳
<div class="card card-outline card-primary">...</div>
<div class="card card-outline card-secondary">...</div>
<div class="card card-outline card-success">...</div>
<div class="card card-outline card-info">...</div>
<div class="card card-outline card-warning">...</div>
<div class="card card-outline card-danger">...</div>
<div class="card card-outline card-dark">...</div>
背景顏色

主要卡片範例

卡片的內容
卡片的頁腳

次要卡片範例

卡片的內容
卡片的頁腳

成功卡片範例

卡片的內容
卡片的頁腳

資訊卡片範例

卡片的內容
卡片的頁腳

警告卡片範例

卡片的內容
卡片的頁腳

危險卡片範例

卡片的內容
卡片的頁腳

深色卡片範例

卡片的內容
卡片的頁腳
<div class="card bg-primary">...</div>
<div class="card bg-secondary">...</div>
<div class="card bg-success">...</div>
<div class="card bg-info">...</div>
<div class="card bg-warning">...</div>
<div class="card bg-danger">...</div>
<div class="card bg-dark">...</div>
漸層背景顏色

主要卡片範例

卡片的內容
卡片的頁腳

次要卡片範例

卡片的內容
卡片的頁腳

成功卡片範例

卡片的內容
卡片的頁腳

資訊卡片範例

卡片的內容
卡片的頁腳

警告卡片範例

卡片的內容
卡片的頁腳

危險卡片範例

卡片的內容
卡片的頁腳

深色卡片範例

卡片的內容
卡片的頁腳
<div class="card bg-gradient-primary">...</div>
<div class="card bg-gradient-secondary">...</div>
<div class="card bg-gradient-success">...</div>
<div class="card bg-gradient-info">...</div>
<div class="card bg-gradient-warning">...</div>
<div class="card bg-gradient-danger">...</div>
<div class="card bg-gradient-dark">...</div>
卡片工具

卡片可以包含工具來部署特定事件或提供簡單資訊。以下範例使用卡片標頭中的多個 AdminLTE 組件。

AdminLTE 的 data-card-widget 屬性使卡片具有折疊或移除的功能。這些按鈕放置在 card-tools 中，而 card-tools 放置在 card-header 中。

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Card Tools</h3>

    <div class="card-tools">
      <!-- This will cause the card to maximize when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
      <!-- This will cause the card to collapse when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
      <!-- This will cause the card to be removed when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->
載入樣式

若要模擬載入狀態，只需將此程式碼放置在 .card 結束標籤之前。

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

載入狀態

卡片的內容

載入狀態

卡片的內容

載入狀態

卡片的內容

載入狀態

卡片的內容

您也可以透過將 .dark 新增到 .overlay 來使用深色載入樣式，就像這樣。

<div class="overlay dark">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

載入狀態 (深色)

卡片的內容

載入狀態 (深色)

卡片的內容

載入狀態 (深色)

卡片的內容

載入狀態 (深色)

卡片的內容