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> 里面的代码片段

  添加 .am-pre-scrollable 限制代码块高度,默认为 24rem

6、表单

  <select> 是一个比较奇葩的元素,长得丑还不让人给它打扮。

  <input type="file"> 也是 CSS 啃不动的一块骨头,如果实在看不惯原生的样式,一般的做法是把文件选择域设为透明那个,覆盖在其他元素。存在的问题是不会显示已经选择的文件,对用户不够友好,需要配合 JS 使用(文档)

  在容器上添加 .am-form ,容器里的子元素才会应用 Amaze UI 定义的样式

  fieldset表单分块

  针对fieldset表单分块的<legend>表单标题</legend>

7、表单样式:am-form-field

  表单形状:am-radius、am-round

  给 <input> 添加 disabled 属性以禁用表单元素。或:<fieldset disabled>

  am-form-group 表单分组

  <a> 元素设置禁用状态需要加上 .am-disabled class。

8、表单排列

  水平排列:在 <form> 添加 .am-form-horizontal class 并结合网格系统使用。

  行内排列:在外围容器上添加 .am-form-inline。 注意: 行内排列的元素并没有设置右边距,默认使用 inline-block 元素的间距,压缩 HTML 后行内表单元素的右边距会消失,需要自行处理。

9、表单icon

  表单 group 元素上添加 .am-form-icon,依赖 icon 组件。

  <div class="am-form-group am-form-icon">

    <i class="am-icon-calendar"></i>

      <input type="text" class="am-form-field" placeholder="日期">

10、单个域的大小 适用于没有 <label> 的表单

  am-input-lg

  am-input-sm

  在 .am-form-group 的基础上添加以下 class,也可以实现对表单大小的设置

  .am-form-group-sm

  .am-form-group-lg

  可输入类型的 input 元素上需要添加 .am-form-field,不需要再添加 .am-input-sm 此类的 class。

11、输入框组

  使用 .am-form-set 嵌套一系列 <input> 元素

12、图片

  基础样式中取消了图片最大宽度设置,新增了 .am-img-responsive class。

  为<img>元素设置不同的 class,增强其样式。.am-radius 圆角 .am-round 椭圆 .am-circle 圆形

  .am-img-thumbnail 边框

时间: 2024-11-03 21:45:28

AmazeUI 框架知识点-元素的相关文章

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  

.Net Mvc框架知识点

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

CodeIgniter框架——知识点汇总

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

(selenium+python)_UI自动化04_定位iframe框架内元素

什么是iframe? iframe是HTML标签,作用是文档中的文档(即在当前 HTML 文档中嵌入另一个HTML文档),或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架). iframe框架内元素定位 selenium中定位iframe内元素,需先切换到iframe框架内,然后再进行元素定位,否则会报错找不到元素. 一.iframe常用切换 driver.switch_to_frame(iframe_element) # 切换至iframe drive

前端常用框架知识点收集

前端组件库 搭建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

AmazeUI 点击元素显示全屏

无论是点击图片还是按钮来显示全屏,具体代码如下: 点击按钮: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> <script ty

javascript_获取iframe框架中元素节点的属性值

1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 2. JS原生方法获得iframe的window对象 document.getElementById("ifr").contentWindow; 3. 获取iframe框架的思路: (1)找到iframe框架 (2)获取iframe框架的window对象 (3)获取w

框架----Django框架知识点整理

一.cbv 1 cbv(class-base-view) 基于类的视图 2 fbv(func-base-view) 基于函数的视图 a.基本演示 1 urlpatterns = [ 2 3 url(r'^login.html$', views.Login.as_view()), 4 ] urls.py 1 from django.views import View 2 3 class Login(View): 4 """ 5 get 查 6 post 创建 7 put 更新

学习使用Robot Framework自动化测试框架-web元素定位

转:http://blog.csdn.net/u012145166/article/details/50342569 1.name和id 其中使用到了name和id定位.但有时候由于开发人员的疏忽或者开发习惯的问题,会漏写name或者id属性.或者有时候如果页面很庞大,元素很多,也有可能出现两个一不小心定义了两个重复的id的情况.这样就无法进行唯一定位了. 2.xpath 前面所说的id和name属性就相当于是一个人的姓名.你可以通过姓名找到他.但是同名同姓的问题是存在的,而且有时候也不知道他的