4. 導覽列 Navigation

一般的導覽列

<nav>
  <ul>
    <li><a href="#">連結1</a></li>
    <li><a href="#">連結2</a></li>
  </ul>
</nav>

水平導覽列（依據格線，會塞滿能用空間）

要加上<nav>
<ul>要加上class="row"
<li>要上每個選項要用掉幾分之幾

<nav class="small-tablet">
  <ul class="row">
    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
    <li class="menu one small-tablet fourth"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
      <ul style="display: none;">
        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
      </ul>
    </li>
    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
    <li class="one small-tablet fourth"><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
  </ul>
</nav>

水平導覽列（行內，工具列多大就多大）

要加上<nav>並加上class="inline"
<ul>不需要class="row"
<li>不需要加class，除非有子選單才需要class="menu"

<nav class="inline">
  <ul>
    <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
    <li<class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
      <ul style="display: none;">
        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
      </ul>
    </li>
    <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
    <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
  </ul>
</nav>

垂直導覽列

要加上<nav>
<ul>要指定佔幾分之幾
<li>不需要加class，除非有子選單才需要class="menu"

<nav class="small-tablet">
  <ul class="one small-tablet fourth">
    <li><a href="#nowhere" title="連結 1 的提示">連結 1</a></li>
    <li class="menu"><a href="#nowhere" title="連結 2 的提示">連結 2</a>
      <ul style="display: none;">
        <li><a href="#nowhere" title="子連結 1 的提示">子連結 1</a></li>
        <li><a href="#nowhere" title="子連結 2 的提示">子連結 2</a></li>
        <li><a href="#nowhere" title="子連結 3 的提示">子連結 3</a></li>
        <li><a href="#nowhere" title="子連結 4 的提示">子連結 4</a></li>
      </ul>
    </li>
    <li><a href="#nowhere" title="連結 3 的提示">連結 3</a></li>
    <li><a href="#nowhere" title="連結 4 的提示">連結 4</a></li>
  </ul>
</nav>

分頁

要加上<nav>並加上class="pagination"
<ul>不需要class="row"
每一個按鈕的結構都是用<li>包住<a>，所有頁的按鈕要一次全部列出
上一頁的按鈕：<li>加上 class="prev"
上一頁的按鈕：<li>加上 class="next"
第一頁的按鈕：<li>加上 class="first"
最後頁的按鈕：<li>加上 class="last"
要顯示的按鈕：<li>加上 style="display: inline-block;"
不顯示的按鈕：<li>加上 style="display: none;"
當前頁面按鈕：<li>加上 class="active"

<nav class="pagination">
  <ul>
    <li class="prev">
      <a href="#">«</a>
    </li>
    <li style="display: none;" class="first">
      <a href="#">1</a>
    </li>
    <li style="display: none;">
      <a href="#">2</a>
    </li>
    <li style="display: none;">
      <a href="#">3</a>
    </li>
    <li style="display: none;">
      <a href="#">4</a>
    </li>
    <li style="display: none;">
      <a href="#">5</a>
    </li>
    <li style="display: none;">
      <a href="#">6</a>
    </li>
    <li style="display: none;">
      <a href="#">7</a>
    </li>
    <li style="display: none;">
      <a href="#">8</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">9</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">10</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">11</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">12</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">13</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">14</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">15</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">16</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">17</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">18</a>
    </li>
    <li class="active">
      <a href="#">19</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">20</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">21</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">22</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">23</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">24</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">25</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">26</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">27</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">28</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">29</a>
    </li>
    <li style="display: inline-block;">
      <a href="#">30</a>
    </li>
    <li style="display: none;">
      <a href="#">31</a>
    </li>
    <li style="display: none;">
      <a href="#">32</a>
    </li>
    <li style="display: none;">
      <a href="#">33</a>
    </li>
    <li style="display: none;">
      <a href="#">34</a>
    </li>
    <li style="display: none;">
      <a href="#">35</a>
    </li>
    <li style="display: none;">
      <a href="#">36</a>
    </li>
    <li style="display: none;">
      <a href="#">37</a>
    </li>
    <li style="display: none;">
      <a href="#">38</a>
    </li>
    <li style="display: none;" class="last">
      <a href="#">39</a>
    </li>
    <li class="next">
      <a href="#">»</a>
    </li>
  </ul>
</nav>

3. 按鈕 Buttons