有的導航條中會帶有搜索表單，比如新浪微博的導航條：
在Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單，示例代碼編輯器（29-34行）。
實現導航條表單的樣式代碼源碼請查看bootstrap.css文件第3839行～第3904行，我們也對60多行樣式代碼節選了出來放到右側bootstrap.css文件中，有興趣的同學請查看。
在上面的示例中，大家看到了“navbar-left”讓表單左浮動，更好實現對齊。在Bootstrap框架中，還提供了“navbar-right”樣式，讓元素在導航條靠右對齊。
/*源碼請查看bootstrap.css文件第3831行～第3838行*/
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
}
注意：這里有一個條件，只有當瀏覽器視窗寬度大于768px生效。
我來試試：完成下面任務
編寫代碼實現“帶有搜索表單導航條”，效果圖如下：
備注:這一小節沒有正確性驗證，請查看結果窗口,從而判斷輸入代碼是否正確。
參考代碼：
<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>
<form action="##" class="navbar-form navbar-right" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入關鍵詞" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報