导航栏
为导航栏定义不同风格的样式。
用法
导航栏组件包括导航栏本身及一个或多个导航菜单。
示例
代码
<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。举例来说,可以为导航栏添加一个抽屉组件。
类 | 描述 |
---|---|
navbar-content |
添加这个类到 <div> 元素中,使它作为一个自定义内容的容器。内容将被垂直居中。 |
navbar-brand |
添加这个类到一个 <a> 或 <div> 元素中,来表示你的品牌。 |
navbar-center |
添加这个类来居中你的导航栏内容或品牌。该元素必须为导航栏的最后一个子元素。 |
navbar-icon |
添加这个类到一个 <a> 或 <div> 元素中,创建一个作为菜单图标。 |
示例
代码
<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>