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 应用类库代码
Jun 02 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
微信小程序 地图map实例详解
Jun 07 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
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数组键名技巧小结
2015/02/17 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
Highcharts入门之简介
2016/08/02 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
旅游节目策划方案
2014/05/26 职场文书
调研汇报材料范文
2014/08/17 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL