卡片组件

卡片是 AdminLTE 里的主要内容容器。它们本质上就是 Bootstrap 卡片，额外加了一层阴影、一套颜色变体系统、一个头部工具栏，还有供 CardWidget 插件 使用的钩子——这个插件能让卡片折叠、移除和最大化。

结构

<div class="card card-primary card-outline">
  <div class="card-header">
    <div class="card-title">标题</div>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" aria-label="Collapse card">
        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
      </button>
    </div>
  </div>
  <div class="card-body">内容</div>
  <div class="card-footer">底部</div>
</div>

类名	描述
.card	容器。在 Bootstrap 卡片的基础上加上了 AdminLTE 的阴影。
.card-header	头部条。设置为相对定位，这样 .card-tools 就能在里面浮动。
.card-title	头部文字。左浮动，字号 1.1rem；它只是一种样式，并不是标题——该用什么元素由文档大纲结构决定。
.card-tools	头部内右对齐的工具栏。会吸收头部的水平内边距，让按钮贴边对齐。
.btn-tool	柔和色调、无边框的图标按钮，专供 .card-tools 内使用。加上 .btn-tool-custom 可以保留你自己的配色。
.card-body	内容区。
.card-footer	底部条。

颜色变体

$theme-colors 里的每一个条目都会生成一个 .card-* 类。变体会设置两个自定义属性——--lte-card-variant-bg 和 --lte-card-variant-color——然后由头部来消费这两个属性，所以 .bg-primary 和 .text-bg-primary 给卡片上色的效果，跟 .card-primary 是一样的。

<div class="card card-primary">…</div>
<div class="card card-success">…</div>
<div class="card card-danger">…</div>

加上 .card-outline，就能把颜色转移到顶部一条 3px 的边框上，头部则保持素净：

<div class="card card-primary card-outline">…</div>

状态

这些类是 CardWidget 切换时对应的静止状态。在标记里设置其中一个，就能让卡片一开始就渲染成折叠状态。

类名	描述
.collapsed-card	隐藏内容区和底部，并把折叠图标换成展开图标。
.maximized-card	让卡片以全尺寸固定在视口中。AdminLTE 还会把它加到 <html> 上，以锁定页面滚动。
.was-collapsed	由 CardWidget 添加：如果卡片在最大化时本身是折叠状态，就给它加上这个类，这样还原时能回到折叠状态。
.expanding-card	在展开动画执行期间存在。

图标的显示会自动跟随状态变化：除非卡片是折叠状态，否则 [data-lte-icon="expand"] 会隐藏；除非卡片是最大化状态，否则 [data-lte-icon="minimize"] 会隐藏。把两个图标都放上去，让 CSS 来决定显示哪个就行。

带标签的卡片

.card-tabs 会把一个 .nav-tabs 放进卡片头部，并把标签页和内容区之间的接缝处理成直角：

<div class="card card-primary card-tabs">
  <div class="card-header p-0 pt-1">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab">标签 1</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab">标签 2</button>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="tab-1" role="tabpanel" tabindex="0">…</div>
      <div class="tab-pane fade" id="tab-2" role="tabpanel" tabindex="0">…</div>
    </div>
  </div>
</div>

.card-outline-tabs 是同样的思路，只不过用在了描边卡片上：由激活的标签页以顶部边框的形式来体现强调色，而不是由卡片本身来承担。

工具类

类名	描述
.height-control	把内容区的高度限制在 300px，超出部分可滚动。
.card .nav.flex-column	卡片内的垂直导航会在各项之间加上分隔线，最后一项之后不加。用于用户小部件。

Sass 变量

变量	默认值	说明
$lte-card-shadow	基于 --bs-body-color-rgb 的双层阴影	应用到每个 .card 上的阴影。
$lte-card-title-font-size	1.1rem	.card-title 的字号。
$lte-card-title-font-weight	$font-weight-normal	.card-title 的字重。

注意事项

• .card-title 是浮动的，所以如果 .card-header 里只放了一个标题和工具栏，它自身是撑不起高度的——头部上的 clearfix mixin 会把它撑回来。出于同样的原因，你在头部里再加自己的浮动元素也是安全的。
• 嵌套卡片的作用域是正确的：折叠和展开的规则用的是 > .card-header 和 > .card-body，所以折叠外层卡片不会把里面那张卡片的图标也改掉。
• 如果卡片是由页面上其他位置的按钮来切换的，请使用 CardWidget 的编程 API，而不是手动增删那些状态类——它会触发对应的事件。