导航栏

为导航栏定义不同风格的样式。

用法

导航栏组件包括导航栏本身及一个或多个导航菜单。

示例

代码

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="active"><a href="">激活</a></li>
        <li><a href="">条目</a></li>
        ...
    </ul>
</nav>

两端对齐

示例

代码

<nav class="navbar">
    <ul class="navbar-nav subnav-justify">
        <li class="active"><a href="">激活</a></li>
        <li><a href="">条目</a></li>
        ...
    </ul>
</nav>

导航栏翻转

添加 navbar-flip 类到一个 <div> 元素中，将其进行分组并将导航项对齐到导航栏右侧。

示例

代码

<nav class="navbar">
    <ul class="navbar-nav"> 
        ...
    </ul>
    <div class="navbar-flip">
        <ul class="navbar-nav">
            ...
        </ul>
    </div>
</nav>

导航栏副标题

为列表项中的 <a> 元素添加 navbar-nav-subtitle 类来表示一个副标题。使用 <div> 元素作为副标题本身。

示例

代码

<nav class="navbar">
    <ul class="navbar-nav">
        <li class="active">
            <a class="navbar-nav-subtitle" href="">
                激活
                <div>副标题</div>
            </a>
        </li>
        ...
    </ul>
</nav>

导航栏内容

你还可以在导航栏中添加自定义的内容，如文本、图标、按钮、表单，甚至是一个触发器。默认情况下，拨动器并没有附属 JavaScript。举例来说，可以为导航栏添加一个抽屉组件。

示例

代码

<nav class="navbar">
    <a href="" class="navbar-brand">...</a>
    <ul class="navbar-nav">...</ul>
    <div class="navbar-content">...</div>
    <div class="navbar-content navbar-center">...</div>
    <a href="" class="navbar-icon"><i class="icon-zoom"></a></i>
</nav>

响应式可见性

要隐藏或显示导航栏中的某些项目，只需添加 布局工具组件 中的响应式可见性类。

示例

代码

<nav class="navbar">
    <ul class="navbar-nav hide-sm">...</ul>
    <a href="#my-id" class="navbar-icon show-sm" data-offcanvas></a>
</nav>

<div id="my-id" class="offcanvas">
    ...
</div>

附着式的导航栏

添加 navbar-attached 类来优化附到视图顶部的导航栏样式。比如移除圆角，顶部及左右的边框。

示例

代码

<nav class="navbar navbar-attached">...</nav>

带有下拉菜单的导航栏

导航栏可以包含 下拉菜单组件 中的下拉菜单。只需添加 dropdown-navbar 修饰类到下拉菜单中，它可以完美的融入到导航栏的样式中。

示例

代码

<nav class="navbar">
    <ul class="navbar-nav">
        ...
        <li class="nav-parent" data-dropdown>
            <a href="">父级菜单 <i class="icon-caret-down"></i></a>
            <div class="dropdown dropdown-navbar">
                <ul class="nav nav-navbar"> 
                    ...
                </ul>
            </div>
        </li>
        ...
    </ul>
    ...
</nav>