1.导航栏和工具栏的布局类型
在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。
Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。
- 静态布局
静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏 - 固定布局
在固定布局中，也是每个页面都有它自己的导航栏和工具栏，但是它们在屏幕上始终可见，不会随着页面内容滚动
与静态布局相比，固定布局的不同之处在于:
- 导航栏和工具栏是
Page的子元素(<div class="page">) - 每个页面拥有额外的“
navbar-fixed”类（对于固定导航栏）和“toolbar-fixed”类（对于固定工具栏）
注意，如果你想要对单视图中的每个页面使用固定布局，可以直接在父页面(<div class="pages">)上添加“navbar-fixed”和“toolbar-fixed”类，而不是对每个单页面分别添加。
- 穿透布局(
iOS only)
这是最有趣，最被广泛使用的布局 —— 在不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航（不要忘记在视图初始化的时候启用它)
与静态和固定布局相比，穿透布局的不同之处在于：
- 导航栏和工具栏是视图的子元素(
<div class="view">) - 具有穿透布局的导航栏和工具栏的视图拥有额外的“
navbar-through”类（对于穿透类型的导航栏）和"toolbar-through"类（对于穿透类型的工具栏) - 混合布局
对于不同的视图，你可以使用不同的布局，比如在一个视图中使用固定布局，在另一个中使用穿透布局。其实，你也可以在单视图中混合使用这些布局。例如，你可以使用穿透的导航栏和固定的工具栏。
无导航栏/工具栏
如果你不需要导航栏或工具栏，你大可不必包含它们，并且不用在page/pages/view中添加相应的类（“"navbar-fixed”，“navbar-through”，“toolbar-fixed”，“toolbar-through”）
2.导航栏
导航栏是一个固定区域 （在固定 和穿透布局类型中） 。它位于屏幕顶部，包含页面标题和导航元素。
导航栏包含3个部分：左、中、右。每个部分都可以包含任意的HTML内容，但推荐按照如下方式使用：
-
左部 用来放置
返回链接、图标以及单独的文字链接。 -
中部 用来显示
页面标题和标签链接（即按钮控制）。 - 右部 和左部一样。
3.导航栏布局
<div class="navbar">
<div class="navbar-inner">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
</div>
注意，导航栏的中心元素具有最低的宽度优先级，当屏幕不能放下全部3个元素时，中部会被截断。
4.含有链接的导航栏
-
要想在
左/右部添加链接，只需要添加<a>标签，以及额外的link类:<div class="right">
<a href="#" class="link">Right Link</a>
</div>
额外的 link 类并不是必须的，但是推荐使用，因为它添加了需要的链接尺寸，以及透明度特效。
- 多个链接
<div class="left">
<a href="#" class="link">Left 1</a>
<a href="#" class="link">Left 2</a>
</div>
含有图标和文本的链接
只有图标的链接
5.导航栏的相关方法
myApp.hideNavbar(navbar)
myApp.showNavbar(navbar)
view.hideNavbar() 隐藏该视图中的导航栏
view.showNavbar() 显示该视图中的导航栏
myApp.sizeNavbars(viewContainer) 调用这个方法会重新计算指定的View的导航栏的位置，比如:myApp.sizeNavbars('.view-main') iOS only
6.自动隐藏导航栏
在通过Ajax载入的页面上，当你不需要导航栏时，Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。
为了实现这一点，你要做的是添加"no-navbar"类到载入的页面中(<div class="page no-navbar">)，然后在那里放置一个空的导航栏：
7.工具栏
工具栏是位于屏幕底端的固定（在固定和穿透布局类型中）区域，它包含导航元素。
工具栏不包含任何其他部分，内部只含有普通文本。
默认情况下，所有的工具栏元素（链接）沿着工具栏等距分布 - 它们之间的距离相等。
导航栏的相关视图方法：
myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)
view.hideToolbar()
view.showToolbar()
Bottom Toolbar:
(android only)
8.带标签的工具栏
-
标签栏布局
标签栏和工具栏基本一致，但是它有额外的"tabbar"类：<div class="toolbar tabbar"> <div class="toolbar-inner"> <a href="#tab1" class="tab-link active"> <i class="icon demo-icon-1"></i> </a> <a href="#tab2" class="tab-link"> <i class="icon demo-icon-2"></i> </a> <a href="#tab3" class="tab-link"> <i class="icon demo-icon-3"></i> </a> <a href="#tab4" class="tab-link"> <i class="icon demo-icon-4"></i> </a> </div></div>
默认情况下，所有的工具栏元素（链接）沿着工具栏等距分布 - 它们之间的距离相等。
9.向图标添加角标
如果你需要向标签栏图标添加徽章，只需在图标内部放入<span class="badge">：
<a href="#tab2" class="tab-link">
<i class="icon demo-icon-2">
<span class="badge bg-red">
5
</span>
</i>
</a>
10.带有文案的标签栏
如果你需要使用带有文案的标签栏，需要在标签栏上再加一个"tabbar-labels"类，然后把<span class="tabbar-label">放到链接里：
带有文案的标签栏在不同设备上会有更大的高度而不是44px：在iPhone上是50px，在iPad上是55px
因为这些高度的改变，你需要在固定和穿透布局中使用 "tabbar-labels-fixed"或者 "tabbar-labels-through"。
11.相关的App方法
myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)
12.自动隐藏工具栏/导航栏
Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。
你唯一需要做的就是在需要加载的页面上加一个类 "no-tabbar"(<div class="page no-tabbar">)
13.状态栏：
状态栏遮罩：
iOS 7+允许创建全屏应用，但是当状态栏覆盖你的应用时，会有navbar缩短20px的问题。
Framework7可以自动检测你的应用是否是全屏模式，如果是的话，自动添加"with-statusbar-overlay"类到<html>
（如果不是的话，移除这个类）。通过"with-statusbar-overlay"类（应用处于全屏模式的时候），<html>
在顶部拥有额外的padding，把整个应用的内容下移状态栏的高度（20px）。
为了配合上面的功能，我们需要在<body>
内添加<div class="statusbar-overlay">
：
<body>
<div class="statusbar-overlay">
</div>
这个"statusbar-overlay"div总是固定在屏幕顶端，默认隐藏。当应用处于全屏模式，并且html
含有"with-statusbar-overlay"类时，它可见。
为了使我们的状态栏背景变成粉色，我们只需要添加一个CSS规则：
.statusbar-overlay { background: pink;}
这种逻辑允许对状态栏背景自由地控制，我们可以动态改变它的背景。
比如，我们有暗色的带有覆盖效果的左侧边栏。当侧边栏打开时，我们可以让状态栏背景更暗：
/* Default Status bar background */.statusbar-overlay { background: pink; /* We can add transition for smooth color animation */ -webkit-transition: 400ms; transition: 400ms;} /* Change Status bar background when panel opened */body.with-panel-left-cover .statusbar-overlay { background: #222;}
注意：
- 在大屏幕网络应用上，状态栏文本颜色总是白色的，没有必要改变它。
- 在
PhoneGap应用中，默认情况下，应用状态栏文本颜色总是黑色的。在Framework7中，它不能被改变，但可以通过PhoneGap插件定制，如cordova-plugin-statusbar。
14.侧边栏
让我们看看如何添加侧栏。我们的APP可能包含两种侧栏,一个在左边,另一个在右边。我们应该在body的开始处添加侧栏的html body:
