忙活两天的成果如下
算是把整个系统的大致界面整出来了
依次说一下具体使用了Bootstrap的什么功能吧
PS.界面仿照了Themeforest 上面的 Minoral 主体
地址 http://tattek.com/minoral/datatables.html
代码太长了，由左上到右下进行文字叙述吧
①最上方是我的Header条以及一个标志区域(左上角)
首先用一个 div class="row" 嵌套两个部分 1: div class="col-lg-2" 2: div class="col-lg-10"
Bootstrap中，用row进行栅格处理，每一行由12个col组成，而col又根据屏幕大小的不同分为 lg,md,sm,xs
当在不同屏幕上时，会根据屏幕宽度自动进行栅格处理*，我将第一row宽度指定为 50px
左边的标志区域通过一个 a class="navbar-brand" + span class="glyphicon glyphicon-th" 实现
span嵌套在a标签中，可以自动将指定的图片填入并调整大小，非常方便
右侧col-lg-10区域 首先嵌套一个div class="nav" 来实现导航条功能 并且指定导航条的主体为默认主题 navbar-default
随后在nav中在嵌套一个row，注意 Bootstrap中row的嵌套依然是12个cols而不是父元素的col数量
在嵌套的row中又分为 2-次标题 3-制作人说明 2-用户名输入区域 2-密码输入区域 1-Checkbox区域 1-登陆按钮 1-设置下拉选框
前两个分别用a标签的 navbar-brand navbar-text 实现不用的字体大小
两个输入区域用 div class="input-group" 嵌套一个span class="input-group-addon"以及一个input class="form-control input-sm"
顾名思义这个div是针对这种输入框组设计的 而 input的 form-control 则是控制了input的样式 包括圆角 内边距 等
之后的Checkbox 和登录按钮不做多说 说一说最后的下拉选框
下拉选框通过div class="btn-group" + button class="dropdown-toggle"/data-toggle="dropdown" + ul class="dropdown-menu"/role="menu" 实现
其中 button 用来控制 下来选选框区域ul的显示与隐藏，而ul中又可以加入li class="divider"来实现分割线的效果
②左侧菜单栏
同样是col-lg-2来包括整个菜单栏，随后首先增加一快区域用来添加随后的搜索功能
然后是一个 div class="pannel-group"/id="accordion" + div class="panel"(嵌套一个 div class="panel-heading"+div class="panel-collapse")实现
最后坍缩部分 通过in 或 collapse来控制坍缩菜单的显示与收起，在配合default primary success danger alert 等几种颜色特效来控制母菜单的颜色，OK搞定
③右侧主体区域
首先是一个 ol class="Breadcrumb" 实现“面包屑”菜单
随后是ul class="nav nav-tabs"来实现tabs菜单的效果
接下来就是table class="table-striped table-hover" 来控制表格的隔行不同色 以及鼠标悬浮变色效果
具体的js部分 明天补上！