Layout

提示！

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-*