Bootstrap5中的Button Group(按钮组)组件

图片[1]-Bootstrap5中的Button Group(按钮组)组件-WP主题随想

在Bootstrap 5中,按钮组(Button Group)是一种将多个按钮组合在一起的UI组件,通常用于表示一组相关的操作或选项。按钮组中的按钮可以是单个按钮,也可以是下拉菜单(Dropdown)按钮。

基本按钮组

基本按钮组是将多个按钮水平排列在一起,通常用于表示一组相关的操作。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

在这个例子中,我们使用了<div>元素,并为其添加了btn-group类,以创建按钮组。然后,我们在<div>元素内部添加了三个<button>元素,每个按钮都有btnbtn-secondary类,用于应用Bootstrap的按钮样式。

工具栏按钮组

工具栏按钮组是将多个按钮组垂直排列在一起,通常用于表示多组相关的操作。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">5</button>
  </div>
</div>

在这个例子中,我们使用了<div>元素,并为其添加了btn-toolbar类,以创建工具栏按钮组。然后,我们在<div>元素内部添加了多个<div>元素,每个<div>元素都表示一个按钮组,并使用了btn-group类。每个按钮组内部包含了多个<button>元素。

垂直按钮组

垂直按钮组是将多个按钮垂直排列在一起,通常用于表示一组垂直相关的操作。

<div class="btn-group-vertical">
  <button type="button" class="btn btn-secondary">Button 1</button>
  <button type="button" class="btn btn-secondary">Button 2</button>
  <button type="button" class="btn btn-secondary">Button 3</button>
  <button type="button" class="btn btn-secondary">Button 4</button>
</div>

在这个例子中,我们使用了<div>元素,并为其添加了btn-group-vertical类,以创建垂直按钮组。然后,我们在<div>元素内部添加了多个<button>元素,每个按钮都有btnbtn-secondary类。

嵌套按钮组

嵌套按钮组是将一个按钮组嵌套在另一个按钮组内部,通常用于表示更复杂的操作或选项。

<div class="btn-group">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</div>

在这个例子中,我们创建了一个包含两个按钮和一个下拉菜单按钮的按钮组。下拉菜单按钮内部又包含了一个按钮组,用于显示下拉菜单的选项。

以上就是在Bootstrap 5中创建和使用按钮组的基本内容。你可以根据需要组合不同类型的按钮,以满足你的界面设计需求。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容