帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery+Bootstrap简洁后台仪表盘模板

帝国模板之家 2020-11-07 网页特效 评论

这是一款简洁的仪表台后台模板,基于jQuery+Bootstrap实现,具有灵活可折叠的侧导航,可用于web项目中创建专业的管理面板。

使用方法:

1. 加载必要的jquery库和bootstrap4框架。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. 加载dashboard模板样式文件

<link rel="stylesheet" href="style.css" />

3. 加载bootstrap颜色样式文件。(可选)

<link rel="stylesheet" href="colors.css" />

4. 创建dashboard模板html结构代码。

<!-- Page wrapper -->
<div class="d-flex flex-column flex-grow-1 overflow-hidden bg-light txt-dark page-wrapper">
  <!-- Navbar wrapper -->
  <div class="d-flex flex-row flex-shrink-0" role="navigation">
    <!-- Navbar-->
    <nav class="d-flex flex-row flex-grow-1 navbar sticky-top navbar-light bg-white p-0">
      <div id="sidebarToggle" class="animated-burger-menu open mx-3">
        <span class="bg-dark-secondary"></span>
        <span class="bg-dark-secondary"></span>
        <span class="bg-dark-secondary"></span>
        <span class="bg-dark-secondary"></span>
      </div>
      <!-- Brand -->
      <div id="brand" class="d-flex flex-column flex-grow-1 brand-content px-2">
        <a id="navbar-brand" class="navbar-brand d-flex align-items-center p-0 m-0" href="#">
        <img src="img/logo anker.jpg" class="navbar-image py-2" alt="" loading="lazy">
        <span class="ml-3 font-weight-bold txt-primary">Seacrew</span>
        </a>
      </div>
      <div class="d-flex flex-column flex-grow-0 dropdown h-100 mr-2">
        <a class="btn btn-clean txt-dark dropdown-toggle d-flex align-items-center h-100" href="#" role="button"
          id="profileDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img src="https://colorlib.com/polygon/gentelella/images/img.jpg" width="30" height="30" alt=""
          class="rounded-circle">
        <span class="pl-2 pr-2">John Doe</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="profileDropdownMenu">
          <a class="dropdown-item" href="#"><i class="zmdi zmdi-account pr-2"></i>Profile</a>
          <a class="dropdown-item" href="#"><i class="zmdi zmdi-close-circle pr-2"></i>Logout</a>
        </div>
      </div>
    </nav>
  </div>
  <!-- Content wrapper -->
  <div class="d-flex flex-row flex-grow-1 overflow-hidden">
    <!-- Sidebar container-->
    <aside id="sidebar-container" class="d-flex flex-column bg-light-secondary sidebar-container">
      <!-- Sidebar content -->
      <div id="sidebar" class="d-flex flex-column flex-grow-1 sidebar-content expanded">
        <!-- Sidebar header -->
        <div class="d-flex flex-shrink-0 collapsible-section py-1 sidebar-header">
          <div class="d-flex flex-row flex-grow-1 align-items-center overflow-hidden">
            <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon">
            <i class="zmdi zmdi-boat zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only font-weight-bold">Company</span>
          </div>
          <!-- Dropright button -->
          <div id="sidebarAdd" class="d-flex flex-column flex-shrink-0 position-relative btn-group dropright">
            <a href="" class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center txt-dark sidebar-icon">
            <i class="zmdi zmdi-plus zmdi-hc-2x"></i>
            </span>
            </a>
            <div class="dropdown-menu position-absolute">
              <a class="dropdown-item" href="#">Add something</a>
            </div>
          </div>
        </div>
        <!-- Seperator -->
        <div class="separator flex-row flex-shrink-0"></div>
        <!-- Sidebar middle section -->
        <!-- Dashboard, New Applicants, Crew Data, Crew on board, Planning, Companies -->
        <!-- Codes(Generic, Ranks), Users(Users, Groups), Triggers(Qualifications per rank) -->
        <!-- Authorization(Employees, Vessels), Reports(Nationalities, Ranks, Age categories) -->
        <div class="d-flex flex-column flex-grow-1 sidebar-middle py-2">
          <div class="d-flex flex-column flex-shrink-0 position-relative">
            <a href="#"
              class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item active">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-primary">
            <i class="zmdi zmdi-view-dashboard zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only">Dashboard</span>
            </a>
          </div>
          <div class="d-flex flex-column flex-shrink-0 position-relative">
            <a href="#"
              class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-success">
            <i class="zmdi zmdi-globe zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only">Globe</span>
            </a>
          </div>
          <div class="d-flex flex-column flex-shrink-0 position-relative">
            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"
              class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item dropdown-toggle">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-danger">
            <i class="zmdi zmdi-google-pages zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only">Pages</span>
            </a>
            <ul class="collapse list-unstyled sidebar-sub-items m-0" id="pageSubmenu">
              <li>
                <a href="#"
                  class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
                <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon">
                <i class="zmdi zmdi-collection-item"></i>
                </span>
                <span class="flex-grow-1 expanded-only">Page 1</span>
                </a>
              </li>
              <li>
                <a href="#"
                  class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
                <span class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon">
                <i class="zmdi zmdi-collection-item"></i>
                </span>
                <span class="flex-grow-1 expanded-only">Page 2</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="d-flex flex-column flex-shrink-0 position-relative">
            <a href="#"
              class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-info">
            <i class="zmdi zmdi-assignment-check zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only">Tasks</span>
            </a>
          </div>
          <div class="d-flex flex-column flex-shrink-0 position-relative">
            <a href="#"
              class="d-flex flex-row flex-grow-1 align-items-center position-relative txt-dark sidebar-item">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon text-warning">
            <i class="zmdi zmdi-fire zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only">Fire</span>
            </a>
          </div>
          <!-- Dropright button -->
          <div class="d-flex flex-column flex-shrink-0 position-relative btn-group dropright">
            <a href=""
              class="d-flex flex-row flex-grow-1 align-items-center position-relative pl-0 txt-dark sidebar-item dropdown-toggle"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span
              class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center txt-dark sidebar-icon">
            <i class="zmdi zmdi-chart zmdi-hc-2x"></i>
            </span>
            <span class="flex-grow-1 expanded-only">Chart</span>
            </a>
            <div class="dropdown-menu position-absolute">
              <a class="dropdown-item" href="#">Chart</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated chart</a>
            </div>
          </div>
        </div>
        <!-- Seperator -->
        <div class="separator flex-row flex-shrink-0"></div>
        <!-- Sidebar bottom section -->
        <div class="d-flex flex-shrink-0 collapsible-section py-2">
          <a href="#"
            class="d-flex flex-row flex-grow-1 align-items-center overflow-hidden position-relative txt-dark sidebar-item">
          <span>
          <i
            class="zmdi zmdi-settings zmdi-hc-2x d-flex flex-row align-items-center justify-content-center flex-shrink-0 sidebar-icon"></i>
          </span>
          <span class="expanded-only">Settings</span>
          </a>
          <div id="sidebarCollapse"
            class="d-flex flex-row flex-shrink-0 align-items-center justify-content-center sidebar-icon py-2">
            <i class="zmdi zmdi-chevron-left zmdi-hc-2x"></i>
          </div>
        </div>
      </div>
    </aside>
    <!-- Main container-->
    <main id="main-container" class="d-flex flex-column flex-grow-1 overflow-hidden main-container">
      <!-- Main content -->
      <div class="d-flex flex-column flex-grow-1 main-content">
        <!-- Main header -->
        <div class="d-flex flex-shrink-0 main-header">
          <div class="container-fluid pt-5">
            <div class="row">
              <div class="col-12">
                <h2>Dashboard</h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Main middle section -->
        <div class="d-flex flex-column flex-grow-1 main-middle">
          <div class="container-fluid pt-3">
            <div class="row">
              <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 py-3">
                <div class="card">
                  <div class="card-header">Featured</div>
                  <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                  </div>
                  <div class="card-footer text-muted">2 days ago</div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 py-3">
                <div class="mat-card bg-white">
                  <div class="d-flex flex-row align-items-center">
                    <div class="d-flex flex-column flex-grow-1 justify-content-center">
                      <h3 class="txt-dark">225,000</h3>
                      <span>New users.</span>
                    </div>
                    <div class="d-flex flex-column justify-content-center">
                      <i class="zmdi zmdi-account-add zmdi-hc-4x card-icon"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

5. 调用侧边栏nav所需的方法。

// Define variables
var sidebarCollapse = $("#sidebarCollapse");
var sidebarToggle = $("#sidebarToggle");
var sidebarContent = $("#sidebar");
var sidebarContainer = $("#sidebar-container");
var mainContainer = $("#main-container");
var mql = window.matchMedia("(max-width: 768px)");

// init screen
responsive(mql);

// Add media listener
mql.addEventListener("change", responsive);

// sidebarCollapse event listener
sidebarCollapse.on("click", () => {
  sidebarContent.toggleClass("expanded");
  sidebarCollapse.toggleClass("rotated-icon");
});

// sidebarToggle event listener
sidebarToggle.on("click", () => {
  var sidebarContainerMargin = parseInt(sidebarContainer.css("marginLeft").replace('px', ''));
  (sidebarContainerMargin == 0) ? closeSidebar() : openSidebar();
});

// Opens sidebar
function openSidebar() {
  sidebarContainer.css('margin-left', 0);
  mainContainer.css('left', '48px');
  sidebarToggle.addClass('open');
}

// Closes sidebar
function closeSidebar() {
  sidebarContainer.css('margin-left', - sidebarContainer.width());
  mainContainer.css('left', 0);
  sidebarToggle.removeClass('open');
}

// Sets correct styling based on screen width
function responsive(mql) {
  if (mql.matches) { // Small screen
    addInlineStyling();
    closeSidebar();
  } else { // Large screen
    removeInlineStyling();
    openSidebar();
  }
}

// Adds styling for main container
function addInlineStyling() {
  mainContainer.css('position', 'absolute');
  mainContainer.css('bottom', 0);
  mainContainer.css('right', 0);
  mainContainer.css('top', '48px');
  if (sidebarContainer.css('margin-left') == '0px') {
    mainContainer.css('left', '48px');
  }
  else {
    mainContainer.css('left', '0px');
  }
}

// Removes styling for main
function removeInlineStyling() {
  mainContainer.removeAttr("style");
  sidebarContainer.removeAttr("style");
}

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言