AdminLTELogo

控制侧边栏组件

控制侧边栏是右侧边栏。它可以用作多种用途,并且非常容易创建。侧边栏提供了两种不同的显示/隐藏样式。第一种允许侧边栏滑过内容。第二种将内容推到一边,为侧边栏腾出空间。这些方法可以通过JavaScript选项.

以下代码应放置在.wrapperdiv内部。我倾向于将其放在页脚之后。

控制侧边栏推

通过添加.control-sidebar-pushbody,侧边栏会推开内容而不是覆盖内容。.control-sidebar-push-slidebody,使用过渡效果推开内容。

暗色侧边栏标记
  <!-- 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>