左侧导航条+中间显示内容+右侧菜单配置，Bootstrap+AdminLTE+Jquery
1、最近做个导航页面，找了一大堆UI，最终选了AdminLTE，这个UI也是以bootstrap为基础，简单实用，中间内容用jquery的load加载，简单暴力，非常适合快速开发。
2、效果图如下：
3、页面代码index.html
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <!-- Font Awesome -->
<link rel="stylesheet" href="bootstrap/css/font-awesome.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bootstrap/css/ionicons.css">
<!-- Theme style -->
<link rel="stylesheet" href="bootstrap/css/AdminLTE.css">
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect. -->
<link rel="stylesheet" href="bootstrap/css/skins/skin-blue.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <!-- Google Font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> </head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper"> <!-- Main Header -->
<header class="main-header"> <!-- Logo -->
<a href="index2.html" target="_blank" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>C</b>RM</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Welcome</b> visit crm</span>
</a> <!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><!-- start message -->
<a href="add.html" target="_blank">
<div class="pull-left">
<!-- User Image -->
<img src="img/1.png" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li> <li><!-- start message -->
<a href="add.html" target="_blank">
<div class="pull-left">
<!-- User Image -->
<img src="img/2.png" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="add2.html" target="_blank">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu --> <!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user img in the navbar-->
<img src="img/1.png" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the img appears. -->
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- The user img in the menu -->
<li class="user-header">
<img src="img/1.png" class="img-circle" alt="User Image"> <p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar"> <!-- Sidebar user panel (optional) -->
<div class="user-panel">
<div class="pull-left image">
<img src="img/3.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Alexander Pierce</p>
<!-- Status -->
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div> <!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form --> <!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
<li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="javascript:void(0)" class="myLeftMenu" data="add.html">我是add</a></li>
<li><a href="javascript:void(0)" class="myLeftMenu" data="checkbox.html">点击是checkbox页面</a></li>
<li><a href="javascript:void(0)" class="myLeftMenu" data="userList.html">我是userList</a></li>
</ul>
</li> <li class="header text-center panel panel-primary"><span class="fa-lg ">我就是系统标题</span></li>
<!-- Optionally, you can add icons to the links -->
<li class=""><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
<li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="javascript:void(0)" class="myLeftMenu" data="add.html">我是add</a></li>
<li><a href="javascript:void(0)" class="myLeftMenu" data="checkbox.html">点击是checkbox页面</a></li>
<li><a href="javascript:void(0)" class="myLeftMenu" data="userList.html">我是userList</a></li>
</ul>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside> <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Page Header
<small>Optional description</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section> <!-- Main content -->
<section class="content container-fluid">
<div id="container">
我是内容~~~~~
</div> <!--------------------------
| Your Page Content Here |
--------------------------> </section>
<!-- /.content -->
</div>
<!-- /.content-wrapper --> <!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2016 <a href="#">Company</a>.</strong> All rights reserved.
</footer> <!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the 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-stats-tab" data-toggle="tab"><i class="fa fa-stumbleupon"></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">Langdon's 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">
<header>Stats Tab Content</header>
<small>go go go,rocking roll!</small>
</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 -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper --> <!-- REQUIRED JS SCRIPTS --> <!-- jQuery 3 -->
<script src="bootstrap/js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="bootstrap/js/adminlte.min.js"></script>
<script>
$(function () {
$('ul.sidebar-menu li').click(function () {
var li = $('ul.sidebar-menu li.active');
li.removeClass('active');
$(this).addClass('active');
}); $('.myLeftMenu').click(function (e) { var url = $(this).attr('data');
// console.log(url);
$('#container').load(url);
});
})
</script> <!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. -->
</body>
</html>
4、引用的css和js可以去https://github.com/asker124143222/bootstrapTest下载或者clone，百度也可以找到。
左侧导航条+中间显示内容+右侧菜单配置，Bootstrap+AdminLTE+Jquery的更多相关文章
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- vue Element-ui el-menu 左侧导航条
<template> <!--实现左侧导航条动态渲染(三级)--> <el-menu class="el-menu-vertical-demo" @o ...
- dedecms左侧导航栏不显示问题
dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...
- SplitContainer如何实现左侧导航，正确显示和导航内容
关于这种类型的设计有很多的实现,这样,我首先解释一下我使用: 我的原则是实现方式,将form嵌panel在,作为一个子窗口. 如下面的代码细节: Form form = new DataSelect( ...
- vue中 左侧导航条 多个toggleClass
<ul> <li v-for='item in items' @click="showToggle(item)"> <i :class="{ ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
- ElementUI+命名视图实现复杂顶部和左侧导航栏
在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...
- Bootstrap 我的学习记录3 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- Bootstrap入门（十三）组件7：导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
随机推荐
- 如何在linux系统内用openssl 生成 过期的证书
需求:验证过期的证书在系统中不能使用. 问题:如何生成过期的证书呢? 解决方法:1.调整系统时间 2.生成证书 3.验证证书startdate 和 enddate 是否符合你的预期 1.调整系统时间 ...
- 系统编程.py（多进程与多线程干货）
1.并发与并行* 多个任务轮换在CPU上跑叫并发* 多个任务在多个CPU上跑,没有交替执行的* 状态叫并行.通常情况下都是并发,即使是多核.* 而控制进程先执行谁后执行谁通过操作系统的调度算法.目前已 ...
- 【Nginx】Nginx配置REWRITE隐藏index.php
只需要在server里面加上 if (!-e $request_filename) { rewrite ^/(.*)$ /index.php/$1 last; break; }
- DVWA中SQL回显注入
一．SQL注入简介 1.1 SQL语句就是操作数据库的语句,SQL注入就是通过web程序在数据库里执行任意SQL语句. SQL 注入是一种常见的Web安全漏洞,攻击者利用这个漏洞,可以访问和修改数据, ...
- ESP32 LyraT音频开发板试玩(二)：播放音乐
我是卓波,很高兴你来看我的博客. 系列文章: ESP32 LyraT音频开发板试玩(一):搭建开发环境 ESP32 LyraT音频开发板试玩(二):播放音乐 本文延续上一篇博客 将D:\msys32\ ...
- node获取头信息数据
req.fresh req.stale var version = 100; app.get('/test',function(req,res){ res.set('etag',version); i ...
- MongoDB入门---简介
最近呢,刚好有一些时间,所以就学习了一下新的数据库类型MongoDB.要想了解这个MongoDB,我们首先需要了解一个概念,那就是nosql(not only sql).一下就是官方的概念: NoSQ ...
- 图片验证码给AI使用
为了破解图形验证码,AI需要大量的图片数据.为了简单获取大量的图形来喂给Ai模型训练,索性自己写一把.代码来一发.. import java.awt.Color; import java.awt. ...
- C++语言入门知识点(详细版)【持续更新每周三更】，小舒舒戳这里！！！
时间过得好快啊,LITTLESUN已经在这块新地图摸打滚爬了一个多月了.前一段时间出了点小意外一直没能更新博客,昨天被小舒舒催更了(惭愧惭愧)便准备着手来一篇回忆录回首一下这一个月走过的风风雨雨,也希 ...
- 关于实现mybatis order by 排序传递参数实现 问题记录
一 问题场景:本人项目纯纯的后端系统 并且项目前端采用纯纯的原生js 实现 1)表格 通过查询列表数据放入到域中 前段采用 for循环的方式实现遍历生成列表 2)分页实现本人是公司内部自定 ...