前面看到的示例，按鈕組都是水平顯示的。但在實(shí)際運(yùn)用當(dāng)中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風(fēng)格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。如下所示：
<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首頁</button>
<button class="btnbtn-default" type="button">產(chǎn)品展示</button>
<button class="btnbtn-default" type="button">案例分析</button>
<button class="btnbtn-default" type="button">聯(lián)系我們</button>
<div class="btn-group">
<button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關(guān)于我們<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司簡介</a></li>
<li><a href="##">企業(yè)文化</a></li>
<li><a href="##">組織結(jié)構(gòu)</a></li>
<li><a href="##">客服服務(wù)</a></li>
</ul>
</div>
</div>
運(yùn)行的效果如下：
實(shí)現(xiàn)垂直分組的樣式代碼：
/*請查看bootstrap.css文件第3234行～第3276行*/
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
和水平分組按鈕不一樣的是：
? 水平分組按鈕第一個按鈕左上角和左下角具有圓角以及最后一個按鈕右上角和右下角具有圓角
? 垂直分組按鈕第一個按鈕左上角和右上角具有圓角以及最后一個按鈕左下角和右下角具有圓角
我來試試：完成下面任務(wù)
編寫代碼實(shí)現(xiàn)垂直導(dǎo)航條效果，效果圖如下：
備注:這一小節(jié)沒有正確性驗(yàn)證，請查看結(jié)果窗口與任務(wù)所給的結(jié)果圖片是否一致，從而判斷輸入代碼是否正確。
參考代碼：
<div class="btn-group-vertical">
<button class="btn btn-default" type="button">首頁</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">產(chǎn)品展示<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">收割機(jī)</a></li>
<li><a href="##">電動機(jī)</a></li>
<li><a href="##">拖拉機(jī)</a></li>
<li><a href="##">電動車</a></li>
</ul>
</div>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">聯(lián)系我們</button>
<button class="btn btn-default" type="button">關(guān)于我們</button>
</div>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)