AdminLTELogo

控制側邊欄元件

控制側邊欄是右側的側邊欄。它可以用於多種用途，而且非常容易建立。該側邊欄提供兩種不同的顯示/隱藏樣式。第一種允許側邊欄滑動覆蓋內容。第二種則會推開內容，為側邊欄騰出空間。這兩種方法都可以通過 JavaScript 選項進行設定。

以下程式碼應放置在 .wrapper div 中。我建議將其放在頁腳之後。

控制側邊欄推移

通過在 body 中添加 .control-sidebar-push，側邊欄會將內容推開，而不是覆蓋內容。您還可以將 .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>