BooStrap對導(dǎo)航條的改造實踐小結(jié)
制作導(dǎo)航（基礎(chǔ)樣式）需要如下幾部：
第一步：首先在制作導(dǎo)航的列表(<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>
然后我們就可以看到類似下面的效果了：
我們現(xiàn)在升級，制作一個基礎(chǔ)導(dǎo)航條，主要分以下幾步：
第一步：首先在制作導(dǎo)航的列表(<ul class=”nav”>)基礎(chǔ)上添加類名“navbar-nav”，與前面不一樣的是現(xiàn)在我們不在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>
現(xiàn)在再次升級，制作一個響應(yīng)式導(dǎo)航條：
在上面的基礎(chǔ)上添加一些內(nèi)容，首先在最外圍的div里加一個控制的塊其組成如下：
<div class="navbar-header"> <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即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"指被控制的導(dǎo)航的類名，當然如果使用id也可以，只要對應(yīng)起來就可以。
控制的button已經(jīng)弄好了，現(xiàn)在來搞定受控的導(dǎo)航內(nèi)容部分。首先明確自己是被誰控制，顯然，是被上面的那個button，所以其類名一定要吻合。那么我們直接在ul外面套上一層div，在此div上指定對應(yīng)的類名，以及受控方式的類名collapse（指定是折疊的類）navbar-collapse（指定是導(dǎo)航條的折疊的類）。如此div的寫法就是 <div class="collapse navbar-collapse navbar-responsive-collapse"> </div>，加上上面的ul內(nèi)容就是這樣：
<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收縮的內(nèi)容，即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>
結(jié)果在未為折疊尺寸時的效果如下：
在變?yōu)檎郫B尺寸時的效果如下：
上面是純boostrap的效果，如果我們想要添加一些自己額外需要的樣式怎么辦呢？
下面我們先給這個響應(yīng)式導(dǎo)航欄添加背景色試試：
由于是定義我們自己 的樣式，所以我們盡量不要去干擾boostrap自己的東西，除非有沖突。所以我們先給導(dǎo)航欄外面加一個div給包圍起來。如下：
<div class="bg-color"> </div>
css樣式如下：
.bg-color{
background: #0C0;
}
只這樣設(shè)置時發(fā)現(xiàn)沒什么變化，后來想到應(yīng)該是boostrap給導(dǎo)航欄添加了背景色而覆蓋掉了最外層的背景色，后來我給此層div加了更高的高度后發(fā)現(xiàn)確實如此。
那么就直接給里面一層加背景色吧：
.bg-color div.navbar.navbar-default{
background: #0C0;
}
結(jié)果如下：
第一步已經(jīng)成功，如果我們想給可折疊的狀態(tài)改變一下樣式，比如把文字居中顯示怎么辦？
由于boostrap使用媒體查詢使得網(wǎng)頁在一定尺寸時改變樣式，那么我們現(xiàn)在是想在可折疊的狀態(tài)時使文本居中，那么我們就以毒攻毒，也使用媒體查詢的方式我們也可以簡單粗暴的直接設(shè)置其居中（也就是沒有下面的@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;
}
}
這是簡單粗暴的方法（可以發(fā)現(xiàn)只是去掉了媒體查詢的部分）
.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收縮的內(nèi)容，即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>
效果如下：
至此我們已經(jīng)完成了導(dǎo)航欄的簡單樣式改造，如果需要更多，更豐富的樣式，我們還可以繼續(xù)改造。比如給導(dǎo)航欄的鏈接添加一些hover效果，或再給文本添加響應(yīng)式樣式（可以利用媒體查詢實現(xiàn)諸如font-size，color，font-family等等效果的變化），甚至再添加一些動畫效果，本節(jié)先告一段落，等待后續(xù)吧！
以上所述是小編給大家介紹的BooStrap對導(dǎo)航條的改造實踐小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
代碼觸發(fā)js事件(click、change)示例應(yīng)用
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代，直接給一個兼容的Code，下面有個不錯的示例，喜歡的朋友可以收藏下2013-12-12
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
本文結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來介紹下它稍微高級點的用法。對bootstrap表格組件相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要為大家介紹了合并多個ArrayBuffer方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
修改frameset的cols屬性來達到修改各個頁面所占的寬高，例如隱藏當前frame頁等等，感興趣的朋友可以了解下2013-09-09
本文為大家介紹下使用js獲取父frame元素及獲取子frame元素的實現(xiàn)代碼，有需求的朋友可以參考下，希望對大家有所2013-07-07
本篇文章主要是對JS刷新當前頁面的幾種方法進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了微信小程序自定義組件實現(xiàn)多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
對于數(shù)字鍵名或者非正常變量字符（比如有空格），必須使用 aa[x]的方式2013-11-11