导航元素

以一个带有.nav的无序列表开始。

• 标签式导航 .nav-tabs

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">JAVA</a></li>
</ul>

• 胶囊式导航 .nav-pills

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

• 垂直胶囊式导航 .nav-pills 的同时使用.nav-stacked

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

• 两端对齐的导航 .nav-pills(或.nav-tabs) 的同时使用.nav-justified

<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

• 带有下拉菜单的标签式导航

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

data-toggle="dropdown" 用于点击"Java"后弹出下拉菜单。
class="caret" 用于设置"Java"旁边的下拉箭头。
class="dropdown-menu" 用于将无序列表及其默认的圆点隐藏。
class="divider" 用于设置下划线。
详情见此链接

• 带有下拉菜单的胶囊式导航

步骤与带有下拉菜单的标签式导航是一样的，只要将.nav-tabs改为nav-pills即可。

导航栏

导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。
导航栏包括了站点名称和基本的导航定义样式。
导航栏以一个带有.navbar的<nav> 标签开始。

• 默认的导航栏

step1.用<nav class="navbar navbar-default navbar-fixed-top">承载整个导航栏；
step2.<div class="navbar-brand">承载大标题（也可以用a链接承载）；
step3.<div class="collapse navbar-collapse">承载小标签；
step4.<ul class="nav navbar-nav">

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">ProjectName</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Con</a></li>
        </ul>
    </div>
</nav>

role="navigation" 和 class="navbar-header" 都是用于语义化，增加可访问性；
class="navbar-brand" 增大字体；

不设置class="navbar-nav" 的情况： 没有.navbar-nav.png

；

不设置class="nav" 的情况： 没有.nav.png

；

• 响应式导航栏：

汉堡按钮

<nav class="navbar navbar-default">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">导航菜单</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</nav>

要折叠的内容(此处为无序列表)必须包裹在带有 class ="collapse navbar-collapse" 的 <div> 中。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

• data-toggle="collapse" 设置在想要展开或折叠的组件的a链接上。设置后，点击汉堡按钮就可以下拉已折叠的菜单。
• data-target="#example-navbar-collapse" 与要折叠的菜单元素的id搭配使用。
• class="icon-bar" 设置汉堡线条。
• 汉堡按钮:class="sr-only" 仅供屏幕阅读器，设置后会隐藏"切换导航"字样。 汉堡按钮.png

• 导航栏中的表单

导航栏中的表单是使用 .navbar-form建立的，这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。

step1、创建一个导航栏<nav>,将导航栏中的所有内容都包裹在nav标签中,包括表单；
step2、创建表单<form class="navbar-form navbar-left">。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
    </div>
</nav>