推荐集成

AdminLTE 有意保持精简的依赖树。我们不捆绑每一个表单组件或图表库，而是推荐一流的第三方库，你可以在需要时随时引入。下面的每个库都是 MIT 许可、积极维护且 不依赖 jQuery 的。

每个部分都包含一个基于 CDN 的“安装”代码片段以及连接所需的最少 JavaScript。如果你使用打包工具，可以将 CDN URL 替换为 npm 安装方式。

关于以下版本号： 每个 CDN URL 都固定了特定版本（例如 @4.6.13），以确保代码片段可复现。这些版本在最新发布时是有效的，但第三方库会独立于 AdminLTE 发布新版本。在将代码片段复制到生产环境之前，请查看每个部分中链接的库主页以获取最新版本——并考虑自行托管副本，而非长期依赖 CDN。

表单组件

日期/时间选择器 — Flatpickr

Flatpickr 是一个轻量级、无依赖的日期和时间选择器。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13"></script>

<input type="text" class="form-control" id="datepicker" placeholder="选择日期" />

<script>
  flatpickr("#datepicker", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d"
  })
</script>

开箱即用地支持日期范围、仅时间模式、多日期选择和国际化。

多选/标签输入 — Tom Select

Tom Select 是 Selectize 的原生 JS 重写版本。非常适合可搜索下拉框、标签输入和远程数据自动完成。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.6.2/dist/css/tom-select.bootstrap5.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.6.2/dist/js/tom-select.complete.min.js"></script>

<select id="tags" class="form-control" multiple placeholder="选择标签">
  <option value="design">设计</option>
  <option value="dev">开发</option>
  <option value="qa">质量保证</option>
</select>

<script>
  new TomSelect("#tags", { 插件： ["remove_button"] })
</script>

附带 tom-select.bootstrap5.min.css 主题，与 Bootstrap 表单控件样式匹配。

远程数据。 对于背后是数据库而不是静态选项列表的下拉框，就在 load() 里发请求。Tom Select 会通过 loadThrottle 帮你做防抖（默认 300 毫秒），而 virtual_scroll 插件会在用户滚动下拉列表时逐页加载结果：

let inFlight = null

new TomSelect("#reviewer", {
  valueField: "id",
  labelField: "name",
  searchField: ["name"],
  loadThrottle: 300,                      // 防抖，内置的
  插件： ["virtual_scroll"],            // 无限滚动分页
  firstUrl: (query) => `/api/users?q=${encodeURIComponent(query)}&page=1`,
  load(query, callback) {
    inFlight?.abort()                     // 丢弃过期请求
    inFlight = new AbortController()

    fetch(this.getUrl(query), { signal: inFlight.signal })
      .then((response) => response.json())
      .then((json) => {
        if (json.next) {
          this.setNextUrl(query, json.next)
        }
        callback(json.results)
      })
      .catch((error) => {
        if (error.name !== "AbortError") {
          callback()
        }
      })
  }
})

forms/advanced.html 就是拿这套一模一样的模式跑在一个模拟接口上的——把模拟实现换成 fetch()，不用改别的就能直接用。

从 Select2 迁移过来

Select2 目前仍在维护（4.1.0 于 2026 年发布），但它依然是个 jQuery 插件——它的 UMD 包装强制依赖 jQuery，也没有不依赖 jQuery 的构建版本。因此 AdminLTE 4 推荐改用 Tom Select，它能覆盖同样的功能集，体积大约只有 20 kB gzip，而 Select2 算上 jQuery 之后大约是 50 kB。

两者的 API 可以直接对应过来：

这张表的并排对照版，配上可运行的代码，放在 高级元素 演示页面里。

如果你不得不继续用 Select2，AdminLTE 提供了一个纯样式的兼容样式表——见下面的 Select2 兼容主题。

Select2 兼容主题

有些项目没法去掉 Select2：比如一个带着几百个服务端渲染表单的 ERP 系统、一个会自动帮你初始化它的第三方插件，又或者团队压根还没准备好换。AdminLTE 不会把 Select2 或 jQuery 打包进来，但它确实提供了一个 纯 CSS 的兼容主题，这样你自己引入的 Select2 就能继承 Bootstrap 5.3 的表单尺寸、焦点圈、校验状态以及 data-bs-theme 深色模式。

• dist/css/adminlte-select2.css（以及 .min.css、.rtl.css、.rtl.min.css）
• 没有 JavaScript，没有 jQuery，adminlte.css 里也没加任何东西——你只要额外加载一个样式表就能用上。

把它加载在 select2.css 之后：

<link rel="stylesheet" href="path/to/adminlte.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="path/to/adminlte-select2.min.css" />

<select id="country" class="form-select">
  <option value="">请选择地区…
  <option value="lv">拉脱维亚</option>
</select>

<script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
<script>
  $("#country").select2({ width: "100%" })
</script>

这个主题帮你处理了以下这些：

用打包工具？编译好的样式表可以通过包的 exports 映射引入——同样，要放在 Select2 自己的 CSS 之后：

import "admin-lte/dist/css/adminlte.min.css"
import "select2/dist/css/select2.min.css"
import "admin-lte/dist/css/adminlte-select2.min.css"

如果你是自己编译 Sass 呢？那就把这个 partial 放在 AdminLTE 之后导入，因为 AdminLTE 已经把该 partial 需要的 Bootstrap 变量和 mixin 都加载好了：

@import "node_modules/admin-lte/src/scss/adminlte";
@import "node_modules/admin-lte/src/scss/compat/select2";

这个主题是跟着 Select2 4.1.x 的标记结构走的（同时也兼容 4.0.x 里 choice-remove 的那套标记）。它只管样式——Select2 自身的 bug 还是得 Select2 自己去修，而且 AdminLTE 官方的框架移植版（Vue、React、Django、Laravel）没有一个能用 jQuery 插件。

范围滑块 — noUiSlider

noUiSlider 处理单值、范围和多手柄滑块，无依赖。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/nouislider@15.8.1/dist/nouislider.min.js"></script>

<div id="slider"></div>

<script>
  noUiSlider.create(document.getElementById("slider"), {
    start: [20, 80],
    connect: true,
    range: { min: 0, max: 100 }
  })
</script>

颜色选择器 — Pickr

Pickr 是一个扁平、现代的颜色选择器，支持多种主题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.10.2/dist/themes/classic.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.10.2/dist/pickr.min.js"></script>

<div id="color-picker"></div>

<script>
  Pickr.create({
    el: "#color-picker",
    theme: "classic",
    default: "#0d6efd",
    components: { preview: true, opacity: true, hue: true, interaction: { input: true, save: true } }
  })
</script>

输入掩码 — IMask

IMask 处理电话号码、信用卡、日期、货币——任何具有固定格式的内容。

<script src="https://cdn.jsdelivr.net/npm/imask@7.6.1/dist/imask.min.js"></script>

<input class="form-control" id="phone" placeholder="(123) 456-7890" />

<script>
  IMask(document.getElementById("phone"), { mask: "(000) 000-0000" })
</script>

文件处理

文件上传器 — Dropzone

Dropzone 是事实上的拖拽上传器。v6 重写版是纯 JavaScript（旧版 v5 有与 jQuery 耦合的示例；v6+ 没有）。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@6.3.5/dist/dropzone.css" />
<script src="https://cdn.jsdelivr.net/npm/dropzone@6.3.5/dist/dropzone-min.js"></script>

<form action="/upload" class="dropzone" id="uploader"></form>

<script>
  Dropzone.autoDiscover = false
  new Dropzone("#uploader", { paramName: "file", maxFilesize: 5 })
</script>

文件上传器 — FilePond

FilePond 是一个更现代的替代方案，具有精致的用户体验和用于图像预览、验证、EXIF 等的插件系统。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond@4.32.12/dist/filepond.min.css" />
<script src="https://cdn.jsdelivr.net/npm/filepond@4.32.12/dist/filepond.min.js"></script>

<input type="file" class="filepond" />

<script>
  FilePond.create(document.querySelector(".filepond"), { allowMultiple: true })
</script>

富文本和 Markdown 编辑器

富文本 — Quill

Quill 是支持最好的开源所见即所得编辑器。轻量、模块化、无依赖。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

<div id="editor" style="height: 12rem;"></div>

<script>
  new Quill("#editor", {
    theme: "snow",
    placeholder: "写点有趣的东西&hellip;"
  })
</script>

Markdown — EasyMDE

EasyMDE 是 SimpleMDE 的积极维护分支。相同的界面，相同的 API，但仍持续获得更新。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2.21.0/dist/easymde.min.css" />
<script src="https://cdn.jsdelivr.net/npm/easymde@2.21.0/dist/easymde.min.js"></script>

<textarea id="markdown"></textarea>

<script>
  new EasyMDE({ element: document.getElementById("markdown") })
</script>

WYSIWYG + Markdown — Toast UI Editor

Toast UI Editor 同时支持 Markdown 和 WYSIWYG 模式并排显示。适合希望用户自行选择偏好模式的场景。

<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>

<div id="md-editor"></div>

<script>
  new toastui.Editor({
    el: document.getElementById("md-editor"),
    height: "20rem",
    initialEditType: "markdown",
    previewStyle: "vertical"
  })
</script>

图表

Chart.js

Chart.js（MIT 许可）是 AdminLTE 仪表盘和 charts/chartjs.html 展示页里使用的图表库。基于 Canvas，带动画、响应式，内置折线图、面积图、柱状图、圆环图、饼图、极区图、雷达图、散点图和气泡图。

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>

<!-- 为画布设置一个具有高度的父元素；图表会填充它并跟随其宽度。 -->
<div style="position: relative; height: 300px">
  <canvas id="bar-chart" role="img" aria-label="Revenue per quarter"></canvas>
</div>

<script>
  new Chart(document.getElementById("bar-chart"), {
    type: "bar",
    data: {
      labels: ["一季度", "二季度", "三季度", "四季度"],
      datasets: [{ label: "收入", data: [120, 190, 170, 230] }]
    },
    options: { maintainAspectRatio: false }
  })
</script>

演示页面用 AdminLTE 的 CSS 变量来给每张图表设定样式 —— 字体、文字和网格线颜色、提示框和图例 —— 并且在颜色模式变化时实时重新刷一遍样式。那个预设就是一小段内联脚本；想把它复制到你自己的页面里，见[方案](recipes.html#会跟随深色模式的图表。

数据表格

Tabulator

Tabulator 在 tables/data.html 中使用无需 jQuery 的 DataTables 替代方案。排序、筛选、分页、编辑、导出——全部内置。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.6.1/dist/css/tabulator_bootstrap5.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.6.1/dist/js/tabulator.min.js"></script>

<div id="table"></div>

<script>
  new Tabulator("#table", {
    data: [{ id: 1, name: "Alice", role: "Admin" }],
    layout: "fitColumns",
    pagination: true,
    paginationSize: 10,
    columns: [
      { title: "ID", field: "id", width: 60 },
      { title: "名称", field: "name", headerFilter: "input" },
      { title: "职位", field: "role" }
    ]
  })
</script>

日历

FullCalendar

FullCalendar 是 /pages/calendar.html 中使用的日历。拖拽调度、多视图、重复事件、MIT 许可。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/skeleton.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@7.1.1/theme.css" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/all/global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@7.1.1/global.min.js"></script>

<div id="calendar"></div>

<script>
  new FullCalendar.Calendar(document.getElementById("calendar"), {
    initialView: "dayGridMonth",
    headerToolbar: { start: "prev,next today", center: "title", end: "dayGridMonth,timeGridWeek,listWeek" },
    events: [{ title: "团队晨会", start: "2026-06-01" }]
  }).render()
</script>

地图

jsVectorMap

jsVectorMap 是 jQuery Mapael / jVectorMap 的继任者，而且不依赖任何第三方库。它支持分级统计图（choropleth）、标记点、按区域绑定的点击处理器，还自带一张世界地图以及各个国家的数据文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/jsvectormap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/maps/world.js"></script>

<div id="map" style="height: 20rem;"></div>

<script>
  new jsVectorMap({
    selector: "#map",
    map: "world",
    markers: [{ name: "Riga", coords: [56.95, 24.11] }]
  })
</script>

拖拽

SortableJS

SortableJS 为看板演示提供支持。重新排序列表、在列表间拖拽、触控友好。31k Star。

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.7/Sortable.min.js"></script>

<ul id="list" class="list-group">
  <li class="list-group-item">项目 1</li>
  <li class="list-group-item">项目 2</li>
  <li class="list-group-item">项目 3</li>
</ul>

<script>
  new Sortable(document.getElementById("list"), { animation: 150 })
</script>

Lightbox / 图像查看器

GLightbox

GLightbox 是一个原生 JS Lightbox，用于图像、视频和内联内容。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/js/glightbox.min.js"></script>

<a href="image-large.jpg" class="glightbox">
  <img src="image-thumb.jpg" alt="点击放大" />
</a>

<script>
  GLightbox()
</script>

图标库

AdminLTE 默认附带 Bootstrap Icons ——它们是基于 SVG 的，约 1,900 个图标，并在整个演示中使用。如果你需要更多，以下库都可以与 AdminLTE 配合使用：

可以混用——它们都能共存。

关于打包的说明

以上示例使用 jsDelivr CDN 是为了方便复制粘贴。在生产环境中，建议：

1. npm install + 打包工具（Vite、Webpack、Rollup）——最适合 tree-shaking 和版本锁定
2. 自托管 压缩后的 bundle——避免 CDN 宕机成为故障模式
3. 带 integrity 哈希的 CDN——适用于原型和演示

AdminLTE 不附带这些库中的任何一个——保持框架体积小巧是刻意为之。按需选用，不需不用。