控制侧边栏是右侧边栏。它可以用作多种用途,并且非常容易创建。侧边栏提供了两种不同的显示/隐藏样式。第一种允许侧边栏滑过内容。第二种将内容推到一边,为侧边栏腾出空间。这些方法可以通过JavaScript选项.
以下代码应放置在.wrapper
div内部。我倾向于将其放在页脚之后。
通过添加.control-sidebar-push
到body
,侧边栏会推开内容而不是覆盖内容。.control-sidebar-push-slide
到body
,使用过渡效果推开内容。
<!-- 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>