<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
        <a class="navbar-brand" href="#">菜鸟教程</a> 
    </div> 
    <div> 
        <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>

 <div class="navbar-header"> 
    <a class="navbar-brand" href="#">菜鸟教程</a> 
</div> 

这段代码中，向 第三行<div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的<a>元素。这会让文本看起来更大一号。后面这一段是常规的导航条

如果你需要做响应式的导航条，比如这样

<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>

第三行代码开始

<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> 

这一段中除了标记标题， button相当于图二右上角的按钮 span是按钮的横线，当分辨率率足够低的时候,图一那些选项都会进入button中

依据 http://www.runoob.com/bootstr... 整理