一、侧边菜单部分
主页的内容比登录页面的内容多很多，所以先从侧边栏开始复制。先将共用的结构剥离出来。多了三个CSS，matrix-style.css就是主体样式，matrix-media.css是用于侧边栏的补充样式，jquery.gritter.css是是一个小型的 jQuery 消息通知插件样式。
<link rel="stylesheet" type="text/css" href="styles/matrix-style.css" /> <link rel="stylesheet" type="text/css" href="styles/matrix-media.css" /> <link rel="stylesheet" type="text/css" href="styles/jquery.gritter.css" />
1）修改样式中图片的路径
原来的图片是保存在img文件夹中的，现在我挪到了images文件夹，所以要在css中做修改。顺便把所有的img/全部改成路径images/
在将一系列的html代码按需复制过来后，如下图所示：
二、左边内容部分
1）添加面包屑导航
2）添加大按钮
3）添加图表
这里我看到用了JQuery.Flot这个插件，我以前用的插件是百度的echarts插件。echarts能更好的支持AMD加载，而且文档非常丰富，demo也是中文的，综合后我决定这里改用echarts。在views的libs下面我打算写一个echartsView，以后就统一在这里操作图表，省得以后要写图表的时候，又到处找代码。
4）各个小部件，下面这个是有点特效的，点击一下标题栏可以显示隐藏内容。这里是用了bootstrap里面的一个js脚本，bootstrap-collapse.js。
5）这个小框，移到叉叉上面会显示一个小tip的。用到的是bootstrap-tooltip.js特效。在view层新增个调用这个脚本的方法。
6）将简单的那些栏目加上，没什么特效，主要还是看看里面的CSS样式。进度条样式、更新信息样式。
三、右边内容部分
1）聊天页面，直接复制过来的时候，小图标木有，右边的聊天内容框中也木有电脑，这里还得做些小修改。小图标是由于图片链接的改变导致的，改下图片地址就行。将matrix.chat.js脚本的中的内容加到相应的脚本目录下面，就有了特效。
2）这里样式挺朴素的，但我发现这里能出现滚动条是因为定义了overflow-x:auto与height的原因，overflow-x我知道是水平方向的意思，而这里用了auto后能实现垂直滚动条的效果，这个以前不知道，今天才发现的。
查阅了资料后，发现auto是指：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
.fix_hgt { height: 115px; overflow-x: auto; }
3）下面是一个折叠特效，这个前面就已经添加过了bootstrap-collapse.js特效
4）又是一个折叠效果，这里发现了一个问题，就是在点击原先的matrix效果的时候，点击标题和关闭标题都会出现一个过渡的效果，但是我现在这边就是会很僵硬的显示，隐藏没有过渡效果，后来查看才发现，原来这里面还用到了个脚本特效bootstrap-transition.js，而我现在却没有引用进来。
5）tab标签页特效。一看就知道需要引用bootstrap-tab.js脚本，里面把tab1
标签下面的线给隐藏掉是用line-height做的，以前没试过。
6）未读消息提示的特效。用到了两个脚本特效jquery.gritter.min.js与matrix.interface.js。我把gritter做了些修改，css文件就直接使用了matrix修正过的jquery.gritter.css，然后在jquery.gritter.js的源码中的81行中的Close Notification去除。
_tpl_close: '<a class="gritter-close" href="#" tabindex="1">Close Notification</a>',
_tpl_close: '<a class="gritter-close" href="#" tabindex="1"></a>',
demo下载：
posted on
