需要引用文件

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

普通版下拉菜單

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle"
 
 type="button" id="dropdown-Menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-Menu1">
    <li><a href="#">Action</a></li>
 

    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<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"  aria-labelledby="dropdownMenu1">
      <!-- 菜單標題-->
      <li class="dropdown-header">第一部分菜單頭部</li>
      <li><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
      <!-- 分割線-->
      <li class="divider"></li>
      <li class="dropdown-header">菜單選中狀態</li>
      <li class="active"><a tabindex="-1" href="#">選中狀態</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">菜單禁用狀態</li>
      <li class="disabled"><a tabindex="-1" href="#">禁用狀態</a></li>
    </ul>
</div>

1、使用一個名為“dropdown”的容器包裹了整個下拉菜單元素，示例中為:

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

2、使用了一個<button>按鈕做為父菜單，並且定義類名“.dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:

data-toggle="dropdown"

對齊方式

　　Bootstrap框架中下拉菜單默認是左對齊。

　　如果你想讓下拉菜單相對於父容器右對齊時，可以在“dropdown-menu”上添加一個“.dropdown-menu-right”類名。

向上彈出菜單

給父元素添加 .dropup 類就能使觸發的下拉菜單朝上方打開。

<p style="padding: 100px">
<div class="dropdown dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-Menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-Menu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
</p>

Bootstrap-下拉菜單