Bootstrap 下拉菜單之垂直分組

垂直排列

讓一組按鈕垂直堆疊排列顯示而不是水平排列。分列式按鈕下拉菜單不支持這種方式。

垂直的按鈕組

使用 class .btn-group-vertical 可以輕松實(shí)現(xiàn)一組按鈕垂直堆疊排列。

下面的實(shí)例演示了上面 'Bootstrap 按鈕組語(yǔ)法' 中討論到的 class .btn-group-vertical 的使用：

代碼如下：

<div class="btn-group-vertical">
  <button class="btn btn-default" type="button">Bootstrap 按鈕垂直排列演示</button>
  ...
</div>

示例2：

<div class="btn-group-vertical">
<button class="btnbtn-default" type="button">首頁(yè)</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="##">公司簡(jiǎn)介</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)垂直分組的樣式代碼：

/*請(qǐng)查看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;
}

---

下拉菜單基本用法

在使用Bootstrap框架的下拉菜單時(shí)，必須調(diào)用Bootstrap框架提供的bootstrap.js文件。當(dāng)然，如果你使用的是未編譯版本，在js文件夾下你能找到一個(gè)名為“dropdown.js”的文件。而B(niǎo)ootstrap.js 是依賴(lài)jQuery庫(kù)的。所以在引入Bootstrap.js之前要引入jQuery.js。 這里請(qǐng)注意版本問(wèn)題。

基本使用方式如下：

(1) 使用一個(gè)名為“dropdown”的容器包裹了整個(gè)下拉菜單元素

<div class="dropdown"></div>

(2) 使用了一個(gè)<button>按鈕做為父菜單，并且定義類(lèi)名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類(lèi)名一致

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜單
    <span class="caret"></span>
</button>

(3) 下拉菜單項(xiàng)使用一個(gè)ul列表，并且定義一個(gè)類(lèi)名為“dropdown-menu”

<ul class="dropdown-menu"></ul>

完整實(shí)現(xiàn)代碼如下:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜單
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項(xiàng)</a></li>
  </ul>
</div>