Bootstrap 学习日志（二）

忙活两天的成果如下

 

算是把整个系统的大致界面整出来了

 

依次说一下具体使用了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部分 明天补上！