control-sidebar

一、模板

.control-sidebar

<!-- 展開sidebar的按鈕，可以是a標籤也可以是button，必須的是data-toggle="control-sidebar" -->
<a href="#" data-toggle="control-sidebar">展開sidebar</a>

<!-- .wrapper通常直接寫在body標籤下面 -->
<div class="wrapper">
    <!-- .control-sidebar是必備的！！！aside通常寫在footer下邊，根據個人習慣可改變位置 -->
    <aside class="control-sidebar">
        <!-- 其他程式碼 -->
    </aside>
</div>
<!-- .control-sidebar-bg是為整個sidebar新增大背景，可以讓整個sidebar延伸到頁面底部，視覺效果更舒適。但這樣一個空div必須緊跟著aside標籤。-->
<div class="control-sidebar-bg"></div>
複製程式碼

注意：按鈕可以在body的任意地方;AdminLTE定義的control-sidebar有兩種顏色，為aside標籤分別新增類名.control-sidebar-dark和.control-sidebar-light即可得到黑色或白色背景。

二、例項

<aside class="control-sidebar control-sidebar-dark">
    <!-- 建立tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane active" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:;">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdons Birthday
                </h4>
                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:;">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="pull-right-container">
                    <span class="label label-danger pull-right">70%</span>
                  </span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
複製程式碼

如果各位有補充意見，歡迎留言～～ 梭梭醬加油鴨～～20190111