Bootstrap按钮组件

在Bootstrap中我们有的时候需要的是将多个按钮放在一起，这个时候就需要使用按钮组件，那么怎样来添加按钮组件。

基本按钮组: 设置class=“btn-group”,

<div class="btn-group">

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

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

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

</div>

按钮工具栏:这个是将按钮组放在一起，设置class=“btn-toolbar”

<div class="btn-toolbar">

    <div class="btn-group">

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

     <button class="btn btn-default" type="button">按钮5</button>
     <button  type="button" class="btn btn-default">按钮6</button>

     </div>

      <div class="btn-group">
    <button class="btn btn-default" type="button">按钮4</button>
    <button class="btn btn-default" type="button">按钮5</button>
    <button  type="button" class="btn btn-default">按钮6</button>
    </div>

</div>

嵌套的按钮组:在class=“btn-group”中嵌套class=“btn-group”

<div class="btn-group">

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

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

    <div class="btn-group">

    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

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

     <ul class="dropdown-menu">

     <li><a href="#">下拉菜单</a></li>

     <li><a href="#">下拉菜单</a></li>

     </ul>

  </div>

</div>

垂直的按钮组: 设置class=“btn-group-vertical”

<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮1</button>
        <button type="button" class="btn btn-default">按钮2</button>

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

</div>