代碼：

<div class='container-fluid'><h2 class='page-header'>導(dǎo)航</h2><!--
　　　　.navrbar navbar-fixed-top:導(dǎo)航固定顯示在頂部，對應(yīng)的navbar-fixed-bottom:導(dǎo)航固定顯示在頁面底部
　　　　.brand:提示文字或者主題
　　　　.active:激活選中
　　　　.navbar-search:導(dǎo)航搜索
　　　　搜索表單： 　　　　　　　　　<form class='navbar-search'><input type='text' placeholder='輸入搜索內(nèi)容' class='search-query' /></form>
　　　　.nav pull-right:在導(dǎo)航右邊 　　　　.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='輸入搜索內(nèi)容' 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><!--這行代碼用來演示高度的變化不會改變導(dǎo)航的位置--> <div style='height:1800px'></div> <!--這行代碼用來演示高度的變化不會改變導(dǎo)航的位置-->

說明:

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

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

導(dǎo)航菜單的響應(yīng)式設(shè)計(jì)

代碼如下

?

<div class='navbar navbar-fixed-top'><div class='navbar-inner'><div class='container'><!--①給這個導(dǎo)航菜單添加一個按鈕，當(dāng)瀏覽器窗口小于某個值時(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:表示當(dāng)瀏覽器窗口小于某個值時（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='輸入搜索內(nèi)容' 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>

?

如圖：

完成了響應(yīng)式的布局

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

導(dǎo)航菜單中的下拉列表

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

代碼：

<div class='container-fluid'><h2 class='page-header'>導(dǎo)航</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='#'>網(wǎng)球公開賽</a></li></ul></li></ul><form class='navbar-search'><input type='text' placeholder='輸入搜索內(nèi)容' 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>

如圖：

?

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/Zell-Dinch/p/3887803.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。