推荐集成

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", { plugins: ["remove_button"] })
</script>

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

范围滑块 — 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>

拖拽

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 不附带这些库中的任何一个——保持框架体积小巧是刻意为之。按需选用，不需不用。