加入導(dǎo)航條標題
在Web頁面制作中，常常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現(xiàn)，示例查看代碼編輯器（11-22）。
原理分析：
此功能主要起一個提醒功能，當(dāng)然改良一下可以當(dāng)作是logo(此處不做過多闡述)。其樣式主要是加大了字體設(shè)置，并且設(shè)置了最大寬度：
/*源碼查看bootstrap.css文件第3739行～第3755行*/
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
@media (min-width: 768px) {
.navbar> .container .navbar-brand,
.navbar> .container-fluid .navbar-brand {
margin-left: -15px;
}
}
同樣在默認導(dǎo)航條（navbar-default）下，對navbar-brand也做了顏色處理：
/*源碼請查看bootstrap.css文件第3947行～3951行*/
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
導(dǎo)航條狀態(tài)、二級菜單
同樣的，在基礎(chǔ)導(dǎo)航條中對菜單提供了當(dāng)前狀態(tài)，禁用狀態(tài)，懸浮狀態(tài)等效果，而且也可以帶有二級菜單的導(dǎo)航條，案例代碼見右側(cè)代碼編輯器（24-42行）。
效果圖如下：
我來試試：完成下面任務(wù)
制作一個具有標題、二級菜單及導(dǎo)航條狀態(tài)的導(dǎo)航條。效果圖如下：
參考代碼：
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">慕課網(wǎng)</a> </div> <ul class="nav navbar-nav"> <li><a href="##">網(wǎng)站首頁</a></li> <li class="active"><a href="##">名師介紹</a></li> <li><a href="##">成功案例</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">關(guān)于我們<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li class="disabled"><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </li> </ul> </div>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報