amazeui学习笔记--css(常用组件3)--按钮组Button-group
amazeui学习笔记--css(常用组件3)--按钮组Button-group
一、总结
1、按钮组用法:把一系列要使用的 .am-btn
按钮放入 .am-btn-group
。
2、按钮工具栏:将 .am-btn-group
放进 .am-btn-toolbar
,实现工具栏效果。
3、按钮组大小:给 .am-btn-group
增加 class .am-btn-group-lg
或 .am-btn-group-sm
或 .am-btn-group-xs
改变按钮大小。
4、垂直排列: 使用 .am-btn-group-stacked
使按钮垂直排列显示。这句话占的是an-btn-group的位置
<div class="am-btn-group-stacked">
<button type="button" class="am-btn am-btn-default">Button</button>
...
</div>
5、自适应宽度:添加 .am-btn-group-justify
class 让按钮组里的按钮平均分布,填满容器宽度。 <div class="am-btn-group am-btn-group-justify">
6、下拉框:ul包着li的形式:ul对应的class为 am-dropdown-content
<ul class="am-dropdown-content">各种li</ul>
二、按钮组Button-group
Button-group
组合 Button 元素。
基本使用
把一系列要使用的 .am-btn
按钮放入 .am-btn-group
。
<div class="am-btn-group">
<button type="button" class="am-btn am-btn-default">左手</button>
...
</div>
<div class="am-btn-group">
<button type="button" class="am-btn am-btn-primary am-radius">左手</button>
...
</div>
<div class="am-btn-group">
<button type="button" class="am-btn am-btn-primary am-round">左手</button>
...
</div>
``
按钮工具栏
将 .am-btn-group
放进 .am-btn-toolbar
,实现工具栏效果。
<div class="am-btn-toolbar">
<div class="am-btn-group">...</div>
<div class="am-btn-group">...</div>
<div class="am-btn-group">...</div>
</div>
按钮组大小
给 .am-btn-group
增加 class .am-btn-group-lg
或 .am-btn-group-sm
或 .am-btn-group-xs
改变按钮大小。
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-lg">...</div>
</div>
<div class="am-btn-toolbar">
<div class="am-btn-group">...</div>
</div>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-sm">...</div>
</div>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">...</div>
</div>
</div>
垂直排列
使用 .am-btn-group-stacked
使按钮垂直排列显示。
<div class="am-btn-group-stacked">
<button type="button" class="am-btn am-btn-default">Button</button>
...
</div>
自适应宽度
添加 .am-btn-group-justify
class 让按钮组里的按钮平均分布,填满容器宽度。
注意: 只适用 。<a>
元素,<button>
不能应用 display: table-cell
样式
使用 flexbox
实现,只兼容 IE 10+ 及其他现代浏览器。
<div class="am-btn-group am-btn-group-justify">
<a class="am-btn am-btn-default" role="button">左手</a>
...
</div>
结合下拉组件使用
下面的演示需要结合 Dropdown 使用。
按钮下拉菜单
<div class="am-btn-group">
<button class="am-btn am-btn-secondary">下拉按钮</button>
<div class="am-dropdown" data-am-dropdown>
<button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle> <span class="am-icon-caret-down"></span></button>
<ul class="am-dropdown-content">
<li class="am-dropdown-header">标题</li>
<li><a href="#">快乐的方式不只一种</a></li>
<li class="am-active"><a href="#">最荣幸是</a></li>
<li><a href="#">谁都是造物者的光荣</a></li>
<li class="am-disabled"><a href="#">就站在光明的角落</a></li>
<li class="am-divider"></li>
<li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
</ul>
</div>
</div>
按钮上拉菜单
<div class="am-btn-group">
<button class="am-btn am-btn-secondary">上拉按钮</button>
<div class="am-dropdown am-dropdown-up" data-am-dropdown>
<button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle> <span class="am-icon-caret-up"></span></button>
<ul class="am-dropdown-content">
<li class="am-dropdown-header">标题</li>
<li><a href="#">快乐的方式不只一种</a></li>
<li class="am-active"><a href="#">最荣幸是</a></li>
<li><a href="#">谁都是造物者的光荣</a></li>
<li class="am-disabled"><a href="#">就站在光明的角落</a></li>
<li class="am-divider"></li>
<li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
</ul>
</div>
</div>
最新文章
- 解决“chrome提示adobe flash player 已经过期”的小问题
- JDBC查询数据库中的数据
- wifi-mac
- 使用Font Awesome替换你的网站图标
- express html模板项目搭建
- thinkphp 最简单的引入百度编辑器的方法
- JavaScript之canvas
- iOS工程中的info.plist文件
- AVAudioPlayer 播放音频
- 【一天一道LeetCode】#205. Isomorphic Strings
- CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-2设置SSH免密登录
- 常用的三种json软件的使用
- easyUI默认图标的使用
- centos7下安装docker(12.3容器之间的连通性)
- python Rpyc简单使用
- Axure 第一次接触动态面板
- 使用python读写CSV文件
- Android-远程Service
- java使用反射强制给private字段赋值
- attempt to create delete event with null entity
热门文章
- JAVA基础数据类型
- python 爬虫使用
- CSUOJ 1525 Algebraic Teamwork
- vs平台 error link:2019
- socket编程之中的一个:计算机网络基础
- QVBoxLayout移除控件之后没有消失
- Toeplitz matrix 与 Circulant matrix
- Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart). Attachment support is disa
- IDC机房KVM应用案例分析
- SuSe Linux Enterprise Server 10 With Sp2 安装过程图解