加入導航條標題
在Web頁面制作中，常常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現，示例查看代碼編輯器（11-22）。
原理分析：
此功能主要起一個提醒功能，當然改良一下可以當作是logo(此處不做過多闡述)。其樣式主要是加大了字體設置，并且設置了最大寬度：
/*源碼查看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;
}
}
同樣在默認導航條（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;
}
導航條狀態、二級菜單
同樣的，在基礎導航條中對菜單提供了當前狀態，禁用狀態，懸浮狀態等效果，而且也可以帶有二級菜單的導航條，案例代碼見右側代碼編輯器（24-42行）。
效果圖如下：
我來試試：完成下面任務
制作一個具有標題、二級菜單及導航條狀態的導航條。效果圖如下：
參考代碼：
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">慕課網</a> </div> <ul class="nav navbar-nav"> <li><a href="##">網站首頁</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">關于我們<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li class="disabled"><a href="##">企業文化</a></li> <li><a href="##">組織結構</a></li> <li><a href="##">客服服務</a></li> </ul> </li> </ul> </div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報