很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現類似于導航菜單的效果。如下所示：
使用的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級。如下所示：
<div class="btn-group"> <button class="btnbtn-default" type="button">首頁</button> <button class="btnbtn-default" type="button">產品展示</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">聯系我們</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關于我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li><a href="##">企業文化</a></li> <li><a href="##">組織結構</a></li> <li><a href="##">客服服務</a></li> </ul> </div> </div>
實現的樣式代碼：
/*查看bootstrap.css文件第3192行～第3223行*/
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
我來試試：完成下面任務
編寫代碼實現導航條效果，效果圖：
備注:這一小節沒有正確性驗證，請查看結果窗口與任務所給的結果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼：
<div class="btn-group">
<button class="btn btn-default" type="button">首頁</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">產品展示<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">收割機</a></li>
<li><a href="##">電動機</a></li>
<li><a href="##">拖拉機</a></li>
<li><a href="##">電動車</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">聯系我們</button>
<button class="btn btn-default" type="button">關于我們</button>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報