引导带|带有示例的浮动实用程序

简介

该浮动实用程序可以帮助程序员快速创建一个引导带，同时还可展示带有示例的按钮，方便用户了解该按钮的功能。

如何使用

安装

npm install --save bootstrap
npm install --save bootstrap-icons

引入样式文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">

创建带有示例的浮动实用程序

<div class="btn-toolbar float-end" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">示例按钮</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">下拉</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">示例菜单项 1</a></li>
      <li><a class="dropdown-item" href="#">示例菜单项 2</a></li>
      <li><a class="dropdown-item" href="#">示例菜单项 3</a></li>
    </ul>
  </div>
</div>

示例

可用选项

该浮动实用程序主要涉及以下选项：

类

| 类 | 描述 | | ------------ | ----------------------- | | .btn | 可应用于按钮 | | .btn-group | 组合按钮 | | .dropdown | 下拉按钮 | | .btn-toolbar | 显示按钮工具栏，可与上下文菜单一起使用 |

属性

| 属性 | 描述 | | ---------------- | -------- | | data-bs-toggle | 触发下拉 | | aria-expanded | 是否展开 |

结束语

希望这个浮动实用程序可以对你有所帮助，如果有任何疑问或建议，请在评论中与我们分享。