AmazeUI 框架知识点-组件

1、Badge

  默认:添加 .am-badge class 到 <div> 或者 <span> 元素。

  圆角:在默认样式的基础上添加 .am-radius class。

  椭圆:在默认样式的基础上添加 .am-round class。

  大小:结合辅助类中的字号 class,改变徽章大小。am-text-sm

2、面包屑导航:

  .am-breadcrumb 默认分隔符  写在父级 ol\ul

  am-breadcrumb am-breadcrumb-slash 斜杠分割

  结合icon  <li><a href="#" class="am-icon-home">首页</a></li>

3、按钮

4、关闭按钮

  在元素上添加 .am-close   形状是&times;

  带边框是:添加 .am-close-alt

  使用 Icon Font   class="am-close am-close-alt am-icon-times"

  hover 旋转  .am-close-spin

5、评论列表 am-comment  (文档)

6、icon图标

  在 HTML 上添加添加 am-icon-{图标名称} class。

  .am-icon-sm放大 150%。。。。

  .am-icon-btn 可以是一个图标按钮

  .am-icon-spin icon旋转

  添加 .am-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题

7、链接列表:

  链接列表:使用 <ul> 结构嵌套链接列表,添加 .am-list

  截断列表:在 <a> 上添加 .am-text-truncate class 可以实现文字超出一行时截断为 ...

  纯文字列表:在 .am-list 的基础上添加 .am-list-static

  列表边框:在容器上添加 .am-list-border class。

  斑马纹:添加 .am-list-striped class。

  添加 Badge  class="am-badge am-badge-success"

  添加 ICON  <i class="am-icon-home am-icon-fw"></i>

8、导航

  导航样式组件,在 <ul> 链接列表中添加 .am-nav class

  <ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度,可以结合网格使用。

  在 .am-nav 的基础上再添加 .am-nav-pills,形成一个水平导航。

  在 .am-nav 的基础上添加 .am-nav-tabs,形成一个标签式的导航。激活的标签在 <li> 上添加.am-active

  宽度自适应:在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度(通过display: table-cell 实现)。

  .am-nav-header 导航标题,直接放在 <li> 中。

  .am-nav-divider 导航分隔线,添加到空的 <li> 上。

9、导航条

  在容器上添加 .am-topbar class,然后按照示例组织所需内容

  在容器上添加 .am-topbar-inverse,调整为背景色为主色调的样式,内部结构同上。

  在 .am-topbar 上添加 .am-topbar-fixed-top class,实现顶部固定。

  在 .am-topbar 上添加 .am-topbar-fixed-bottom class,实现底部固定

10、分页

  分页组件,<ul> / <ol> 添加 .am-pagination class, 包含一系列 <li>。在 <li> 上添加状态 class:

  .am-disabled - 禁用(不可用)

  .am-active - 激活

  居中:在默认样式的基础上添加 .am-pagination-centered class。

  靠右:在默认样式的基础上添加 .am-pagination-right class。

  左右对齐:添加 .am-pagination-prev 及 .am-pagination-next 到 <li>,创建一个仅包含 上一页 和 下一页 的分页组件。

11、进度条:

  进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息。

  <div class="am-progress">

    <div class="am-progress-bar" style="width: 40%">40%</div>

  进度条高度:在 .am-progress 添加 .am-progress-xs .am-progress-sm 可以设置进度条高度。

  进度条条纹:在进度条容器上添加 .am-progress-striped 显示条纹效果,可结合进度条颜色 class 使用。

  进度条动画:进度条容器上添加 .am-active 激活进度条动画(CSS Animation)。

12、缩略图

  在 <img> 添加 .am-thumbnail 类;也可以在 <img> 外面添加一个容器,如 <div><figure><a> 等,再将 class 添加到容器上。

  图片标题:am-thumbnail-caption

  在am-thumbnail内加入.am-caption可以添加任何类型的HTML内容标题、段落、或按钮。

13、css3动画

14、文章

时间: 2024-10-10 13:44:52

AmazeUI 框架知识点-组件的相关文章

AmazeUI 框架知识点-元素

1.按钮  .am-btn 圆角按钮 .am-radius 椭圆形按钮 .am-round 按钮激活状态 .am-active 禁用状态 .am-disabled 2.按钮尺寸.am-btn-xl .am-btn-lg .am-btn-default .am-btn-sm .am-btn-xs 3.块级显示按钮 .am-btn-block 4.按钮 Icon(使用 Icon 之前需先引入 Icon 组件) am-icon-{} 5.代码 使用 <code> 标签的代码. 放在 <pre&

CodeIgniter框架——知识点汇总

NO1.学习要点: 一.CodeIgniter 框架的简介 二.CodeIgniter 框架的安装 三.CodeIgniter 框架的目录结构分析 四.CodeIgniter 框架是如何工作的? 五.CodeIgniter 框架中的控制器.视图.模型及数据库操作 六.CodeIgniter 框架中辅助函数.类库.适配器的学习 七.…… NO2. 一.CodeIgniter 是什么? 1.CodeIgniter 是一个应用程序框架 CodeIgniter 是一个为用 PHP 编写网络应用程序的人员

.Net Mvc框架知识点

https://www.h .Net Mvc框架知识点 一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectControllerFactory) 2.在Global.asax文件中的Application_Start方法中注册该控制器工厂类,示例如下: ControllerBuilder.Current.SetControllerFactory(new I

工作流,WEB框架,UI组件网络收集整理

工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到正文: ? 工作流篇 RoadFlow工作流(收费):                  http://www.cqroad.cn/WorkFlow 驰骋工作流引擎 ccflow                       https://www.oschina.net/p/ccflow YbSof

dwz框架分页组件使用

dwz框架分页组件应用. <div class="panelBar" >     <div class="pages">         <span>显示</span>         <select name="pageSize" onchange="navTabPageBreak({numPerPage: this.value})">             &l

第十九章 Django框架——Admin组件

第十九章 Django框架--Admin组件 一.创建超级用户 二.配置后台管理路由 三.注册admin后台管理页面 四.配置admin后台管理页面 一.创建超级用户 python manage.py createsuperuser 二.配置后台管理路由 url(r'^admin/', include(admin.site.urls)) #默认配置 三.注册admin后台管理页面 admin.py from django.contrib import admin from api import

drf框架 - 序列化组件

drf框架 - 序列化组件 序列化与反序列化 序列化: 将对象序列化成字符串用户传输 反序列化: 将字符串反序列化成对象用于使用 drf的序列化与反序列化 序列化: 将Model类对象序列化成字符串用户传输 反序列化: 将字符串反序列化成Model对象用于使用 Serializer 序列化准备: 模型层: models.py class User(models.Model): SEX_CHOICES = [ [0, '男'], [1, '女'], ] name = models.CharFiel

前端常用框架知识点收集

前端组件库 搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案 前端模块管理器 Bower – A package manager for the w

一句话概括下spring框架及spring cloud框架主要组件

作为java的屌丝,基本上跟上spring屌丝的步伐,也就跟上了主流技术.spring 顶级项目:Spring IO platform:用于系统部署,是可集成的,构建现代化应用的版本平台,具体来说当你使用maven dependency引入spring jar包时它就在工作了.Spring Boot:旨在简化创建产品级的 Spring 应用和服务,简化了配置文件,使用嵌入式web服务器,含有诸多开箱即用微服务功能,可以和spring cloud联合部署.Spring Framework:即通常所