AmazeUI HTML元素
按钮Button
am-btn-xx(default、primary、secondary、success、warning、danger、link)
am-radius 圆角按钮
am-round 椭圆形按钮
am-active 激活状态
am-disabled 禁用状态
按钮尺寸 am-btn-xl am-btn-lg am-btn-default am-btn-sm am-btn-xs
am-btn-block 块级显示
按钮Icon
am-icon-cog设置 am-icon-shopping-cart购物车 am-icon-spinner am-icon-spi加载中 am-icon-cloud-download下载
Code
行内代码<code></code>
代码片段<pre></pre>
代码块高度<pre class="am-pre-scrollable"> </pre>
Form
块级显示时在容器上添加am-checkbox、am-radio
行内显示时在容器上添加am-checkbox-inline、am-radio-inline
<div class="am-form-group am-form-file">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
<input type="file" multiple>
</div>
<div class="am-form-group am-form-file">
<i class="am-icon-cloud-upload"></i> 选择要上传的文件
<input type="file" multiple>
</div>
在容器上添加.am-form class,容器里的子元素才会应用Amaze UI定义的样式。
圆角表单域 am-form-filed am-radius am-radius
椭圆表单域 am-form-filed am-round
给<fieldset>元素添加disabled属性,禁用所有的子元素
禁用链接 am-disabled
水平表单 am-form-horizontal
行内排列 am-form-inline 行内排列的元素并没有设置右边距,默认使用inline-blcok元素的间距,压缩HTML后行内表单元素的右边距会消失,需自行处理。
表单group元素加上am-form-icon,依赖icon组件
<form action="" class="am-form am-form-inline">
<div class="am-form-group am-form-icon">
<i class="am-icon-calendar"></i>
<input type="text" class="am-form-field" placeholder="日期">
</div>
<div class="am-form-group am-form-icon">
<i class="am-icon-clock-o"></i>
<input type="text" class="am-form-field" placeholder="时间">
</div>
</form>
验证状态
<form action="" class="am-form">
<div class="am-form-group am-form-success am-form-icon am-form-feedback">
<label class="am-form-label" for="doc-ipt-success">验证成功</label>
<input type="text" id="doc-ipt-success" class="am-form-field">
<span class="am-icon-check"></span>
</div>
<div class="am-form-group am-form-warning">
<label class="am-form-label" for="doc-ipt-warning">验证警告</label>
<input type="text" id="doc-ipt-warning" class="am-form-field">
</div>
<div class="am-form-group am-form-error">
<label class="am-form-label" for="doc-ipt-error">验证失败</label>
<input type="text" id="doc-ipt-error" class="am-form-field">
</div>
</form>
带图标的验证:添加am-form-icon和am-form-feedback
<form class="am-form">
<div class="am-form-group am-form-success am-form-icon am-form-feedback">
<input type="text" class="am-form-field" placeholder="验证成功">
<span class="am-icon-check"></span>
</div>
<div class="am-form-group am-form-warning am-form-icon am-form-feedback">
<input type="text" class="am-form-field" placeholder="验证警告">
<span class="am-icon-warning"></span>
</div>
<div class="am-form-group am-form-error am-form-icon am-form-feedback">
<input type="text" class="am-form-field" placeholder="验证失败">
<span class="am-icon-times"></span>
</div>
</form>
单个域的大小:am-input-lg、am-input-sm
组大小 在am-form-group的基础上添加了am-form-group-sm和am-form-group-lg,可以实现对表达大小的设置。
使用am-form-set嵌套一些列<input>元素。
<div class="am-g">
<div class="am-u-md-8 am-u-sm-centered">
<form class="am-form">
<fieldset class="am-form-set">
<input type="text" placeholder="取个名字">
<input type="text" placeholder="设个密码">
<input type="email" placeholder="填下邮箱">
</fieldset>
<button type="submit" class="am-btn am-btn-primary am-btn-block">注册个账号</button>
</form>
</div>
</div>
demo
<form class="am-form">
<fieldset>
<legend>表单标题</legend>
<div class="am-form-group">
<label for="doc-ipt-email-1">邮件</label>
<input type="email" class="" id="doc-ipt-email-1" placeholder="输入电子邮件">
</div>
<div class="am-form-group">
<label for="doc-ipt-pwd-1">密码</label>
<input type="password" class="" id="doc-ipt-pwd-1" placeholder="设置个密码吧">
</div>
<div class="am-form-group">
<label for="doc-ipt-file-1">原生文件上传域</label>
<input type="file" id="doc-ipt-file-1">
<p class="am-form-help">请选择要上传的文件...</p>
</div>
<div class="am-form-group am-form-file">
<label for="doc-ipt-file-2">Amaze UI 文件上传域</label>
<div>
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
</div>
<input type="file" id="doc-ipt-file-2">
</div>
<div class="am-checkbox">
<label>
<input type="checkbox"> 复选框,选我选我选我
</label>
</div>
<div class="am-radio">
<label>
<input type="radio" name="doc-radio-1" value="option1" checked>
单选框 - 选项1
</label>
</div>
<div class="am-radio">
<label>
<input type="radio" name="doc-radio-1" value="option2">
单选框 - 选项2
</label>
</div>
<div class="am-form-group">
<label class="am-checkbox-inline">
<input type="checkbox" value="option1"> 选我
</label>
<label class="am-checkbox-inline">
<input type="checkbox" value="option2"> 同时可以选我
</label>
<label class="am-checkbox-inline">
<input type="checkbox" value="option3"> 还可以选我
</label>
</div>
<div class="am-form-group">
<label class="am-radio-inline">
<input type="radio" value="" name="docInlineRadio"> 每一分
</label>
<label class="am-radio-inline">
<input type="radio" name="docInlineRadio"> 每一秒
</label>
<label class="am-radio-inline">
<input type="radio" name="docInlineRadio"> 多好
</label>
</div>
<div class="am-form-group">
<label for="doc-select-1">下拉多选框</label>
<select id="doc-select-1">
<option value="option1">选项一...</option>
<option value="option2">选项二.....</option>
<option value="option3">选项三........</option>
</select>
<span class="am-form-caret"></span>
</div>
<div class="am-form-group">
<label for="doc-select-2">多选框</label>
<select multiple class="" id="doc-select-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="am-form-group">
<label for="doc-ta-1">文本域</label>
<textarea class="" rows="5" id="doc-ta-1"></textarea>
</div>
<p><button type="submit" class="am-btn am-btn-default">提交</button></p>
</fieldset>
</form>
图片
响应式图片 am-img-responsive
圆角图片 am-radius
椭圆角图片 am-round
圆形 am-cricle
边框 am-img-thumbnail
表格(am-table)
基本边框 am-table-bordered
圆角边框 am-table-bordered am-table-radius 外层圆角边框通过box-shadow实现
单元格状态 am-active(激活状态) am-disabled(禁用) am-primary(蓝色高亮) am-success(绿色高亮) am-warning(橙色高亮) am-danger(红色高亮)
斑马纹效果 am-table-striped
状态 am-table-hover
紧凑 am-table-compact 调整padding显得单元格更紧凑
响应式表格 am-text-nowrap(禁止文字换行) am-scrollable-horizontal(内容超出容器宽度时显示水平滚动条)
单元格水平居中对齐 am-table-centered
单元格中文字垂直居中对齐 am-text-middle
AmazeUI HTML元素的更多相关文章
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- amazeui学习笔记--css(HTML元素4)--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- amazeui学习笔记--css(HTML元素2)--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css(HTML元素1)--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- AmazeUI 框架知识点-元素
1.按钮 .am-btn 圆角按钮 .am-radius 椭圆形按钮 .am-round 按钮激活状态 .am-active 禁用状态 .am-disabled 2.按钮尺寸.am-btn-xl . ...
- AmazeUI布局
AmazeUI使用了12列的响应式网络系统.使用时需在外围容器上添加.am-g class,在列上添加.am-u-[sm|md|lg]-[1-12] class,然后根据不同的屏幕需求设置不同的宽度. ...
- AmazeUI基本样式
AmazeUI是一个轻量级.Mobile first的前端框架,基于开源社区流行的前端框架编写. Normalize AmazeUI使用了normalize.css,但做了些调整:html添加了-we ...
- react搭配amazeui环境搭建
1.安装node https://nodejs.org/en/download/ 查看node npm版本 2.安装react 创建新的react单页面应用 npm install -g cre ...
随机推荐
- hdu----(5047)Sawtooth(大数相乘+数学推导)
Sawtooth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- C语言知识整理(3):内存管理(详细版)
在计算机系统,特别是嵌入式系统中,内存资源是非常有限的.尤其对于移动端开发者来说,硬件资源的限制使得其在程序设计中首要考虑的问题就是如何有效地管理内存资源.本文是作者在学习C语言内存管理的过程中做的一 ...
- 绝对应当收藏的10个实用HTML5代码片段(转)
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...
- das,nas,san区别——大型数据中心会用NAS+SAN软硬结合思路
DAS(Direct Access Storage-直接连接存储)是指将存储设备通过SCSI接口或光纤通道直接连接到一台计算机上.NAS(Network Attached Storage网络连接存储) ...
- [工作需求]linux常用命令以及vim常用命令
一. Linux 常用命令 mkdir dirname新建文件夹 cd ~ 进入自己的家目录 cd dirname 进入名字为dirname的目录: l 显示当前文件夹下的文件 ...
- jquery中ajax常用方法
index.html: <h3>$.get(url, [data], [callback], [type])<br/> $.post(url, [data], [callbac ...
- RewriteRule参数
RewriteCond指令格式 [说明]定义重写发生的条件 [语法]RewriteCond TestString CondPattern [flags] RewriteCond指令定义一条规则条件.在 ...
- Ubuntu用户相关基本命令
Linux是一个用户权限管理得很严格的系统,Ubuntu作为最受欢迎的桌面发行版,提供了简单易用的图形界面工具来管理用户,但是命令行工具往往更强大,用得熟练的话效率会更高.用户管理命令常用的有如下几个 ...
- POJ 3522 Slim Span 最小生成树,暴力 难度:0
kruskal思想,排序后暴力枚举从任意边开始能够组成的最小生成树 #include <cstdio> #include <algorithm> using namespace ...
- No module ata_piix found的解决方法
在一台as4u6的机器上升级内核到2.6.18时,最好make install的时候报了一个WARNING: No module ata_piix found for 2.6.18, 开始没有在意,重 ...