AdminLTELogo

布局

提示！

如果你想从头开始，启动页面是开始构建你的应用程序的绝佳场所。

布局包含四个主要部分

  • 包装器 .wrapper。包装整个站点的 div。
  • 主头 .main-header。包含徽标和导航栏。
  • 主侧边栏 .main-sidebar。包含侧边栏用户面板、搜索表单和菜单。
  • 内容 .content-wrapper。包含页面标题和内容。

布局选项

注意！

你不能同时使用 layout-boxed 和 layout-navbar-fixed 或 layout-footer-fixed。其他任何都可以混合使用。

AdminLTE 3.2 提供了一组选项供应用于你的主布局。每个类都可以添加到 body 标记以获得所需的目标。

  • 固定侧边栏：使用类 .layout-fixed 来获得固定侧边栏。
  • 固定导航栏：使用类 .layout-navbar-fixed 来获取固定导航栏。
  • 固定页脚：使用类 .layout-footer-fixed 来获取固定页脚。
  • 折叠侧边栏：使用类 .sidebar-collapse 在加载时折叠侧边栏。
  • 框布局：使用类 .layout-boxed 以获得仅延伸到 1250 像素的框布局。
  • 顶部导航：使用类 .layout-top-nav 删除侧边栏并在顶部导航栏中放置你的链接。
自适应变体

你还可以使用以下类来进行响应式更改

  • 固定导航栏
    • 使用类 .layout-*-navbar-fixed 来获取固定导航栏。
    • 使用类 .layout-*-navbar-not-fixed 来获取未固定的导航栏。
  • 固定页脚
    • 使用类 .layout-*-footer-fixed 来获取固定页脚。
    • 使用类 .layout-*-footer-not-fixed 来获取非固定页脚。
提示！

如果你想将锚点与固定导航栏一起使用，你需要将 .anchor 添加到隐藏的锚点，例如 <a id="testAnchor" class="anchor"></a>。

要平滑滚动到锚点，你需将 .scroll-smooth 添加到你的 HTML 标记中，如下 <html class="scroll-smooth"> 否则它直接跳到你的锚点，.scroll-smooth 可能会与一个名为 ScrollAnywhere 的 Chrome 扩展程序产生冲突。

预加载器

预加载器可避免 https://github.com/ColorlibHQ/AdminLTE/discussions/3319 问题。

<div class="wrapper">
  <!-- Preloader -->
  <div class="preloader">
    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>
</div>
  • 预加载器元素应添加到 .wrapper 元素内。
  • 你可以在 .preloader 元素内替换图像或修改大小或包含任何预加载项目。

暗模式

AdminLTE 3.2 提供暗模式选项。可在 body 标签中添加

  • .dark-mode

配色主题

AdminLTE 3.2 为您的侧边栏（亮色和暗色）和导航栏提供了一系列配色主题。您可以通过这些类前缀将任意配色主题与侧边栏或导航栏的配色主题相结合

  • .navbar-*
  • .sidebar-dark-*
  • .sidebar-light-*
  • .accent-*
新增功能

您可以在 AdminLTE 中覆盖链接/强调色，可以在 body 中添加 .accent-*。

信息

您可以将 .navbar-* 与 .navbar-light 或 .navbar-dark 相结合。

您必须仅使用 .navbar-dark 而无需任何组合使用。

可用的配色主题如下所示

主题配色主题
主色（primary）/蓝色（blue）
辅助色（secondary）
成功色（success）/绿色（green）
信息色（info）/青色（cyan）
警告色（warning）/黄色（yellow）
危险色（danger）/红色（red）
黑白灰明暗度
黑色（black）
深灰色（gray-dark）
灰色（gray）
浅色（light）
彩色
靛蓝色（indigo）
海军蓝（navy）
紫色（purple）
洋红色（fuchsia）
粉红色（pink）
栗色（maroon）
橙色（orange）
酸橙色（lime）
水鸭色（teal）
橄榄色（olive）
提示！

即使使用 .text-*、.bg-* 以及更多类，您也可以使用这些配色主题变体。

自定义范围/切换

对于自定义颜色的 custom-checkbox 和 custom-radio，您可以添加以下类

  • .custom-control-input-*

您还可以在自定义控件输入中添加 .custom-control-input-outline，从而将外观更改为有边框的复选框和单选框。

对于自定义颜色的 custom-range，您可以添加以下类

  • .custom-range-*

对于自定义颜色的 custom-range，您可以添加以下类

  • .custom-range-*

对于自定义颜色的 custom-switch，您可以添加以下类

  • .custom-switch-off-*（用于关闭自定义开关）
  • .custom-switch-on-*（用于打开自定义开关）
Toast

您还可以在 .toast 旁边使用 bg-*，获取漂亮颜色的提示。

插件支持

您可以在以下插件中使用所有上述颜色

  • Bootstrap Slider
    • .slider-*（包围在滑块的周围）
  • iCheck-Bootstrap
    • .icheck-*