<div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> </div>
效果图:
在这里可以根据不同的图标生成不同的图标按钮!可以在此网址查看:#glyphicons
按钮（按钮工具栏）
在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组，如下图所示：
那么Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，如下所示：
<div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> <div> <button type="button"><span></span></button> <button type="button"><span></span></button> </div> </div>
效果图:
图上的第二组图图标是加上了一个class:
btn-group-lg:大按钮组
btn-group-sm:小按钮组
btn-group-xs:超小按钮组
只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。
按钮（嵌套分组）
很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。
<div> <button type="button">首页</button> <button type="button">产品展示</button> <button type="button">案例分析</button> <button type="button">联系我们</button> <div> <button data-toggle="dropdown" type="button">关于我们<span></span></button> <ul> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
效果图:
按钮（垂直分组）
前面看到的示例，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可
<div> <button type="button">首页</button> <button type="button">产品展示</button> <button type="button">案例分析</button> <button type="button">联系我们</button> <div> <button data-toggle="dropdown" type="button">关于我们<span></span></button> <ul> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
效果图:
按钮（等分按钮）