AdminLTELogo

布局

提示！

The启动页面如果你想从零开始构建你的应用程序，这是一个很好的起点。

布局由四个主要部分组成：

  • 包装器.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获取一个仅延伸到1250px的箱型布局。
  • 顶部导航：使用类.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中，你可以添加.accent-*到body.

信息

你可以组合.navbar-*与.navbar-light或.navbar-dark.

你必须只使用.navbar-dark而不只有组合。

以下颜色可用：

主题颜色
主要（主要）/ 蓝色（蓝色）
次要（次要）
成功（成功）/ 绿色（绿色）
信息（信息）/ 青色（青色）
警告（警告）/ 黄色（黄色）
危险（危险）/ 红色（红色）
黑/白细微差别
黑色（黑色）
深灰色（深灰色）
灰色（灰色）
浅色（浅色）
靛蓝色（靛蓝色）
Indigo (indigo)
海军蓝（海军蓝）
紫色（紫色）
粉红色（粉红色）
粉色（粉色）
栗色（栗色）
橙色（橙色）
酸橙色（酸橙色）
青绿色（青绿色）
橄榄色（橄榄色）
提示！

你可以使用这些颜色变化，甚至与.text-*, .bg-*和更多。

自定义范围/开关

对于自定义颜色的自定义复选框和自定义单选按钮，你可以添加这些类：

  • .custom-control-input-*

你也可以通过在自定义控制输入上添加.custom-control-input-outline来改变外观为轮廓复选框和单选按钮。

对于自定义颜色的自定义范围，你可以添加这些类：

  • .custom-range-*

对于自定义颜色的自定义范围，你可以添加这些类：

  • .custom-range-*

对于自定义颜色的自定义开关，你可以添加这些类：

  • .custom-switch-off-*（用于自定义关闭）
  • .custom-switch-on-*（用于自定义开启）
提示

你也可以使用bg-*除了.toast来获取一个漂亮的彩色提示。

插件支持

你可以使用上述所有颜色与这些插件：

  • Bootstrap滑块
    • .slider-*（围绕滑块包裹）
  • iCheck-Bootstrap
    • .icheck-*