amazeui学习笔记--css（HTML元素1）--按钮Button
2024-08-31 18:26:50
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
4、圆角按钮：在默认样式的基础上添加
.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开头
<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>
二、按钮Button
基本使用
默认样式
在要应用按钮样式的元素上添加 .am-btn，再设置相应的颜色。
.am-btn-default- 默认，灰色按钮.am-btn-primary- 蓝色按钮.am-btn-secondary- 浅蓝色按钮.am-btn-success- 绿色按钮.am-btn-warning- 橙色按钮.am-btn-danger- 红色按钮.am-btn-link
Copy
<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.
Copy
默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮
<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>椭圆形按钮
在默认样式的基础上添加 .am-round class.
Copy
默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮
<button type="button" class="am-btn am-btn-default am-round">默认样式</button>按钮状态
激活状态
在按钮上添加 .am-active class。
Copy
<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。
Copy
<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>IE9 会把设置了
disabled 属性的 button 元素文字渲染成灰色并加上白色阴影，CSS 无法控制这个默认样式。按钮尺寸
.am-btn-xl.am-btn-lg.am-btn-default.am-btn-sm.am-btn-xs
Copy
按钮 - xl 按钮 - lg 按钮默认大小 按钮 - sm 按钮 - 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。
Copy
块级显示的按钮块级显示的按钮
<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 组件。
Copy
设置 结账 加载中 下载片片
<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 列表
最新文章
- php实现设计模式之 适配器模式
- Bootstrap <基础二十一>徽章（Badges）
- Head First Html and CSS学习笔记之CSS
- 欲哭无泪的@Autowired注入对象为NULL
- tp中附件上传文件，表单提交
- Android广播机制概述
- opencv学习笔记（03）——遍历图像（迭代器法）
- Python中raw字符串与多行字符串
- Hdu 4514 湫湫系列故事——设计风景线
- Vxworks、QNX、Xenomai、Intime、Sylixos、Ucos等实时操作系统的性能特点
- 建房子之前先挖地基 - Java BlockingQueue理解
- ADODB——RecordSet对象
- win7下elasticsearch5.0 安装head插件
- unity3d 初学者遇到的坑(提醒自己不要范同样的错误)
- 获取JSON对象的属性值
- Calendar and GregorianCalendar
- bmi
- qhfl-9 微信模板消息推送
- 系统编码、文件编码与python系统编码
- python 之 循环语句