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>
amazeui学习笔记--css(常用组件3)--按钮组Button-group的更多相关文章
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(常用组件7)--输入框组Input-group
amazeui学习笔记--css(常用组件7)--输入框组Input-group 一.总结 1.使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件.在容器上添 ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
随机推荐
- Asp.Net Core 之 appsettings.json
原文:Asp.Net Core 之 appsettings.json appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.con ...
- Android的SQLite的增删查改
原创作品,允许转载,转载时请务必声明作者信息和本声明.http://www.cnblogs.com/zhu520/p/8343675.html 本人小白,那个大神看到有问题可指出,谢谢.... 一:s ...
- qt获取磁盘序列号
#include "windows.h" QString lpRootPathName = "c:\\"; LPTSTR lpVolumeNameBuffer= ...
- [Parcel] Bundle a React App with Parcel
Parcel comes in as the new cool kid in the bundlers world. Unlike other bundlers which take lots of ...
- JSONArray和JSONObject的简单使用
一.为什么要使用JSONArray和JSONObject 1.后台 -->前台 能够把java对象和集合转化成json字符串格式,这样在前台的ajax方法中能够直接转化成json对象使用 ,从后 ...
- 69.类型后缀,重载操作符""
#include <iostream> using namespace std; class myclass { public: int num; int num2; public: my ...
- python hmac 加密
python2 : key 是秘钥 类型为 str msg 要加密的文件 str digestmod 要加密的方式 python3: key 是秘钥 类型为 byte msg 要加密的文件 byte ...
- 今日SGU 5.2
SGU123 题意:求和 收获:无 #include<bits/stdc++.h> #define de(x) cout<<#x<<"="< ...
- Windows学习总结(5)——【IIS建站】Windows10怎么打开站点服务?
从Windows8开始,界面发生了很大的变动,再到Windows10,仍然有不小的变动,鉴于以后Windows10会成为主流,我们姑且介绍下Windows10建站的方法,虽然它并不是专业的服务器系统, ...
- IE兼容性开发的笔记
当前项目组开发的产品对外承诺支持IE9和IE11,但在推广应用过程中发现存在相当比例的用户实际上还在使用IE8.而这相当比例中的用户还包含了大部分的公司领导.为了满足公司内部各阶层人士体验我们产品的诉 ...