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第三课 修改元素属性及内容的代码
Mar 14 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
原生js实现选项卡功能
Mar 08 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
js实现数字滚动特效
Dec 16 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调用数据库的存贮过程
2006/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
js实现ATM机存取款功能
2020/10/27 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python九九乘法表的实例
2017/09/26 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python字节单位转换实例
2019/12/05 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
pygame实现飞机大战
2020/03/11 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
六月份红领巾广播稿
2014/02/03 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
南京青奥会口号
2014/06/12 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
活动费用申请报告
2015/05/15 职场文书
小学英语课教学反思
2016/02/15 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers