Bootstrap响应式前端框架笔记八——按钮组

简介: Bootstrap响应式前端框架笔记八——按钮组

在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代码如下:


 <p>正常的按钮组</p>

 <div class="btn-group">

  <button class="btn btn-default">左按钮</button>

  <button class="btn btn-danger">中心按钮</button>

  <button class="btn btn-primary">右按钮</button>

 </div>



   也可以将一组按钮组包裹在btn-toolbar类中,使其组合成为按钮组工具栏,示例如下:


 <p>按钮组工具栏</p>

 <div class="btn-toolbar">

  <div class="btn-group">

   <button class="btn btn-default">左按钮</button>

   <button class="btn btn-danger">中心按钮</button>

   <button class="btn btn-primary">右按钮</button>

  </div>

  <div class="btn-group">

   <button class="btn btn-default">左按钮</button>

   <button class="btn btn-primary">右按钮</button>

  </div>

  <div class="btn-group">

   <button class="btn btn-primary">独立按钮</button>

  </div>

 </div>


按钮组也可以进行嵌套,使用按钮组嵌套的方式也可以实现下拉菜单效果,示例如下:


 <div class="btn-group">

  <button class="btn btn-default">左按钮</button>

  <button class="btn btn-danger">中心按钮</button>

  <div class="btn-group">

   <button class="btn btn-info dropdown-toggle">菜单

   <span class="caret"></span>

   </button>

   <ul class="dropdown-menu">

    <li><a>金牛</a></li>

    <li><a>狮子</a></li>

   </ul>

  </div>

 </div>


   默认的按钮组是水平排列的,为其设置btn-group-vertical类可以将其设置为竖直排列的,示例如下:


 <p>竖直排列的按钮组</p>

 <div class="btn-group-vertical">

  <button class="btn btn-default">左按钮</button>

  <button class="btn btn-danger">中心按钮</button>

  <button class="btn btn-primary">右按钮</button>

 </div>


   如果需要使按钮组填充其父容器,需要设置btn-group-justified类,并且使用a标签作为按钮,示例如下:


 <p>设置按钮组宽度充满父容器</p>

 <div class="btn-group btn-group-justified">

  <a class="btn btn-default">左按钮</a>

  <a class="btn btn-danger">中心按钮</a>

  <a class="btn btn-primary">右按钮</a>

 </div>


   通过按钮组,可以十分方便的实现分裂式下拉菜单,示例如下:


 <p>分裂式下拉菜单</p>

 <div class="btn-group">

  <button type="button" class="btn btn-danger">金牛</button>

  <button type="button" class="btn btn-danger dropdown-toggle">

      <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 class="divider"></li>

   <li>

    <a href="#">无</a>

   </li>

  </ul>

 </div>


目录
相关文章
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
|
1月前
|
前端开发
Bootstrap5 按钮组1
Bootstrap 5 的按钮组功能允许将多个按钮排列在同一行。通过在 `&lt;div&gt;` 元素上添加 `.btn-group` 类来实现。还可以使用 `.btn-group-lg` 或 `.btn-group-sm` 类来调整按钮组的大小。示例代码展示了如何创建不同大小的按钮组。
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮组3
按钮组内嵌下拉菜单示例:包含两个普通按钮(Apple 和 Samsung)和一个带下拉菜单的按钮(Sony),下拉菜单中包含 Tablet 和 Smartphone 两个选项。
|
1月前
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
|
1月前
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `&lt;a&gt;`、`&lt;button&gt;` 或 `&lt;input&gt;` 元素。
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
Bootstrap5 按钮5
加载按钮示例:通过添加不同的类,可以创建带有加载动画的按钮,包括旋转加载和增长加载效果,同时支持禁用状态。
Bootstrap5 按钮4
按钮组件支持激活和禁用状态。使用 `.active` 类表示按钮处于激活状态,而 `disabled` 属性用于禁用按钮,使其不可点击。对于 `&lt;a&gt;` 标签,由于不支持 `disabled` 属性,可以通过添加 `.disabled` 类来实现相同效果。示例代码展示了如何应用这些类和属性。