布局

提示！

如果您希望从头开始构建应用程序，则 入门页面 是一个很好的起点。

布局由四个主要部分组成

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

布局选项

注意！

您不能同时使用带框布局和固定导航栏或固定页脚。其他任何布局都可以混合在一起。

AdminLTE 3.0 提供了一组选项，可应用于您的主布局。可以将其中任何一个类添加到 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>。

颜色变体

AdminLTE 3.0 提供了一组颜色变体，可应用于您的侧边栏（浅色和深色）和导航栏。您可以使用这些类前缀来组合任何可用颜色

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

您可以覆盖 AdminLTE 中的链接/重点颜色，您可以在 body 中添加 .accent-*。

信息

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

可以使用以下颜色

主题颜色
主色 (primary) / 蓝色 (blue)
次要色 (secondary)
成功（成功）/绿色（绿色）
信息（信息）/青色（青色）
警告（警告）/黄色（黄色）
危险（危险）/红色（红色）
黑白灰度
黑色（黑色）
深灰色（深灰色）
灰色（灰色）
浅色（浅色）
彩
靛蓝（靛蓝）
藏青色（藏青色）
紫色（紫色）
紫红（紫红）
粉色（粉色）
栗色（栗色）
橙色（橙色）
青柠绿（青柠绿）
青色（青色）
橄榄绿（橄榄绿）
提示！

您可以在 .text-*、.bg-* 和更多内容中使用这些颜色变体。

自定义范围/开关

对于自定义颜色自定义范围，您可以添加以下类

  • .custom-range-*

对于自定义颜色自定义开关，您可以添加以下类

  • .custom-switch-off-*（用于自定义关闭开关）
  • .custom-switch-on-*（用于自定义打开开关）
弹出通知

您也可以在 .toast 旁边使用 bg-* 来获取颜色好看的通知。

插件支持

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

  • 引导程序滑块
    • .slider-*（包裹在滑块周围）
  • iCheck-Bootstrap
    • .icheck-*