bootStrap dropdown button

最新推荐文章于 2021-04-30 15:54:20 发布

原创最新推荐文章于 2021-04-30 15:54:20 发布

· 225 阅读

0 ·

版权

文章标签：

#bootstrap

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用Bootstrap创建一个下拉按钮，该按钮能够将多个相关操作整合在一起，节省空间并提供更好的用户体验。示例代码展示了一个危险风格的按钮，包含多个下拉选项，如Action、Another action等。参考链接提供了更多关于Bootstrap dropdown组件的详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文记录一个下拉按钮的实现。用于将类似功能的多个按钮组合在一起，作为一组。

样式：

在这里插入图片描述

代码实现：

引入bootstrap的js与样式
代码

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>