把一系列的.btn
按钮放入.btn-group中即可。。。
.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;
.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的圆角不去掉。。。。
分列式的下拉列表:
如果修改为:
的话,就会形成一个向上的箭头,和一个向上的上拉列表(是不是很萌)