博客默认的导航栏在移动设备上的显示各种难看,一直是一个心病。今天抽时间修复了一下,在移动设备上显示也非常优雅了。
MEAN.io的导航栏用的就是Bootstrap的navbar,它本身能很好的兼容移动设备,这里有一个例子。可见是mean.io没有用好。参照前面的例子,下面来进行修改。
导航栏的代码在packages/system/public/views/header.html
里面。需要修改如下:
<div class="container-fluid" data-ng-controller="HeaderController">
<div class="navbar-header">
<!-- 收起来时的toggle button,注意data-target的值要和后面的对应 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-navbar-collapse-1">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home" mean-token="'site-title'">Title</a>
</div>
<!-- 这里是可以收起来的内容,注意这里的id要和前面的data-target对应 -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
...
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
这里基本上就完成了。在移动设备上,NavBar能够优雅的折叠起来,但是竟然打不开。Google了一下,发现答案原来是没有引入bootstrap.js。引入后,能够正常的运行了。
导航标签为了更好看,我这里都改为glyphicon。在menu item中家一个新的字段icon
:
Articles.menus.add({
'title': 'Articles',
'link': 'all articles',
'icon': 'list' //
});
Articles.menus.add({
'roles': ['authenticated'],
'title': 'Create New Article',
'link': 'create article',
'icon': 'plus'
});
在header.html
做如如下修改:
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
改为
<a mean-token="item.link" ui-sref='{{item.link}}'><i class="glyphicon glyphicon-{{item.icon}}"></i></a>
大功告成,把以前NavBar中的文字链接,都改为好看的icon了。