25. Bootstreap 下拉菜单

Posted 2021-06-20

下拉菜单

使用 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;">　　<!--右-->

 

具体要掌握的只有那么多 主要还是要把它包起来