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