下拉菜单
使用 Bootstrap 下拉插件切换上下文覆盖以显示链接列表等。
下拉菜单是可切换的上下文叠加，用于显示链接列表等。它们与包含的 Bootstrap 下拉 JavaScript 插件进行交互。它们通过点击而不是悬停来切换
来一个最基本的下拉菜单： 【如果你想指针是手形的 当然你把div 换成 a 即可】
<!-- dropdown是基类 在最外层 --> <div class="dropdown m-5"> <!-- 这是控制按钮 记得加上交互 data-toggle 值是 dropdown --> <div class="btn btn-primary" data-toggle="dropdown">下拉列表</div> <!-- 用一个div 包住下拉菜单项 Class是 .dropdown-menu --> <div class="dropdown-menu"> <div class="dropdown-item">下拉菜单1</div> <div class="dropdown-item">下拉菜单2</div> <div class="dropdown-item">下拉菜单3</div> <div class="dropdown-item">下拉菜单4</div> </div> </div>
然后图：
如果你想有个空值菜单有个箭头 你可以在控制按钮加上 .dropdown-toggle ，例：
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉列表</div>
图:
如果你想分开 按钮和箭头 【那么就是两个按钮】，你只需要：
<!--合并为按钮组 btn-group--> <div class=" m-5 dropdown btn-group"> <!-- 要注意 这里是没有交互的【即没有 data-toggle】 当然你要添加我也没办法 --> <div class="btn btn-primary ">下拉列表</div> <!-- dropdown-toggle:添加箭头 dropdown-toggle-split:让按钮更小 --> <div class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></div> <div class="dropdown-menu"> <div class="dropdown-item">下拉菜单1</div> <div class="dropdown-item">下拉菜单2</div> <div class="dropdown-item">下拉菜单3</div> <div class="dropdown-item">下拉菜单4</div> </div> </div>
如果你想在下拉菜单项 添加分隔符 ，那么你就加 .dropdown-divider
下面代码是菜单项：
<div class="dropdown-menu"> <div class="dropdown-item">下拉菜单1</div> <div class="dropdown-item">下拉菜单2</div> <!-- 加上分隔符 --> <div class="dropdown-divider"></div> <div class="dropdown-item">下拉菜单3</div> <div class="dropdown-item">下拉菜单4</div> </div>
如果你想更大 或 更小 的按钮 那么你就 btn-sm 或 btn-lg 这个自己来。
还可以控制方向 上下左右都可以，即.droup** 加上 drop** 即可 ** 是方向
但是要注意的是 如果向上、下左右，不够位置的话 他会默认向下...
如果都不够 我也没遇过...
上下左右：
<div class=" dropdown btn-group dropdown" style="margin: 500px;"> <!--下--> <div class=" dropdown btn-group dropleft" style="margin: 500px;"> <!--左--> <div class=" dropdown btn-group dropright" style="margin: 500px;"> <!--右-->
具体要掌握的只有那么多 主要还是要把它包起来