AdminLTE组件使用方法之control-sidebar

最新推荐文章于 2025-06-25 11:41:40 发布

转载最新推荐文章于 2025-06-25 11:41:40 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c3842406fb9a049f1546a87

文章标签：

#javascript #ViewUI

本文详细介绍了AdminLTE框架中控制侧边栏的使用方法，包括基本模板、颜色设置及如何通过实例创建tabs和tab panes，展示了如何实现丰富的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 -->
复制代码