amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button
一、总结
1、button的基本使用:a、am-btn 在要应用按钮样式的元素上添加 .am-btn
,b、颜色 再设置相应的颜色(例如:<button type="button" class="am-btn am-btn-danger">红色按钮</button>
)。
2、a标签做button:各种元素都可以做button,<a class="am-btn am-btn-danger" href="http://www.bing.com" target="_blank">应用按钮样式的链接</a>
3、按钮颜色:btn+颜色
.am-btn-default
- 默认,灰色按钮.am-btn-primary
- 蓝色按钮.am-btn-secondary
- 浅蓝色按钮.am-btn-success
- 绿色按钮.am-btn-warning
- 橙色按钮.am-btn-danger
- 红色按钮.am-btn-link
.am-radius
class. <button type="button" class="am-btn am-btn-default am-radius">默认样式</button>
5、椭圆形按钮: 在默认样式的基础上添加 .am-round
class. <button type="button" class="am-btn am-btn-default am-round">默认样式</button>
6、按钮激活状态:在按钮上添加 .am-active
class。 <a href="#" class="am-btn am-btn-primary am-active" role="button">链接按钮激活状态</a>
7、按钮禁用状态:在按钮上设置 disabled
属性或者添加 .am-disabled
class。 <a href="#" class="am-btn am-btn-default am-disabled">链接按钮禁用状态</a>
8、按钮尺寸:
.am-btn-xl
.am-btn-lg
.am-btn-default
.am-btn-sm
.am-btn-xs
9、块级显示:占一行:<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button>
10、按钮icon:使用 Icon 之前需先引入 Icon 组件(如果没猜错,就是那个字体文件)。 i标签是在button里面的,i标签用来显示图标。以am-icon开头
1 <button class="am-btn am-btn-default"> 2 <i class="am-icon-cog"></i> 3 设置 4 </button> 5 6 <a class="am-btn am-btn-warning" href="#"> 7 <i class="am-icon-shopping-cart"></i> 8 结账 9 </a> 10 11 <button class="am-btn am-btn-default"> 12 <i class="am-icon-spinner am-icon-spin"></i> 13 加载中 14 </button> 15 16 <button class="am-btn am-btn-primary"> 17 下载片片 18 <i class="am-icon-cloud-download"></i> 19 </button>
二、按钮Button
目录
- 基本使用
- 默认样式
- 圆角按钮
- 椭圆形按钮
- 按钮状态
- 激活状态
- 禁用状态
- 按钮尺寸
- 块级显示
- 按钮 Icon
基本使用
默认样式
在要应用按钮样式的元素上添加 .am-btn
,再设置相应的颜色。
.am-btn-default
- 默认,灰色按钮.am-btn-primary
- 蓝色按钮.am-btn-secondary
- 浅蓝色按钮.am-btn-success
- 绿色按钮.am-btn-warning
- 橙色按钮.am-btn-danger
- 红色按钮.am-btn-link
<button type="button" class="am-btn am-btn-default">默认样式</button> <button type="button" class="am-btn am-btn-primary">主色按钮</button> <button type="button" class="am-btn am-btn-secondary">次色按钮</button> <button type="button" class="am-btn am-btn-success">绿色按钮</button> <button type="button" class="am-btn am-btn-warning">橙色按钮</button> <button type="button" class="am-btn am-btn-danger">红色按钮</button> <a class="am-btn am-btn-link">链接</a> <a class="am-btn am-btn-danger" href="http://www.bing.com" target="_blank">应用按钮样式的链接</a>
圆角按钮
在默认样式的基础上添加 .am-radius
class.
<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>
椭圆形按钮
在默认样式的基础上添加 .am-round
class.
<button type="button" class="am-btn am-btn-default am-round">默认样式</button>
按钮状态
激活状态
在按钮上添加 .am-active
class。
链接按钮激活状态 链接按钮激活状态
<button type="button" class="am-btn am-btn-primary am-active">激活状态</button> <button type="button" class="am-btn am-btn-default am-active">激活状态</button> <br > <br > <a href="#" class="am-btn am-btn-primary am-active" role="button">链接按钮激活状态</a> <a href="#" class="am-btn am-btn-default am-active" role="button">链接按钮激活状态</a>
禁用状态
在按钮上设置 disabled
属性或者添加 .am-disabled
class。
链接按钮禁用状态 链接按钮禁用状态
<button type="button" class="am-btn am-btn-primary" disabled="disabled">禁用状态</button> <button type="button" class="am-btn am-btn-default" disabled="disabled">禁用状态</button> <a href="#" class="am-btn am-btn-primary am-disabled">链接按钮禁用状态</a> <a href="#" class="am-btn am-btn-default am-disabled">链接按钮禁用状态</a>
disabled
属性的 button
元素文字渲染成灰色并加上白色阴影,CSS 无法控制这个默认样式。
按钮尺寸
.am-btn-xl
.am-btn-lg
.am-btn-default
.am-btn-sm
.am-btn-xs
按钮 - xl 按钮 - lg 按钮默认大小 按钮 - sm 按钮 - xs
<button class="am-btn am-btn-default am-btn-xl">按钮 - xl</button> <button class="am-btn am-btn-default am-btn-lg">按钮 - lg</button> <button class="am-btn am-btn-default">按钮默认大小</button> <button class="am-btn am-btn-default am-btn-sm">按钮 - sm</button> <button class="am-btn am-btn-default am-btn-xs">按钮 - xs</button> <button class="am-btn am-btn-primary am-btn-xl">按钮 - xl</button> <button class="am-btn am-btn-primary am-btn-lg">按钮 - lg</button> <button class="am-btn am-btn-primary">按钮默认大小</button> <button class="am-btn am-btn-primary am-btn-sm">按钮 - sm</button> <button class="am-btn am-btn-primary am-btn-xs">按钮 - xs</button>
块级显示
添加 .am-btn-block
class。
<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button> <button type="button" class="am-btn am-btn-default am-btn-block">块级显示的按钮</button>
按钮 Icon
使用 Icon 之前需先引入 Icon 组件。
<button class="am-btn am-btn-default"><i class="am-icon-cog"></i> 设置 </button> <a class="am-btn am-btn-warning" href="#"> <i class="am-icon-shopping-cart"></i> 结账 </a> <button class="am-btn am-btn-default"> <i class="am-icon-spinner am-icon-spin"></i> 加载中 </button> <button class="am-btn am-btn-primary"> 下载片片 <i class="am-icon-cloud-download"></i> </button>
Issue 列表
- 建议将链接按钮访问后的样式统一改为白色
转载于:https://www.cnblogs.com/Renyi-Fan/p/9008441.html
amazeui学习笔记--css(HTML元素1)--按钮Button相关推荐
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件4)--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(常用组件1)--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
- amazeui学习笔记--css(常用组件5)--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
最新文章
- ubuntu修改u盘权限_Ubuntu下提示U盘没有些权限的只能读不能写
- C语言编程课后训练,C语言编程课后训练20道题.doc
- 适合前端工作者的iPhone Web App开发
- /etc/sysconfig/network-script/ifcfg-eth0究竟怎么填!!!
- Linux无线网卡的工作模式
- Bootstrap 标签页Tab插件的事件
- 随想录(C++下多线程的创建)
- P2920 [USACO08NOV]时间管理Time Management
- 基于PHP的房屋出租管理系统
- DB2 错误码sqlcode对应表
- [FOI2020WC模拟]看上去很简单
- 如何隐藏电脑中的文件或文件夹?
- 腾讯云租用CentOS 7.2 64
- e当前登录环境异常。为了你的帐号安全,暂时不能登录web微信。你可以通过Windows
- 用python求圆的表面积_【用python写一组类(class)对应各种几何体(正方体,长方体,球,圆柱)的表面积和体积的编码】作业帮...
- Python + qrcode 实现文字转二维码
- 尚硅谷-SpringMVC篇
- 大数据治理工程师_大数据治理遇到的问题有哪些?大数据工程师必须认真应对...
- 计算机各键的知识,联想电脑各功能键的说明
- mysql 当前时间减指定时间_Mysql从日期值减去5分钟
热门文章
- sas 显示本地服务器,sas连接服务器local
- win10系统服务器不能创建对象,win10系统Activex部件不能创建对象的详细技巧
- XCTF-2020CyBRICS部分逆向
- 【rmzt:进击的巨人炫彩主题】
- 六维空间:优秀的教育网IPV6免费资源共享平台!
- python 邮件分类_python_NLP实战之中文垃圾邮件分类
- 算法基础 计算机数学课件,第4章计算机制图数学基础_中国地质大学:数字测图_ppt_大学课件预览_高等教育资讯网...
- Hadoop 中 FileSplit (文件分割器)的简单使用
- java 记牌_JAVA入门之简易扑克牌游戏
- 双核浏览器切换内核(模式)的行为分析