預設的導航欄
建立一個預設的導航欄的步驟如下：

向 <nav> 標籤新增 class .navbar、.navbar-default。
向上面的元素新增 role="navigation"，有助於增加可訪問性。
向 <div> 元素新增一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文字看起來更大一號。
為了嚮導航欄新增連結，只需要簡單地新增帶有 class .nav、.navbar-nav 的無序列表即可。
<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>
響應式的導航欄
為了給導航欄新增響應式特性，您要摺疊的內容必須包裹在帶有 class .collapse、.navbar-collapse 的 <div> 中。
摺疊起來的導航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，
用於告訴 JavaScript 需要對按鈕做什麼，第二個是 data-target，指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 
建立所謂的漢堡按鈕。這些會切換為 .nav-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>
導航欄中的表單
導航欄中的表單不是使用 Bootstrap 表單 章節中所講到的預設的 class，它是使用 .navbar-form class。這確保了表單適當的垂直對齊和在較窄的視口中摺疊的行為。使用對齊方式選項（這將在元件對齊方式部分進行詳細講解）來決定導航欄中的內容放置在哪裡。
為了實現以上這些功能，您必須包含 Bootstrap 摺疊（Collapse）外掛。
<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>
導航欄中的按鈕
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素新增按鈕，按鈕在導航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

不要在 .navbar-nav 內的 <a> 元素上使用 .navbar-btn，因為它不是標準的 button class。
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <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>
        <button type="button" class="btn btn-default navbar-btn">
            導航欄按鈕
        </button>
    </div>
    </div>
</nav>
導航欄中的文字
如果需要在導航中包含文字字串，請使用 class .navbar-text。這通常與 <p> 標籤一起使用，確保適當的前導和顏色。下面的例項演示了這點
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <p class="navbar-text">Runoob 使用者登入</p>
    </div>
    </div>
</nav>
結合圖示的導航連結
如果您想在常規的導航欄導航元件內使用圖示，那麼請使用 class glyphicon glyphicon-* 來設定圖示，更多請檢視 Bootstrap 圖示 ，如下面的例項所示：
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">菜鳥教程</a> 
        </div> 
        <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 註冊</a></li> 
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登入</a></li> 
        </ul> 
    </div> 
</nav>
元件對齊方式
您可以使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航連結、表單、按鈕或文字 這些元件。這兩個 class 都會在指定的方向上新增 CSS 浮動。下面的例項演示了這點：
<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 navbar-left">
            <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>
        <form class="navbar-form navbar-left" role="search">
            <button type="submit" class="btn btn-default">
                向左對齊-提交按鈕
            </button>
        </form>
        <p class="navbar-text navbar-left">向左對齊-文字</p>
        <!--向右對齊-->
        <ul class="nav navbar-nav navbar-right">
            <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>
        <form class="navbar-form navbar-right" role="search">
            <button type="submit" class="btn btn-default">
                向右對齊-提交按鈕
            </button>
        </form>
        <p class="navbar-text navbar-right">向右對齊-文字</p>
    </div>
    </div>
</nav>
固定到頂部
Bootstrap 導航欄可以動態定位。預設情況下，它是塊級元素，它是基於在 HTML 中放置的位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為隨著頁面一起滾動的靜態導航欄。

如果您想要讓導航欄固定在頁面的頂部，請向 .navbar class 新增 class .navbar-fixed-top。下面的例項演示了這點：
<nav class="navbar navbar-default navbar-fixed-top" 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>
固定到底部
如果您想要讓導航欄固定在頁面的底部，請向 .navbar class 新增 class .navbar-fixed-bottom。下面的例項演示了這點：
<nav class="navbar navbar-default navbar-fixed-bottom" 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>
靜態的頂部
如需建立能隨著頁面一起滾動的導航欄，請新增 .navbar-static-top class。該 class 不要求向 <body> 新增內邊距（padding）。
<nav class="navbar navbar-default navbar-static-top" 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>
反色的導航欄
為了建立一個帶有黑色背景白色文字的反色的導航欄，只需要簡單地向 .navbar class 新增 .navbar-inverse class 即可，如下面的例項所示：

為了防止導航欄與頁面主體中的其他內容的頂部相交錯，請向 <body> 標籤新增至少 50 畫素的內邊距（padding），內邊距的值可以根據您的需要進行設定。
<nav class="navbar navbar-inverse" 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>