Bootstrap CSS布局之按钮


Posted in Javascript onDecember 17, 2016

按钮是任何系统都不能缺少的组件,设置到按钮的大小、颜色、状态等。

//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="输入框">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
jquery中this的使用说明
Sep 06 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
webpack external模块的具体使用
Mar 10 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Bootstrap CSS布局之表单
Dec 17 #Javascript
Bootstrap CSS布局之表格
Dec 17 #Javascript
Bootstrap CSS布局之代码
Dec 17 #Javascript
基于js实现二级下拉联动
Dec 17 #Javascript
文件上传的几个示例分享【推荐】
Dec 16 #Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 #Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 #Javascript
You might like
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
python的setattr函数实例用法
2020/12/16 Python
用Python 执行cmd命令
2020/12/18 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
旷课检讨书3000字
2014/02/04 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery