制作導航（基礎樣式）需要如下幾部：
第一步：首先在制作導航的列表(<ul class=”nav nav-tabs”> 當然nav-tabs是用來控制樣式的我們可以選擇比如nav-pills)
第二步：在列表里面添加自己的鏈接
<ul class="nav nav-tabs"><li><a href="index.html" class="active">Home</a></li><li><a href="about.html" data-hover="About"> About</a></li> <li><a href="news.html" data-hover="News">News</a></li><li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li><li><a href="codes.html" data-hover="Codes">Codes</a></li> <li><a href="contact.html" data-hover="Contact">Contact</a></li></ul>
然后我們就可以看到類似下面的效果了：
我們現在升級，制作一個基礎導航條，主要分以下幾步：
第一步：首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“navbar-nav”，與前面不一樣的是現在我們不在ul里添加nav-tabs或nav-pills之類的樣式類了。
第二步：在列表外部添加一個容器（div），并且使用類名“navbar”和“navbar-default”
第三步：在列表里面添加自己的鏈接
<div class="navbar navbar-default" role="navigation"><ul class="nav navbar-nav"><li><a href="index.html" class="active">Home</a></li><li><a href="about.html" data-hover="About"> About</a></li> <li><a href="news.html" data-hover="News">News</a></li><li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li><li><a href="codes.html" data-hover="Codes">Codes</a></li> <li><a href="contact.html" data-hover="Contact">Contact</a></li></ul></div>
現在再次升級，制作一個響應式導航條：
在上面的基礎上添加一些內容，首先在最外圍的div里加一個控制的塊其組成如下：
<div class="navbar-header"> <!-- .navbar-toggle樣式用于toggle收縮的內容，即nav-collapse collapse樣式所在元素 --><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="##" class="navbar-brand">menu</a></div>
其中需要注意這個button是被一個div.navbar-header包裹，還有button里的data-target=".navbar-responsive-collapse"指被控制的導航的類名，當然如果使用id也可以，只要對應起來就可以。
控制的button已經弄好了，現在來搞定受控的導航內容部分。首先明確自己是被誰控制，顯然，是被上面的那個button，所以其類名一定要吻合。那么我們直接在ul外面套上一層div，在此div上指定對應的類名，以及受控方式的類名collapse（指定是折疊的類）navbar-collapse（指定是導航條的折疊的類）。如此div的寫法就是 <div class="collapse navbar-collapse navbar-responsive-collapse"> </div>，加上上面的ul內容就是這樣：
<div class="collapse navbar-collapse navbar-responsive-collapse"><ul class="nav navbar-nav"><li><a href="index.html" class="active">Home</a></li><li><a href="about.html" data-hover="About"> About</a></li> <li><a href="news.html" data-hover="News">News</a></li><li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li><li><a href="codes.html" data-hover="Codes">Codes</a></li> <li><a href="contact.html" data-hover="Contact">Contact</a></li></ul></div>
總的就是這樣：
<div class="navbar navbar-default" role="navigation"><div class="navbar-header"> <!-- .navbar-toggle樣式用于toggle收縮的內容，即nav-collapse collapse樣式所在元素 --><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="##" class="navbar-brand">menu</a></div><div class="collapse navbar-collapse navbar-responsive-collapse"><ul class="nav navbar-nav"><li><a href="index.html" class="active">Home</a></li><li><a href="about.html" data-hover="About"> About</a></li> <li><a href="news.html" data-hover="News">News</a></li><li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li><li><a href="codes.html" data-hover="Codes">Codes</a></li> <li><a href="contact.html" data-hover="Contact">Contact</a></li></ul></div></div>
結果在未為折疊尺寸時的效果如下：
在變為折疊尺寸時的效果如下：
上面是純boostrap的效果，如果我們想要添加一些自己額外需要的樣式怎么辦呢？
下面我們先給這個響應式導航欄添加背景色試試：
由于是定義我們自己 的樣式，所以我們盡量不要去干擾boostrap自己的東西，除非有沖突。所以我們先給導航欄外面加一個div給包圍起來。如下：
<div class="bg-color"> </div>
css樣式如下：
.bg-color{background: #0C0;}只這樣設置時發現沒什么變化，后來想到應該是boostrap給導航欄添加了背景色而覆蓋掉了最外層的背景色，后來我給此層div加了更高的高度后發現確實如此。
那么就直接給里面一層加背景色吧：
.bg-color div.navbar.navbar-default{background: #0C0;}結果如下：
第一步已經成功，如果我們想給可折疊的狀態改變一下樣式，比如把文字居中顯示怎么辦？
由于boostrap使用媒體查詢使得網頁在一定尺寸時改變樣式，那么我們現在是想在可折疊的狀態時使文本居中，那么我們就以毒攻毒，也使用媒體查詢的方式我們也可以簡單粗暴的直接設置其居中（也就是沒有下面的@media(max-width:768px)約束條件）。
.bg-color{background: #0C0;}.bg-color div.navbar.navbar-default{background: inherit;}@media(max-width:768px){div.navbar.navbar-default{text-align: center;}.navbar-header>.navbar-toggle{float:none;}}這是簡單粗暴的方法（可以發現只是去掉了媒體查詢的部分）
.bg-color{background: #0C0;}.bg-color div.navbar.navbar-default{background: inherit;}div.navbar.navbar-default{text-align: center;}.navbar-header>.navbar-toggle{float:none;}由于水平居中時那個menu標志有一點礙眼，所以我就把它去掉了：
<div class="navbar navbar-default" role="navigation"><div class="navbar-header"> <!-- .navbar-toggle樣式用于toggle收縮的內容，即nav-collapse collapse樣式所在元素 --><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse navbar-responsive-collapse"><ul class="nav navbar-nav"><li><a href="index.html" class="active">Home</a></li><li><a href="about.html" data-hover="About"> About</a></li> <li><a href="news.html" data-hover="News">News</a></li><li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li><li><a href="codes.html" data-hover="Codes">Codes</a></li> <li><a href="contact.html" data-hover="Contact">Contact</a></li></ul></div></div>
效果如下：
至此我們已經完成了導航欄的簡單樣式改造，如果需要更多，更豐富的樣式，我們還可以繼續改造。比如給導航欄的鏈接添加一些hover效果，或再給文本添加響應式樣式（可以利用媒體查詢實現諸如font-size，color，font-family等等效果的變化），甚至再添加一些動畫效果，本節先告一段落，等待后續吧！
以上所述是小編給大家介紹的BooStrap對導航條的改造實踐小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
