Navs

預設樣式

Nav 的每個元件都以 .nav-開頭。
使用方式:在 <ul> 加上 .nav,每個項目都以 <li> 加上 .nav-item,而 <a> 則需要加上 .nav-link

<ul class="nav">
    <li class="nav-item"><a class="nav-link">首頁</a></li>
    <li class="nav-item"><a class="nav-link">關於</a></li>
    <li class="nav-item"><a class="nav-link">產品</a></li>
    <li class="nav-item"><a class="nav-link">聯絡我們</a></li>
</ul>

狀態顯示

每個 .nav-item 都能夠加上作用中的 .active 以及 禁用的 .disabled

<ul class="nav">
    <li class="nav-item active"><a class="nav-link">首頁</a></li>
    <li class="nav-item"><a class="nav-link">關於</a></li>
    <li class="nav-item"><a class="nav-link">產品</a></li>
    <li class="nav-item disabled"><a class="nav-link">聯絡我們</a></li>
</ul>

側邊導覽

<ul class="nav"> 增加 .nav-side

<ul class="nav nav-side">
    ~略~
</ul>

Pills

<ul class="nav"> 增加 .nav-pill

<ul class="nav nav-pill">
    ~略~
</ul>

Navs 與 Drops

在 Navs 裡可以隨時加上 Drops 組件,並且不需要額外設定,可以使用在 Navs 的任何樣式上。

<ul class="nav nav-pill">
    <li class="nav-item active"><a class="nav-link">首頁</a></li>
    <li class="nav-item"><a class="nav-link">關於</a></li>
    <li class="nav-item drop drop-hover">
        <a class="nav-link ">產品 <span class="caret"></span></a>
        <ul class="drop-box menu">
            <li class="menu-item"><a class="menu-link">項目1</a></li>
            <li class="menu-item"><a class="menu-link">項目2</a></li>
        </ul>
    </li>
    <li class="nav-item disabled"><a class="nav-link">聯絡我們</a></li>
</ul>