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的位置

...

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

基本使用

把一系列要使用的 .am-btn 按钮放入 .am-btn-group 。

Copy

左手猪手右手

按钮工具栏

将 .am-btn-group 放进 .am-btn-toolbar，实现工具栏效果。

Copy

按钮组大小

给 .am-btn-group 增加 class .am-btn-group-lg 或 .am-btn-group-sm 或 .am-btn-group-xs 改变按钮大小。

Copy

垂直排列

使用 .am-btn-group-stacked 使按钮垂直排列显示。

Copy

劳资是个按钮劳资是个按钮劳资是个按钮劳资是个按钮

...

自适应宽度

添加 .am-btn-group-justify class 让按钮组里的按钮平均分布，填满容器宽度。

~~注意：只适用 <a> 元素，<button> 不能应用 display: table-cell 样式~~。

使用 flexbox 实现，只兼容 IE 10+ 及其他现代浏览器。

Copy


       
      左手 ...

结合下拉组件使用

下面的演示需要结合使用。

按钮下拉菜单

Copy

下拉按钮


       
       
       
        
        
        标题
 
        快乐的方式不只一种
 
        最荣幸是
 
        谁都是造物者的光荣
 
        就站在光明的角落
 
        
 
        天空海阔 要做最坚强的泡沫

按钮上拉菜单

Copy

上拉按钮


       
       
       
        
        
        标题
 
        快乐的方式不只一种
 
        最荣幸是
 
        谁都是造物者的光荣
 
        就站在光明的角落
 
        
 
        天空海阔 要做最坚强的泡沫