推荐集成

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.1/dist/css/tom-select.bootstrap5.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.6.1/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 Tom Select
$("#x").select2() new TomSelect("#x")
$("#x").select2({ tags: true }) new TomSelect("#x", { create: true })
allowClear: true 插件： ["clear_button"]
closeOnSelect: false closeAfterSelect: false
maximumSelectionLength: 3 maxItems: 3
minimumInputLength: 2 shouldLoad: (q) => q.length >= 2
ajax: { url, delay: 250 } load(query, callback) + loadThrottle: 250
ajax: { …, processResults } valueField / labelField / searchField
无限滚动 (pagination.more) 插件： ["virtual_scroll"] + setNextUrl()
templateResult / templateSelection render: { option, item }
dropdownParent: $("#modal") (不需要 — 下拉菜单是内联的)
$("#x").val("2").trigger("change") ts.setValue("2")
$("#x").val() ts.getValue()
$("#x").on("select2:select", fn) ts.on("item_add", fn)
$("#x").on("change", fn) ts.on("change", fn)
$("#x").select2("open") ts.open()
$("#x").prop("disabled", true) ts.disable()
$("#x").select2("destroy") ts.destroy()
$("#x").empty().select2({ data }) ts.clearOptions(); ts.addOptions(data)

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

如果你不得不继续用 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@3.7.1/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>

这个主题帮你处理了以下这些：
尺寸规范 高度、内边距、字号和圆角都和 .form-select 完全一致
尺寸大小 原始 <select> 上的 .form-select-sm / .form-select-lg 会被正确识别并生效
聚焦 用 Bootstrap 的焦点圈，而不是 Select2 那个黑色外框
深色模式 跟随 data-bs-theme——包括那个挂到 body 上的下拉面板
校验状态 原始 <select> 上的 .is-invalid / .is-valid 会给容器上色
多选 已选项做成胶囊样式，跟 Bootstrap 的 secondary 徽章一致
输入框组 支持 .input-group 的圆角处理和 flex 尺寸计算
模态框 下拉面板的 z-index 被提到 .modal 之上——修掉了 Select2 + Bootstrap 5 被反馈最多的那个 bug，所以不再需要 dropdownParent 了
RTL 和其他 CSS 一起自动生成

用打包工具？编译好的样式表可以通过包的 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.9.1/dist/themes/classic.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.9.1/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.0.0-beta.2/dist/dropzone.css" />
<script src="https://cdn.jsdelivr.net/npm/dropzone@6.0.0-beta.2/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>
图表
ApexCharts

ApexCharts 是 AdminLTE 仪表板中使用的图表库。现代外观、带动画、MIT 许可。 

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

<div id="chart"></div>

<script>
  new ApexCharts(document.querySelector("#chart"), {
    chart: { type: "区域", height: 300 },
    series: [{ name: "访问量", data: [30, 40, 35, 50, 49, 60, 70] }],
    xaxis: { categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }
  }).render()
</script>
Chart.js

Chart.js 是被问及最多的传统图表库。基于 Canvas，支持非常广泛的图表类型。 

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

<canvas id="bar-chart" height="120"></canvas>

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

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.4.0/dist/css/tabulator_bootstrap5.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.4.0/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 许可。 

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.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/css/jsvectormap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.7.0/dist/js/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 配合使用：

库 图标数量 备注
Bootstrap Icons 1,900+ 默认， SVG, MIT
Lucide 1,500+ 现代， SVG, ISC, 风格非常统一
Tabler Icons 5,800+ MIT, 可用的最广泛免费图标集
Material Symbols 3,500+ Google, Apache 2.0, 可变字体
FontAwesome Free 2,000+ 免费 最知名，基于字体
Phosphor 6,000+ MIT, 六种字体效果

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

关于打包的说明

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

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

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