按鈕的向下三角形，我們是通過(guò)在<button>標(biāo)簽中添加一個(gè)“<span>”標(biāo)簽元素，并且命名為“caret”:

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

這個(gè)三角形完全是通過(guò)CSS代碼來(lái)實(shí)現(xiàn)的：

/*源碼請(qǐng)查看bootstrap.css文件第2994行～第3003行*/

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

另外在按鈕中的三角形“caret”做了一定的樣式處理：

/*源碼查看bootstrap.css文件第3224行～第3233行*/

.btn .caret {
  margin-left: 0;
}
.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}
.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}

有的時(shí)候我們的下拉菜單會(huì)向上彈起（接下來(lái)一個(gè)小節(jié)會(huì)介紹），這個(gè)時(shí)候我們的三角方向需要朝上顯示，實(shí)現(xiàn)方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。

/*源碼請(qǐng)查看bootstrap.css文件第3109行～第3114行*/

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}

上面代碼中可以看出，向上三角與向下三角的區(qū)別：其實(shí)就是改變了一個(gè)border-bottom的值。

下面是向上彈起菜單的例子：

<div class="btn-group dropup">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
  <ul class="dropdown-menu">
        <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
        <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
        <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
        <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
  </ul>
</div>

運(yùn)行效果如下：