BootStrap用于零基础教学的后台项目

Hello 大家好.我叫咖啡，今年是我从事WEB前端开发的第三年了。现在在广州某培训机构担任讲师一枚。为了避免广告嫌疑哈，我就不说那家了。
今天要和大家分享的是基于bootstrap的后台管理系统。由于这是一个教学，让学生入门的例子。只适合于刚入门的新手，大牛们就别看了.......
OK,首先你要知道什么是bootstrap吧。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

有了简单的概念我们直接来看代码实现过程。首先呢，后台，我们需要一个头部导航的内容吧。这个时候，我们应该想到要一个Bootstrap提供的一个导航条组件。navbar导航条组件和徽章组件 badge.这里我们需要注意一下，因为我先希望这个导航条是居中显示的。所以我们需要在navbar外围包裹一个container容器。

我们也在相对应的CSS中添加一点样式，这几行CSS样式很简单，自己可以去理解一下。

然后就到我们比较常见的一个的一个侧边栏选项菜单了。在这里我们也需要bootstrap的一个折叠组件和栅格组件。

<div class="row">
<div class="col-md-2 col-xs-2 col-sm-2 col-lg-2" id="menuTree">
<ul class="nav nav-pills nav-stacked menu">
<li>
<ul class="nav nav-pills nav-stacked menuList">
<li>
<a href="test1.html" data-id = "test1.html">
<i class="glyphicon glyphicon-plus-sign"></i>
首页
</a>
</li>
</ul>
</li>
<li>
<a href="#two" data-toggle = "collapse">
<i class="glyphicon glyphicon-fire"></i>
车辆销售总额
</a>
<ul class="nav nav-pills nav-stacked collapse menuList" id="two">
<li>
<a href="test2.html">当月销售金额</a>
</li>
<li>
<a href="test3.html">上月销售金额</a>
</li>
</ul>
</li>

<li>
<a href="#three" data-toggle = "collapse">
<i class="glyphicon glyphicon-cloud"></i>
车辆进库类型
</a>
<ul class="nav nav-pills nav-stacked collapse menuList" id="three">
<li>
<a href="test4.html">国外车辆</a>
</li>
<li>
<a href="test5.html">国内车辆</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-10 col-xs-10 col-sm-10 col-lg-10">
<div class="panel panel-default">
<ul class="nav nav-pills" id="nav-tabs">
<li class="active">
<a href="test1.html" class="tabs">首页</a>
</li>
</ul>
</div>
<div class="content">
<div class="jumbotron wow fadeInRight">
<div class="container">
<h2>你好，欢迎来到我的后台页面，这里的组件都是收费，扫一下</h2>
</div>
</div>
<div class="row wow fadeInRight">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
</div>
</div>
</div>

这里我就直接上代码了....我们在使用栅格组件的时候，要注意做一下不同分辨率下的栅格系统。即是col-md-xx col-xs-xx col-sm-xx col-lg-xx.我们在内容部分的话，选择采取ajax的方法来进行异步请求内容到container容器内。当然咯，你用iframe标签也是可以的。其实，细心的同学就会发现，我在每个容器上都加了 wow fadeinRight 类名，这是为什么呢？这是我为了做动画效果而增加的。这里的话，我们就要采用第三方的库，叫做animate.css这个非常实用的一个CSS3动画库，在用这个库的时候，我们还要导入一个js库，叫做wow.js.直接上代码。

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

<script type="text/javascript" src="js/wow.min.js" ></script> //wow.js

我们还要注意，使用这个库的时候，我们在对wow.js做一个初始化。

new WOW().init();

最后，我们现在来实现JS的代码。我们先来做AJAX异步请求内容到container容器内。我们要借助一下Jquery的AJAX

var lia = $(".menuList>li").find("a");
lia.click(function(ev){
ev.preventDefault()
var aH = $(this).attr("href");
$.ajax({
type:"get",
url:aH,
success:function(data){
$(".content").html(data);
},
error:function(){
$(".content").html("兄弟404了");
}
})
tabs($(this))
})

这个过程就已经实现了点击左边侧边栏，然后显示到右边的容器内，这里的话，我们还需要封装一个tabs方法。

那么tabs方法的功能是什么呢？

function tabs(obj){
obj.children().length == 0){ // 是因为第一个是没有children
$(".tabs").each(function(){
if($(this).text() == oText){ //可以通过data-id来判断
if(!$(this).parent().hasClass("active")){
$(this).parent().addClass("active").siblings("li").removeClass("active")
}
onOff = true; //第二次点击的时候就为真了 是因为我这里用的是text来对比
}
// alert(1)
})

// console.log(onOff+"off")
// console.log(!onOff+"on") //true
if(!onOff){
$(".tabs").parents().removeClass("active");
$("#nav-tabs").append("<li class='active'><a href='"+iH+"' class='tabs'>"+oText+"</a></li>")
}
return false; //防止默认事件跳转
}

//点击切换
$("#nav-tabs").on("click",".tabs",function(ev){
ev.preventDefault()
var tH = $(this).attr("href");
$(this).parent().addClass("active").siblings("li").removeClass("active")
$.ajax({
type:"get",
url:tH,
success:function(data){
$(".content").html(data);
},
error:function(){
$(".content").html("兄弟404了");
}
})
})
//双击删除
$("#nav-tabs").on("dblclick",".tabs",function(ev){
ev.preventDefault()
// var width = $(this).parent().width(); 本来想做动画效果的 哎~~~~
// console.log(width)
if($(this).parent().hasClass("active")){
if($(this).parent().next("li").length>0){
// alert(1)
var next_url = $(this).parent().next("li").find("a").attr("href");
// console.log(next_url)
$(this).parent().removeClass("active").next("li").addClass("active")
$(this).parent().remove()
$.ajax({
type:"get",
url:next_url,
success:function(data){
$(".content").html(data);
},
error:function(){
$(".content").html("兄弟404了");
}
})
// $(this).parent().animate({
// marginLeft:-173+"px"
// },5000)
// console.log($(this).parent())

}else if($(this).parent().prev("li").length>0){
var prev_url = $(this).parent().prev("li").find("a").attr("href");
$(this).parent().prev().addClass("active");
$(this).parent().remove();
$.ajax({
type:"get",
url:prev_url,
success:function(data){
$(".content").html(data);
},
error:function(){
$(".content").html("兄弟404了");
}
})
}else{
alert("朋友别删了")
}
}
})

到这里一个后台的基本功能就已经可以实现了。因为这个项目，是用于教学的，对没有什么开发经验的同学们，是有非常大的好处。当然咯，我还是那句话，这个不适合于已经有经验的老鸟了。如果你对以上的内容有问题可以加我的QQ404792402.

如果以上的内容对你有帮助的话，可以私底下赞助一波。我会在每个星期天分享一个阶段性的项目，下周就会是一个angular的项目啦。可以赞助一杯咖啡的钱~~~