AdminLTELogo

控制侧边栏组件

控制侧边栏是右侧边栏。它可以用于多种目的，并且非常容易创建。该侧边栏带有两种不同的显示/隐藏样式。第一种允许侧边栏滑过内容。第二种将内容推开，为侧边栏腾出空间。可以通过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>