html按钮的ui,button按钮 - 基础 - H-ui前端框架官方网站
按钮
我是一个按钮
我诞生到世界上是这样的
每个人都在使用他
但每个人都不喜欢他默认的样子
很多人都在赋予他新的外观和意义
直到今天,从没停止……
任何赋予.btn类的页面元素都会显示方角按钮样式。通常用在 和 页面元素上。追加.radius就会显示css3圆角效果。
按钮
class=""
描述
btn btn-default
默认按钮
btn btn-default radius
圆角默认按钮
btn btn-default round
椭圆默认按钮
btn btn-primary radius
提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-secondary radius
默认样式的替代样式
btn btn-success radius
表示成功或积极的动作
btn btn-warning radius
提醒应该谨慎采取这个动作
btn btn-danger radius
表示这个动作危险或存在危险
btn btn-link
简化一个按钮, 使它看起来像一个链接,同时保持按钮的行为
btn disabled radius
disabled只是让状态看上去像禁用,但实际并没有真正禁用,需要js代码来禁止链接的行为
不支持圆角和背景渐变浏览器,如IE系列,会显示扁平纯色直角效果。
HTML代码
空心效果
按钮
class=""
描述
btn btn-primary-outline radius
提供额外的视觉感, 可在一系列的按钮中指出主要操作
btn btn-secondary-outline radius
默认样式的替代样式
btn btn-success-outline radius
表示成功或积极的动作
btn btn-warning-outline radius
提醒应该谨慎采取这个动作
btn btn-danger-outline radius
表示这个动作危险或存在危险
btn btn-primary-outline radius disabled
disabled只是让状态看上去像禁用,但实际并没有真正禁用,需要js代码来禁止链接的行为
按钮大小
2.0 重新定义尺寸的命名,采用size-开头,尺寸是个全局类名。
按钮
class=""
size-XL
size-L
size-M 缺省值
size-S
size-MINI
HTML代码
CSS代码/*按钮*/
.btn{display:inline-block;cursor:pointer;text-align:center; font-weight:400;white-space:nowrap;vertical-align: middle;*zoom:1;-webkit-transition:background-color .1s linear;-moz-transition:background-color .1s linear;-o-transition:background-color .1s linear;transition:background-color .1s linear}
a.btn:hover,a.btn:focus,a.btn:active,a.btn.active,a.btn.disabled,a.btn[disabled]{text-decoration:none}
.btn:active,.btn.active{background-color:#ccc}
.btn:first-child{*margin-left:0}
.btn.active,.btn:active{-moz-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset;-webkit-box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset; box-shadow:0 1px 8px rgba(0, 0, 0, 0.125) inset}
/*默认——灰色 通常用于取消*/
.btn-default{background-color:#e6e6e6}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active{color:#333;background-color:#c7c7c7;border-color:#c7c7c7}
/*主要——主色 通常用于确定、提交、购买、支付等*/
.btn-primary{color:#fff;background-color:#5a98de; border-color:#5a98de}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active{color:#fff;background-color:#6aa2e0;border-color:#6aa2e0}
/*次要按钮*/
.btn-secondary{color:#fff;background-color:#3bb4f2; border-color:#3bb4f2}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active{color:#fff;background-color:#0f9ae0;border-color:#0f9ae0}
/*成功*/
.btn-success{color:#fff;background-color:#5eb95e; border-color:#5eb95e}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active{color:#fff;background-color:#429842;border-color:#429842}
/*警告*/
.btn-warning{color:#fff;background-color:#f37b1d; border-color:#f37b1d}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active{color:#fff;background-color:#c85e0b;border-color:#c85e0b}
/*危险*/
.btn-danger{color:#fff;background-color:#dd514c; border-color:#dd514c}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active{color:#fff;background-color:#c62b26;border-color:#c62b26}
/*链接*/
.btn-link{color:#0e90d2;cursor:pointer;border-color:transparent;background-color:transparent}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active{color:#095f8a;text-decoration:underline;background-color:transparent}
/*禁用状态*/
.btn.disabled{cursor:not-allowed;background-image:none;opacity:.65;filter:alpha(opacity=65);box-shadow:none; pointer-events:none}
html按钮的ui,button按钮 - 基础 - H-ui前端框架官方网站相关推荐
- html表格ui,table表格 - 基础 - H-ui前端框架官方网站
表格 系统默认表格 表头 表头 表头 类别 表格内容 表格内容 类别 表格内容 表格内容 类别 表格内容 表格内容 ... .table H-ui默认 表头 表头 表头 类别 表格内容 表格内容 类别 ...
- [QUICK UI] 有哪些目前流行的前端框架
From: https://blog.csdn.net/qianduankuangjia/article/details/78185047 使用前端框架其实和开发的项目有一定的关系,因为在不同的项目中 ...
- HTML输入哪个指令是发送按钮,HTML input button按钮简介说明
摘要: 下文讲述html代码中input type='button'时的相关属性简介说明,如下所示: input type='button' 简介 当input标签中 type='button'时,代 ...
- python基础:廖雪峰的官方网站Python(部分)笔记
文章目录 1. 数据类型和变量 2. 编码和输出 2.1 编码 2.2 格式化输出 3. 函数 3.1 函数 3.2 函数参数 4. 数据结构及算法 4.1 数据结构 4.2 列表生成式 4.3 生成 ...
- 开源的HTML5前端框架Amaze UI发布,推进mobile first前端Web方案
2014年6月,云适配发布了开源的HTML5前端框架Amaze UI,目前处于内测期.根据Amaze UI的官网介绍,该框架的特点是mobile first,解决Web应用从PC向多屏适配的问题,兼容 ...
- UI控件之Button(按钮)和ImageButton(图像按钮)
(一)概述 Button普通按钮跟ImageButton图像按钮的用法基本类似,至于图片相关的则和后面的ImageView相同,所以本节只对Button的用法进行讲解,另外Button是TextVie ...
- Vue中Button按钮基础用法及参数属性
根据颜色.形状.图标等等设计美观的按钮 使用type.plain.round和circle属性来定义 Button 的样式. <el-row><el-button>默认按钮&l ...
- 基础复习——Button——按钮——触发事件——监听器(单独公共)——点击事件与长按事件——禁用恢复按钮...
按钮控件Button由TextView派生而来,它们之间的区别有: (1)Button拥有默认的按钮背景,而TextView默认无背景: (2)Button的内部文本默认居中对齐,而TextView的 ...
- Android基础:Button按钮
Button按钮 StateListDrawable简介 Button事件 Button注意事项 StateListDrawable简介 在Android中,我们经常通过按钮的状态去改变按钮的背景色和 ...
- 【Android 】零基础到飞升 | Button(按钮)与ImageButton(图像按钮)
2.3.3 Button(按钮)与ImageButton(图像按钮) 本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮: 其实I ...
最新文章
- python构建cnn图片匹配_tensorflow搭建cnn人脸识别训练+识别代码(python)
- 论文笔记 Hierarchical Reinforcement Learning for Scarce Medical Resource Allocation
- php print_r this,PHP 打印函数之 print print_r
- 【MM配置】Pricing 采购定价过程总览
- 小米平板2更新bios版本_【军团战争5.25】新版本更新预告第一弹,2级兵3次升级!...
- 如何在前端进行短信接口和语音验证接口的使用
- guid主键 oracle_使用GUID作为数据库主键的测试
- python实现离线翻译_10分钟教你用Python实现微信翻译机器人
- 表单和字都居中_APP 分享 | 6 款黑科技工具,低调收藏,每一款都很强大!
- 【转】SQLServer数据库还原数据库后因孤立用户问题导致无法登陆的处理
- 系统分析师资料_超全的“数据分析”自学资料,数据时代必get技能!
- java kinect 人体识别_基于三个kinect的人体建模
- dubbo负载均衡代码分析1(leastactive策略)
- 软件是指示计算机运行所需的程序,计算机文化基础知识点
- anaconda conda环境管理命令
- android气泡样式图片,Android实现三角形气泡效果方式汇总
- 【物联网】AT指令|AT返回错误|AT 指令 收发短信和GPRS上网 SIM508/548
- Oracle卸载卸不干净,Oracle彻底删除的办法(winxp)
- 笔试逻辑智力题数列找规律小结
- Java 程序员开发常用的工具
热门文章
- 天梯赛L2-6 树的遍历
- php java转换为字符串格式_php array 转json及java 转换 json数据格式操作示例
- localhost提示没有入口_管家婆财贸双全连接失败,服务器端没有找到加密狗
- 天然气故障代码大全_美的、格力中央空调常见故障代码大全
- sqlite3 加密版本 下载_【平凡666】单机游戏管理器(支持未加密游戏管理) - 游戏相关...
- 【持续更新】实用算法小点总结(怕忘QAQ)
- 【CF-gym101964:B】Broken Watch(找规律+推导+自然溢出/java大数)
- 【Linux】Mac在VMware中安装ubuntu教程和安装时遇到键盘鼠标失效等问题的解决方案
- 非平衡数据(imbalanced data)简单介绍
- k touch for android,k touch for android新十年