控制侧边栏组件 | AdminLTE 3 文档

控制侧边栏是右侧侧边栏。它可以用于多种用途，而且非常容易创建。侧边栏附带两种不同的显示/隐藏样式。第一种允许侧边栏在内容上滑动。第二种会推动内容为侧边栏腾出空间。这两种方法都可以通过 JavaScript 选项进行设置。

以下代码应放在 .wrapper div 中。我倾向于把它放在页脚之后。

控制侧边栏推动

将 .control-sidebar-push 添加到 body 中后，侧边栏会推动内容而不是覆盖内容。您还可以向 body 中添加 .control-sidebar-push-slide，以便通过转换推动内容。

深色侧边栏标记

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <!-- Content of the sidebar goes here -->
    </div>
  </aside>
  <!-- /.control-sidebar -->

浅色侧边栏标记

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-light">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <!-- Content of the sidebar goes here -->
    </div>
  </aside>
  <!-- /.control-sidebar -->

控制侧边栏切换标记

创建侧边栏后，您将需要一个切换按钮来打开/关闭它。向任何按钮添加属性 data-toggle=”control-sidebar”，它将自动充当切换按钮。

<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>