ant-design/components/button/demo/button-group.html

<div class="code-box">
  <div class="code-box-demo">
    <div id="components-button-demo-button-group"></div>
    <div class="nico-insert-code"><h4>基本组合</h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">确 定</button>
  <button class="ant-btn ant-btn-primary">取 消</button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn">左</button>
  <button class="ant-btn">中</button>
  <button class="ant-btn">右</button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">左</button>
  <button class="ant-btn ant-btn-ghost">中</button>
  <button class="ant-btn ant-btn-ghost">中</button>
  <button class="ant-btn">右</button>
</div>
<h4>带图标按钮组合 </h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-left"></span>
  <span>后 退</span>
  </button>
  <button class="ant-btn ant-btn-primary">
  <span>前 进</span>
  <span class="anticon anticon-right"></span>
  </button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-cloud"></span>
  </button>
  <button class="ant-btn ant-btn-primary">
  <span class="anticon anticon-cloud-download"></span>
  </button>
</div>
<h4>多个组合</h4>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-ghost">1</button>
  <button class="ant-btn ant-btn-ghost">2</button>
  <button class="ant-btn ant-btn-ghost">3</button>
  <button class="ant-btn ant-btn-ghost">4</button>
  <button class="ant-btn ant-btn-ghost">
  <span>前 进</span>
  <span class="anticon anticon-right"></span>
  </button>
</div>
<h4>尺寸</h4>
<div class="ant-btn-group ant-btn-group-lg">
  <button class="ant-btn ant-btn-ghost">大</button>
  <button class="ant-btn ant-btn-ghost">大</button>
  <button class="ant-btn ant-btn-ghost">大</button>
</div>
<div class="ant-btn-group">
  <button class="ant-btn ant-btn-ghost">默 认</button>
  <button class="ant-btn ant-btn-ghost">默 认</button>
  <button class="ant-btn ant-btn-ghost">默 认</button>
</div>
<div class="ant-btn-group ant-btn-group-sm">
  <button class="ant-btn ant-btn-ghost">小</button>
  <button class="ant-btn ant-btn-ghost">小</button>
  <button class="ant-btn ant-btn-ghost">小</button>
</div></div><div class="highlight"><pre><code class="xml"><span class="tag">&lt;<span class="title">h4</span>&gt;</span>基本组合<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>确 定<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>取 消<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span>&gt;</span>左<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span>&gt;</span>中<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span>&gt;</span>右<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>左<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>中<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>中<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span>&gt;</span>右<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span>&gt;</span>带图标按钮组合 <span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-left"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span>&gt;</span>后 退<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span>&gt;</span>前 进<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-right"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-cloud"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-cloud-download"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span>&gt;</span>多个组合<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>1<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>2<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>3<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>4<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span>&gt;</span>前 进<span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"anticon anticon-right"</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span>&gt;</span>尺寸<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group ant-btn-group-lg"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>大<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>大<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>大<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>默 认<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>默 认<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>默 认<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"ant-btn-group ant-btn-group-sm"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>小<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>小<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>&gt;</span>小<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></pre></div><style>
.nico-insert-code h4 {
  margin: 8px 0;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.nico-insert-code h4:first-child {
  margin-top: 0;
}
.nico-insert-code .ant-btn {
  margin-bottom: 8px;
}
</style>

  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">按钮组合</div>
    <p>将一系列的 <code>.ant-btn</code> 放入 <code>.ant-btn-group</code> 的容器中。</p>
<p>按钮组合尺寸</p>
<p>只要给 <code>.ant-btn-group</code> 加上 <code>.ant-btn-group-*</code> 类，即可设置不同的尺寸，目前支持大中小三种尺寸。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>