博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap学习 按钮组
阅读量:5055 次
发布时间:2019-06-12

本文共 1558 字,大约阅读时间需要 5 分钟。

把一系列的.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的圆角不去掉。。。。

 

分列式的下拉列表:

如果修改为:

的话,就会形成一个向上的箭头,和一个向上的上拉列表(是不是很萌)

 

 

 

转载于:https://www.cnblogs.com/voctrals/p/3755251.html

你可能感兴趣的文章
Android Toast
查看>>
iOS开发UI篇—Quartz2D使用(绘制基本图形)
查看>>
docker固定IP地址重启不变
查看>>
桌面图标修复||桌面图标不正常
查看>>
JavaScript基础(四)关于对象及JSON
查看>>
关于js sort排序方法
查看>>
JAVA面试常见问题之Redis篇
查看>>
javascript:二叉搜索树 实现
查看>>
网络爬虫Heritrix源码分析(一) 包介绍
查看>>
__int128的实现
查看>>
Problem - 1118B - Codeforces(Tanya and Candies)
查看>>
jdk1.8 api 下载
查看>>
svn 图标不显示
查看>>
getElement的几中属性介绍
查看>>
iOS 使用Quartz 2D画虚线 【转】
查看>>
平面最接近点对
查看>>
HTML列表,表格与媒体元素
查看>>
PHP、Java、Python、C、C++ 这几种编程语言都各有什么特点或优点?
查看>>
感谢青春
查看>>
Jquery Uploadify4.2 falsh 实现上传
查看>>