BootStrap--CSS布局--按钮
2016-12-16 15:22
447 查看
1 按钮
按钮是任何系统都不能缺少的组件,设置到按钮的大小、颜色、状态等。//btn源码 .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
按钮样式
btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link
按钮大小
btn-xs、btn-sm、btn-lg、btn-block
//源码 .btn-lg, .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
所有按钮的宽度都是文本的长短再加上padding值来决定,若我们需要一个充满父容器的100%宽度的按钮,则无法实现。所以有btn-block
btn-block不根据文本收缩,也没有padding和margin值,而是充满父容器
//源码 .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 5px; } input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
多标签支持
btn相关元素的强大之处,不仅能支持button元素,也能支持a元素和input元素
<a class="btn btn-default" href="#">链接</a> <button class="btn btn-default" type="submit">按钮</button> <input class="btn btn-default" type="submit" value="输入框">
相关文章推荐
- 不用bootstrap,只用CSS创建网格布局
- 前端之路——第三篇:列表、表单、提交按钮、html布局、css的display,制造第一个表单提交案例
- BootStrap--CSS组件--按钮下拉菜单
- Bootstrap CSS布局之表单
- Bootstrap CSS组件之按钮组(btn-group)
- Bootstrap 基础CSS - 按钮(Buttons)
- BootStrap--CSS布局--代码
- BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
- Bootstrap CSS——按钮组以及带下拉菜单的按钮组
- BootStrap--CSS布局--表格
- Bootstrap CSS布局之图像
- Bootstrap的常用类(CSS和布局组件)的总结
- bootstrap按钮css,供学习试用
- bootstrap 流式布局 引入文件 bootstrap-combined.min.css
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果)
- Bootstrap学习笔记-css布局 Hello_yihao的博客
- bootstrap+css进行页面布局
- Bootstrap-CSS-按钮-图片-辅助类-响应式
- CSS仿淘宝首页导航条按钮布局效果
- BootStrap--CSS布局--表单