Bootstrap学习 按钮组

把一系列的.btn按钮放入.btn-group中即可。。。

<div class="btn-group">

  <button type="button" class="btn btn-default">Left</button>

  <button type="button" class="btn btn-default">Middle</button>

  <button type="button" class="btn btn-default">Right</button>

</div>

.btn是有设置圆角的

.btn-group .btn 设置了 position: relative; float: left; 所以他们会很好的排列在一行里面。

我认为下面的代码就是TMD艺术：

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

　　border-radius: 0;

}

最后一个目前还不知道呢，除了第一个和最后一个元素的border-radius是0；

<div class="btn-toolbar" role="toolbar">

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

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

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

</div>

.btn-group设置了position: relative;
display: inline-block; 所以他们会很好的在一个btn-toolbar里面水平排列。但是他没有float所以里面的各个btn-group是有间隔的。

我们可以给.btn-group再追加btn-group-lg或者btn-group-sm或者btn-group-xs来控制这个按钮组的大小。。。

又有新鲜玩意儿了，dropdown-list里面最外层一个div的class是dropdown，其实也可以是一个btn-group，只不过有些圆角问题需要解决。

但是bootstrap又提供了一个.dropdown-toggle，他是用来修正上面这种情况的，也就是说解决一下圆角问题。

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

　　border-radius: 0;

}

第一个子元素或者最后一个子元素意外的圆角都去掉。

dropdown-toggle的圆角不去掉。。。。

<div class="btn-group">

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

  <button type="button" class="btn btn-default">2</button>

<div class="btn-group">

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

      Dropdown

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

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">Dropdown link</a></li>

      <li><a href="#">Dropdown link</a></li>

    </ul>

  </div>

</div>

分列式的下拉列表：

    <div class="btn-group">

        <button class="btn btn-default">Left</button>

        <button class="btn btn-default">Middle</button>

        <div class="btn-group">

            <button class="btn btn-default">Right dropdown</button>

            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> //注意这里，这个东西在什么位置，点谁谁会触发下拉事件。。。

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

            </button>

            <ul class="dropdown-menu">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li><a href="#">Something else here</a></li>

                <li class="divider"></li>

                <li><a href="#">Separated link</a></li>

            </ul>

        </div>

    </div>

如果修改为：

<div class="btn-group dropup">

的话，就会形成一个向上的箭头，和一个向上的上拉列表（是不是很萌）

Bootstrap学习 按钮组,布布扣,bubuko.com