代碼：

<div class='container-fluid'><h2 class='page-header'>導航</h2><!--
　　　　.navrbar navbar-fixed-top:導航固定顯示在頂部，對應的navbar-fixed-bottom:導航固定顯示在頁面底部
　　　　.brand:提示文字或者主題
　　　　.active:激活選中
　　　　.navbar-search:導航搜索
　　　　搜索表單： 　　　　　　　　　<form class='navbar-search'><input type='text' placeholder='輸入搜索內容' class='search-query' /></form>
　　　　.nav pull-right:在導航右邊 　　　　.nav pull-right：顯示一個分割線 　　 --><div class='navbar navbar-fixed-top'><div class='navbar-inner'><div class='container'><a class='brand' href='#'>Bootstrap</a><ul class='nav'><li class='active'><a href='javascript:;'>首頁</a></li><li><a href='javascript:;'>新聞</a></li><li><a href='javascript:;'>軍事</a></li><li><a href='javascript:;'>體育</a></li></ul><form class='navbar-search'><input type='text' placeholder='輸入搜索內容' class='search-query' /></form><ul class='nav pull-right'><li><a href='javascript:;'>登錄</a></li><li class='divider-vertical'></li><li><a href='javascript:;'>注冊</a></li></ul></div></div></div> </div><!--這行代碼用來演示高度的變化不會改變導航的位置--> <div style='height:1800px'></div> <!--這行代碼用來演示高度的變化不會改變導航的位置-->

說明:

.navrbar navbar-fixed-top:導航固定顯示在頂部，對應的navbar-fixed-bottom:導航固定顯示在頁面底部
.brand:提示文字或者主題
.active:激活選中
.navbar-search:導航搜索
搜索表單： 　　　　　　　　　<form class='navbar-search'><input type='text' placeholder='輸入搜索內容' class='search-query' /></form>
.nav pull-right:在導航右邊 .nav pull-right：顯示一個分割線
如圖：

?-----------------------------------------------------------------------------------------------------------------------------------------------------

導航菜單的響應式設計

代碼如下

?

<div class='navbar navbar-fixed-top'><div class='navbar-inner'><div class='container'><!--①給這個導航菜單添加一個按鈕，當瀏覽器窗口小于某個值時(940px)按鈕自動代替.nav-collapse類包圍的元素顯示出來②按鈕中要添加2個屬性 1、data-toggle='collapse' data-target='.nav-collapse'(指向這個類名) ③三組 <span class='icon-bar'></span> 組成一個三道杠的按鈕--><a href='javascript:;' class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></a><a class='brand' href='#'>Bootstrap</a><!--.nav-collapse:表示當瀏覽器窗口小于某個值時（940px），被這個類包圍的元素會隱藏起來--><div class='nav-collapse'><ul class='nav'><li class='active'><a href='javascript:;'>首頁</a></li><li><a href='javascript:;'>新聞</a></li><li><a href='javascript:;'>軍事</a></li><li><a href='javascript:;'>體育</a></li></ul><form class='navbar-search'><input type='text' placeholder='輸入搜索內容' class='search-query input-medium' /></form><ul class='nav pull-right'><li><a href='javascript:;'>登錄</a></li><li class='divider-vertical'></li><li><a href='javascript:;'>注冊</a></li></ul></div></div></div> </div>

?

如圖：

完成了響應式的布局

?-----------------------------------------------------------------------------------------------------------------------------------------------------

導航菜單中的下拉列表

我們給上面制作的導航條中的“體育”欄目增加下拉列表

代碼：

<div class='container-fluid'><h2 class='page-header'>導航</h2><div class='navbar navbar-fixed-top'><div class='navbar-inner'><div class='container'><a href='javascript:;' class='btn btn-navbar' data-toggle='collapse' data-target='.nav-collapse'><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></a><a class='brand' href='#'>Bootstrap</a><div class='nav-collapse'><ul class='nav'><li class='active'><a href='javascript:;'>首頁</a></li><li><a href='javascript:;'>新聞</a></li><li><a href='javascript:;'>軍事</a></li><li class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='javascript:;'>體育 <span class='caret'></span></a><ul class='dropdown-menu'><li><a href='#'>足球賽事</a></li><li><a href='#'>NBA</a></li><li><a href='#'>網球公開賽</a></li></ul></li></ul><form class='navbar-search'><input type='text' placeholder='輸入搜索內容' class='search-query input-medium' /></form><ul class='nav pull-right'><li><a href='javascript:;'>登錄</a></li><li class='divider-vertical'></li><li><a href='javascript:;'>注冊</a></li></ul></div></div></div></div> </div>

如圖：

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/Zell-Dinch/p/3887803.html

總結

以上是生活随笔為你收集整理的Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。