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中的有名函数和无名函数
Oct 17 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
基于Angularjs实现分页功能
May 30 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
vue mint-ui tabbar变组件使用
May 04 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
discuz7 phpMysql操作类
2009/06/21 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
php字符串操作常见问题小结
2016/10/11 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
sails框架的学习指南
2014/12/22 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
组织关系转移介绍信
2014/01/16 职场文书
2014年施工员工作总结
2014/11/18 职场文书
学籍证明模板
2014/11/21 职场文书
2015年团支书工作总结
2015/04/03 职场文书
严以用权学习心得体会
2016/01/12 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL