首页 > 代码库 > Bootstrap学习 按钮组

Bootstrap学习 按钮组

2024-07-06 05:43:20   225人阅读

把一系列的.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">

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

 

 

 


联系
我们