Bootstrap页面布局14 - BS按钮群组

最新推荐文章于 2021-01-31 16:56:18 发布

z-pan

最新推荐文章于 2021-01-31 16:56:18 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zell-Dinch/p/3887735.html

本文介绍了如何使用Bootstrap创建按钮组及复杂工具栏的方法。通过简单的HTML代码实现按钮的分组展示，进一步提升网站交互体验。

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

首先看看这个代码：

<div class='btn-group'>
   <button type='button' class='btn'>计算机</button>
   <button type='button' class='btn'>网络</button>
   <button type='button' class='btn'>桌面项目</button>
</div>

将功能相近的按钮分成一组，bootstrap 为我们设定了该组的样式

如图：

还可以进行更加复杂的分组

<div class='btn-toolbar'>
    <div class='btn-group'>
       <button type='button' class='btn'>计算机</button>
       <button type='button' class='btn'>网络</button>
       <button type='button' class='btn'>桌面项目</button>
    </div>
    <div class='btn-group'>
       <button type='button' class='btn'>按钮一</button>
       <button type='button' class='btn'>按钮二</button>
       <button type='button' class='btn'>按钮三</button>
    </div>
</div>