Navbars

Navbar 的每個元件都以 .navbar-開頭。Navbar 內含多個元件,包含 .navbar-header 用來放置圖示或標誌,以及選單列的 .navbar-nav,選單列也能搭配 Drops

預設樣式

以下是 Navbar 的基本結構,其中 <a class="navbar-toggle"> 只會在螢幕寬度小於 768px 時才會顯示。Navbar 大多數的元件都會放置於 .navbar-content 當中,例如:Navbar 的選單列 .navbar-nav

<div class="navbar">
    <div class="navbar-header">
        <a class="navbar-toggle"></a>
        <a class="navbar-brand">Brand</a>
    </div>
    <div class="navbar-content">
        <ul class="navbar-nav">
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
        </ul>
    </div>
</div>

如果你想讓 .navbar-toggle 或是 .navbar-nav 靠右的話,只要在這兩個地方加上 .right 即可。

<div class="navbar">
    <div class="navbar-header">
        <a class="navbar-toggle right"></a>
        <a class="navbar-brand">Brand</a>
    </div>
    <div class="navbar-content">
        <ul class="navbar-nav right">
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
        </ul>
    </div>
</div>

Navbar 上的選單一樣可以設置 作用中的 .active 以及 禁用的 .disabled

<div class="navbar">
    <div class="navbar-header">
        <a class="navbar-toggle right"></a>
        <a class="navbar-brand">Brand</a>
    </div>
    <div class="navbar-content">
        <ul class="navbar-nav right">
            <li class="navbar-nav-item active">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item disabled">
                <a class="navbar-nav-link">選單</a>
            </li>
        </ul>
    </div>
</div>

Navbar 與 Drops

使用 Drops 時,只需要在 .navbar-nav-item 加上 Drops 相關元件即可。

<div class="navbar">
    <div class="navbar-header">
        <a class="navbar-toggle right"></a>
        <a class="navbar-brand">Brand</a>
    </div>
    <div class="navbar-content">
        <ul class="navbar-nav right">
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item">
                <a class="navbar-nav-link">選單</a>
            </li>
            <li class="navbar-nav-item drop drop-hover">
                <a class="navbar-nav-link drop-btn">選單 <span class="caret"></span></a>
                <ul class="drop-box drop-down-right 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>
        </ul>
    </div>
</div>

Navbars 與 Container

當你要將 Navbar 設定為網頁最上方的導覽列時,如果你需要設定寬度,可以將 .containet 置入於 .navbar,將原本 .navbar 裡的元件放置於 .container 內。

<div class="navbar">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-toggle right"></a>
            <a class="navbar-brand">Brand</a>
        </div>
        <div class="navbar-content">
            <ul class="navbar-nav right">
                <li class="navbar-nav-item">
                    <a class="navbar-nav-link">選單</a>
                </li>
                <li class="navbar-nav-item">
                    <a class="navbar-nav-link">選單</a>
                </li>
                <li class="navbar-nav-item drop drop-hover">
                    <a class="navbar-nav-link drop-btn">選單 <span class="caret"></span></a>
                    <ul class="drop-box drop-down-right 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>
            </ul>
        </div>
    </div>
</div>