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

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

這個三角形完全是通過CSS代碼來實現的：

/*源碼請查看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;
}

有的時候我們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。

/*源碼請查看bootstrap.css文件第3109行～第3114行*/

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

上面代碼中可以看出，向上三角與向下三角的區別：其實就是改變了一個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="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
        <li><a href="##">按鈕下拉菜單項</a></li>
  </ul>
</div>

運行效果如下：