一：導航欄的布局

導航欄按“左 中 右”用三個div進行布局，中部寬度優先級最低，兩邊內容較多時會把中部用 ... 縮起來。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</
 
div>

二：導航欄的鏈接

通常，我們在導航欄的 左、右 會設置跳轉，跳轉的實現一般通過超鏈接，因此要實現導航欄控制跳轉，只需在div中包含 <a>標簽即可。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">左邊跳轉</a>
        </div>
        <div class="center"
 
>中部標題</div>
        <div class="right">
            <a href="#" class="link">右邊跳轉</a>
        </div>
    </div>
</div>   

三：多個鏈接

多個鏈接，只需在div中包含多個<a>標簽即可。

四：圖標+文字 的鏈接

只需在<a>標簽中：用 <i> 子標簽包含圖標，用<span>子標簽包含文字。

<div class="navbar"
 
>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">
                <i class="icon 圖標類名"></i>
                <span>文字</span>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon 圖標類名"></i>
                <span>文字</span>
            </a>
        </div>
    </div>
</div>

五：只含圖標的鏈接

需要對<a>標簽添加 icon-only 類，該類為圖標設定了一個固定大小區域，以便用戶點擊。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon 圖標類名"></i>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon 圖標類名"></i>
            </a>
        </div>
    </div>
</div>    

六：自動隱藏導航欄

在使用穿透布局類型時，view中的導航欄會自動穿透到頁面中。

如果跳轉到的頁面不需要導航欄，就需要對導航欄進行自動隱藏：在頁面文件中定義空導航欄；頁面元素中增加 no-navbar類。

<!-- 1:定義一個空的導航欄 -->
<div class="navbar">
  <div class="navbar-inner">
  </div>
</div>          
 
<!-- 2:在頁面元素添加 no-navbar類  -->
<div data-page="about" class="page no-navbar">
  <div class="page-content">
    <div class="content-block">
      <p>頁面內容...</p>
      ...
    </div>
  </div>
</div>

Framework7學習筆記之 導航欄