Bootstrap系列 -- 34. 按钮下拉菜单

简介:   按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单,只不过把“”标签元素换成了“”标签元素。

 

  按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

 

  

<div class="btn-group">
      <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>
  
  <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            请选择
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a>答复打底衫费</a></li>
            <li><a>答复打底衫费</a></li>
            <li><a>答复打底衫费</a></li>
            <li><a>答复打底衫费</a></li>
        </ul>
    </div>

 

相关文章
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
|
25天前
Bootstrap5 下拉菜单7
按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle=&quot;dropdown&quot;` 属性实现下拉效果。
|
26天前
|
前端开发
Bootstrap5 下拉菜单5
此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
|
25天前
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
|
26天前
Bootstrap5 下拉菜单4
要使上拉菜单向上弹出,可在 div 元素中添加 &quot;dropup&quot; 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
|
26天前
Bootstrap5 下拉菜单3
下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮组3
按钮组内嵌下拉菜单示例:包含两个普通按钮(Apple 和 Samsung)和一个带下拉菜单的按钮(Sony),下拉菜单中包含 Tablet 和 Smartphone 两个选项。
|
27天前
|
移动开发
Bootstrap5 下拉菜单2
`.dropdown-header` 类用于在下拉菜单中添加标题,例如:`&lt;li&gt;&lt;h5 class=&quot;dropdown-header&quot;&gt;标题 1&lt;/h5&gt;&lt;/li&gt;`。`.active` 类可使选项高亮显示,`.disabled` 类可禁用选项。下拉菜单可通过添加 `.dropend` 或 `.dropstart` 类实现右对齐或左对齐。示例代码展示了如何使用这些类。