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