一：工具栏布局
工具栏布局十分简单：所有工具栏元素（链接）沿着工具栏等距分布。
<div class="toolbar"> <div class="toolbar-inner"> <a href="#" class="link">导航元素 1</a> <a href="#" class="link">导航元素 2</a> <a href="#" class="link">导航元素 3</a> ...... </div> </div>
二：自动隐藏工具栏
在穿透布局类型中，view定义的工具栏会穿透到页面内。
如果页面中不需要工具栏，则可以：在page中通过 no-toolbar 类来隐藏工具栏；定义一个空的工具栏元素。
1）为page添加 no-toolbar
<div data-page="about" class="page no-toolbar"> <div class="page-content"> <div class="content-block"> ... </div> </div> </div>
2）在文件底部定义一个空的工具栏
<div class="toolbar"> <div class="toolbar-inner"> </div> </div>
三：带图标的工具栏(标签栏)
我们可以为工具栏增加一个tabbar类，转变为标签栏。标签栏可以使用图标作为导航元素，更加生动。
1:定义标签栏
<div class="toolbar tabbar"> //增加tabbar类 <div class="toolbar-inner"> <a href="#tab1" class="tab-link active"> <i class="icon 图标"></i> //包含图标作为导航元素 </a> <a href="#tab2" class="tab-link"> <i class="icon 图标"></i> </a> <a href="#tab3" class="tab-link"> <i class="icon 图标"></i> </a> </div> </div>
2:为图标添加角标（类似于 消息数量提示 的效果）
<a href="#tab2" class="tab-link"> <i class="icon 图标"> <span class="badge bg-red">角标内容</span> </i> </a>
3:图标+文字 的标签栏
<a href="#tab1" class="tab-link active">//一个导航元素 <i class="icon 图标"></I> //导航元素的图标 <span class="tabbar-label">文字</span> //导航元素的文字 </a>
四：滑动时隐藏工具栏
如果你只想在某些特定页面打开滑动隐藏的功能，你可以通过添加额外的 <div class="page-content"> 类来实现：
-
hide-bars-on-scroll- 页面滚动时自动隐藏工具栏和导航栏 -
hide-navbar-on-scroll- 页面滚动时自动隐藏导航栏 -
hide-toolbar-on-scroll- 页面滚动时，自动隐藏工具栏 -
hide-tabbar-on-scroll- 页面滚动时，自动隐藏带图标的工具栏（tabbar)
可以通过添加以下的样式禁用滚动隐藏工具栏
-
keep-bars-on-scroll- 页面滚动时不隐藏工具栏和导航栏 -
keep-navbar-on-scroll- 页面滚动时不隐藏导航栏 -
keep-toolbar-on-scroll- 页面滚动时不隐藏工具栏 -
keep-tabbar-on-scroll- 页面滚动时不隐藏带图标的工具栏（tabbar)
五：特别属性
1:Material Design风格工具栏
<div class="toolbar toolbar-bottom-md"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> <a href="#" class="link">Link 3</a> </div> </div>
2:Material Design风格的可滚动标签栏条（很多歌导航元素，需要使用滚动来选择）
<div class="toolbar tabbar tabbar-scrollable">
3:隐藏ios工具栏的边框效果
<div class="toolbar no-hairline">...</div>
4:隐藏Material Design工具栏的阴影效果
<div class="toolbar no-shadow">...</div>
