单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。

　　Bootstrap框架为大家提供了按钮组组件。

<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>

1、对于结构方面，非常的简单。使用一个名为“.btn-group”的容器，把多个按钮放到这个容器中（按钮组）。

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

除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。

　　唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。

 

2、在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组。

　　那么Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“.btn-group”按组放在一个大的容器“.btn-toolbar”中。

<div class="btn-toolbar">
  <div class="btn-group">…</div>
</div>

3、按钮组大小

　　按钮组的大小，我们也可以通过以下方法：

　　☑ .btn-group-lg:大按钮组

　　☑ .btn-group-sm:小按钮组

　　☑ .btn-group-xs:超小按钮组

　　只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。

<div class="btn-toolbar">
  <div class="btn-group btn-group-lg">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group btn-group-sm">
    …
  </div>
  <div class="btn-group btn-group-xs">
   …
  </div>
</div>

 

版权声明：本文为liujiangping原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/liujiangping/p/5317699.html