注：下拉菜单：需要popper.js

1、单一按钮的下拉菜单

  1. <div class="col-2">
  2.     <div class="dropdown">
  3.         <!-- dropdown:下拉菜单 -->
  4.         <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button><!-- dropdown-toggle：三角形 -->
  5.         <!--data-toggle="dropdown"：js交互功能？？？前面有提  -->
  6.         <div class="dropdown-menu">
  7.             <a href="#" class="dropdown-item">北京</a>
  8.             <a href="#" class="dropdown-item">上海</a>
  9.             <a href="#" class="dropdown-item">广州</a>
  10.         </div>
  11.     </div>
  12. </div>

2、使用a标签

  1. <div class="col-2">
  2.     <div class="dropdown">
  3.         <a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a><!-- a改href -->
  4.         <div class="dropdown-menu">
  5.             <a href="#" class="dropdown-item">北京</a>
  6.             <a href="#" class="dropdown-item">上海</a>
  7.             <a href="#" class="dropdown-item">广州</a>
  8.             <div class="dropdown-divider"></div><!-- 分割线 -->
  9.             <a href="#" class="dropdown-item">深圳</a>
  10.         </div>
  11.     </div>
  12. </div>

3、分离式按钮下拉菜单

  1. <div class="col-3">
  2.     <div class="btn-group dropdown"><!-- dropdown可加可不加 -->
  3.         <button class="btn btn-success btn-lg">分离式按钮下拉菜单</button><!-- 左边的 -->
  4.         <button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"
  5.             data-toggle="dropdown"></button><!-- 右边的 --><!-- dropdown-toggle-split：分割左右按钮 -->
  6.         <div class="dropdown-menu">
  7.             <a href="#" class="dropdown-item">北京</a>
  8.             <a href="#" class="dropdown-item">上海</a>
  9.             <a href="#" class="dropdown-item">广州</a>
  10.             <div class="dropdown-divider"></div>
  11.             <a href="#" class="dropdown-item">深圳</a>
  12.         </div>
  13.     </div>
  14. </div>

4、下拉菜单尺寸

  1. <div class="col-3 d-flex">
  2.     <div class="dropdown">
  3.         <button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">大按钮</button><!-- btn-lg -->
  4.         <div class="dropdown-menu">
  5.             <a href="#" class="dropdown-item">北京</a>
  6.             <a href="#" class="dropdown-item">上海</a>
  7.             <a href="#" class="dropdown-item">广州</a>
  8.         </div>
  9.     </div>
  10.     <div class="dropdown">
  11.         <button class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">小按钮</button><!-- btn-sm -->
  12.         <div class="dropdown-menu">
  13.             <a href="#" class="dropdown-item">北京</a>
  14.             <a href="#" class="dropdown-item">上海</a>
  15.             <a href="#" class="dropdown-item">广州</a>
  16.             <!-- 3.x还有xs尺寸，但是4.x没有 -->
  17.         </div>
  18.     </div>
  19. </div>

5、下拉菜单不同方向展开：

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <!-- 3.x版本没有左和右 -->
  4.         <!--注意： 有的改变了方向但是实际只是改变的是三角形：是因为位置不够需要加margin！important -->
  5.         <div class="dropup"><!-- 改变方向：dropup -->
  6.             <!-- 向上展开 -->
  7.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向上展开</button>
  8.             <div class="dropdown-menu">
  9.                 <a href="#" class="dropdown-item">北京</a>
  10.                 <a href="#" class="dropdown-item">上海</a>
  11.                 <a href="#" class="dropdown-item">广州</a>
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <div class="col">
  16.         <div class="dropright">
  17.             <!-- 向右展开 -->
  18.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向右展开</button>
  19.             <div class="dropdown-menu">
  20.                 <a href="#" class="dropdown-item">北京</a>
  21.                 <a href="#" class="dropdown-item">上海</a>
  22.                 <a href="#" class="dropdown-item">广州</a>
  23.             </div>
  24.         </div>
  25.     </div>
  26.     <div class="col">
  27.         <div class="dropdown">
  28.             <!-- 向下展开 -->
  29.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向下展开</button>
  30.             <div class="dropdown-menu">
  31.                 <a href="#" class="dropdown-item">北京</a>
  32.                 <a href="#" class="dropdown-item">上海</a>
  33.                 <a href="#" class="dropdown-item">广州</a>
  34.             </div>
  35.         </div>
  36.     </div>
  37.     <div class="col">
  38.         <div class="dropleft">
  39.             <!-- 向左展开 -->
  40.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向左展开</button>
  41.             <div class="dropdown-menu">
  42.                 <a href="#" class="dropdown-item">北京</a>
  43.                 <a href="#" class="dropdown-item">上海</a>
  44.                 <a href="#" class="dropdown-item">广州</a>
  45.             </div>
  46.         </div>
  47.     </div>
  48. </div>

6、菜单项使用了button标签和菜单右对齐

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <div class="dropdown">
  4.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">菜单项使用了button标签</button>
  5.             <div class="dropdown-menu dropdown-menu-right">
  6.                 <!-- 菜单右对齐：dropdown-menu-right -->
  7.                 <a href="#" class="dropdown-item">北京</a>
  8.                 <a href="#" class="dropdown-item">上海</a>
  9.                 <a href="#" class="dropdown-item">广州</a>
  10.                 <div class="dropdown-divider"></div>
  11.                 <button class="dropdown-item">深圳</button><!-- 可使用button标签 -->
  12.             </div>
  13.         </div>
  14.     </div>
  15. </div>

7、非交互式的下拉菜单：绝对定位，有文档流

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <div class="dropdown">
  4.             <div class="dropdown-menu show">    <!-- show：显示菜单 -->
  5.                 <span class="dropdown-item-text">非点击的项</span>
  6.                 <h4 class="dropdown-header">下拉菜单的标题</h4>
  7.                 <a href="#" class="dropdown-item">北京</a>
  8.                 <a href="#" class="dropdown-item active">上海</a> <!-- 当前的选项 -->
  9.                 <a href="#" class="dropdown-item disabled">广州</a> <!-- 禁用的选项 -->
  10.                 <div class="dropdown-divider"></div>
  11.                 <button class="dropdown-item">深圳</button>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </div>

8、偏移属性

  1. <div class="row mt-5" style="margin-top: 260px!important;">
  2.     <div class="col">
  3.         <div class="dropdown">
  4.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button><!-- data-offset="10,20" ：离左边偏移10，上边20-->
  5.             <div class="dropdown-menu">
  6.                 <!-- 右对齐 -->
  7.                 <a href="#" class="dropdown-item">北京</a>
  8.                 <a href="#" class="dropdown-item">上海</a>
  9.                 <a href="#" class="dropdown-item">广州</a>
  10.                 <div class="dropdown-divider"></div>
  11.                 <button class="dropdown-item">深圳</button>
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <div class="col">
  16.         <div class="dropdown">
  17.             <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button>
  18.             <div class="dropdown-menu" data-reference="parent"><!-- data-reference="parent"：根据父级决定位置 -->
  19.                 <!-- 右对齐 -->
  20.                 <a href="#" class="dropdown-item">北京</a>
  21.                 <a href="#" class="dropdown-item">上海</a>
  22.                 <a href="#" class="dropdown-item">广州</a>
  23.                 <div class="dropdown-divider"></div>
  24.                 <button class="dropdown-item">深圳</button>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </div>