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 相关文章推荐
javascript实现数字验证码的简单实例
Feb 10 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
图书管理程序(一)
2006/10/09 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
js数组常用最重要的方法
2018/02/04 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
关于反爬虫的一些简单总结
2017/12/13 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
pycharm运行scrapy过程图解
2019/11/22 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
校本教研活动总结
2014/07/01 职场文书
干部外出学习心得体会
2016/01/18 职场文书
2016银行求职自荐信
2016/01/28 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
golang switch语句的灵活写法介绍
2021/05/06 Golang
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis