今天把基本的框架搭建起来了，其实完全是抄袭啊有木有……
在一些 JS 特效上卡了很久，发现自己在这方面真的很弱。
框架里加的东西越来越多了，JQuery 的基础上加了一个 JQueryUI，实现 toggleClass 特效。就这么几行，我居然研究了 3 个小时：
<a href="#">
<div class="col-sm-2" id="menu-toggle">
<i class="fa fa-angle-double-right"></i> Menu
</div>
</a>
<script>
$("#menu-toggle").click(function() {
$('#sidebar').toggleClass('toggle_sidebar', 300,'linear');
$('#mainframe').toggleClass('toggle_mainframe', 300,'linear');
})
</script>
Bootstrap 自带的 collapse 特效用起来也挺麻烦的，研究了一个多小时：
<ul class="menu layer1">
<a role="button" data-toggle="collapse" href="#section1" aria-expanded="true">
<li id="menu1" class="layer1-title">
Section 1
<i class="fa fa-angle-down pull-right"></i>
</li>
</a>
<div id="section1" class="collapse in">
<ul class="layer2 list-group">
<li><i class="fa fa-circle-o"></i><a>Chapter 1</a></li>
<li><i class="fa fa-circle-o"></i><a>Chapter 2</a></li>
</ul>
</div>
</ul>
诀窍就在于，aria-expanded=”true” 时，二级菜单要加上 class=”collapse in”。
最后在右上角加了个时钟，原理就是每 1000 毫秒获取一次最新时间，这货肯定有误差，不过在毫秒级也就无所谓了，另外就是不确定能不能适应 local 时间，可能还不行，以后再纠结。