BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)

更新時(shí)間：2016年09月21日 10:22:56 作者：qq_25292481

這篇文章主要介紹了BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)的相關(guān)資料,本文分步驟介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

制作導(dǎo)航（基礎(chǔ)樣式）需要如下幾部：

第一步：首先在制作導(dǎo)航的列表(<ul class=”nav nav-tabs”> 當(dāng)然nav-tabs是用來(lái)控制樣式的我們可以選擇比如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)在升級(jí)，制作一個(gè)基礎(chǔ)導(dǎo)航條，主要分以下幾步：

第一步：首先在制作導(dǎo)航的列表(<ul class=”nav”>)基礎(chǔ)上添加類名“navbar-nav”，與前面不一樣的是現(xiàn)在我們不在ul里添加nav-tabs或nav-pills之類的樣式類了。

第二步：在列表外部添加一個(gè)容器（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)在再次升級(jí)，制作一個(gè)響應(yīng)式導(dǎo)航條：

在上面的基礎(chǔ)上添加一些內(nèi)容，首先在最外圍的div里加一個(gè)控制的塊其組成如下：

<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>

其中需要注意這個(gè)button是被一個(gè)div.navbar-header包裹，還有button里的data-target=".navbar-responsive-collapse"指被控制的導(dǎo)航的類名，當(dāng)然如果使用id也可以，只要對(duì)應(yīng)起來(lái)就可以。

控制的button已經(jīng)弄好了，現(xiàn)在來(lái)搞定受控的導(dǎo)航內(nèi)容部分。首先明確自己是被誰(shuí)控制，顯然，是被上面的那個(gè)button，所以其類名一定要吻合。那么我們直接在ul外面套上一層div，在此div上指定對(duì)應(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é)果在未為折疊尺寸時(shí)的效果如下：

在變?yōu)檎郫B尺寸時(shí)的效果如下：

上面是純boostrap的效果，如果我們想要添加一些自己額外需要的樣式怎么辦呢？

下面我們先給這個(gè)響應(yīng)式導(dǎo)航欄添加背景色試試：

由于是定義我們自己的樣式，所以我們盡量不要去干擾boostrap自己的東西，除非有沖突。所以我們先給導(dǎo)航欄外面加一個(gè)div給包圍起來(lái)。如下：

<div class="bg-color"> 
</div>

css樣式如下：

.bg-color{
background: #0C0;
}

只這樣設(shè)置時(shí)發(fā)現(xiàn)沒(méi)什么變化，后來(lái)想到應(yīng)該是boostrap給導(dǎo)航欄添加了背景色而覆蓋掉了最外層的背景色，后來(lái)我給此層div加了更高的高度后發(fā)現(xiàn)確實(shí)如此。
那么就直接給里面一層加背景色吧：

.bg-color div.navbar.navbar-default{
background: #0C0;
}

結(jié)果如下：

第一步已經(jīng)成功，如果我們想給可折疊的狀態(tài)改變一下樣式，比如把文字居中顯示怎么辦？
由于boostrap使用媒體查詢使得網(wǎng)頁(yè)在一定尺寸時(shí)改變樣式，那么我們現(xiàn)在是想在可折疊的狀態(tài)時(shí)使文本居中，那么我們就以毒攻毒，也使用媒體查詢的方式我們也可以簡(jiǎn)單粗暴的直接設(shè)置其居中（也就是沒(méi)有下面的@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;
}
}

這是簡(jiǎn)單粗暴的方法（可以發(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;
}

由于水平居中時(shí)那個(gè)menu標(biāo)志有一點(diǎn)礙眼，所以我就把它去掉了：

<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)航欄的簡(jiǎn)單樣式改造，如果需要更多，更豐富的樣式，我們還可以繼續(xù)改造。比如給導(dǎo)航欄的鏈接添加一些hover效果，或再給文本添加響應(yīng)式樣式（可以利用媒體查詢實(shí)現(xiàn)諸如font-size，color，font-family等等效果的變化），甚至再添加一些動(dòng)畫效果，本節(jié)先告一段落，等待后續(xù)吧！

以上所述是小編給大家介紹的BooStrap對(duì)導(dǎo)航條的改造實(shí)踐小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: