微信扫一扫打赏支持

随笔分类 -  1_amaze ui

摘要:amazeui学习笔记--css(常用组件12)--面板Panel 一、总结 1、面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容放在 .am-panel-bd 里面。 2、带标题的面板:.am-panel-hd 用来放置标题,建 阅读全文
posted @ 2018-05-09 02:33 范仁义 阅读(1261) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件11)--分页Pagination 一、总结 1、分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-pagination class, 包含一系列 <li>。 2、居中对齐:在默认样式的基础上添加 .am-pagination 阅读全文
posted @ 2018-05-09 02:03 范仁义 阅读(504) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件10)--导航条Topbar 一、总结 1、 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容。<header class="am-topbar">导航条内容</header> 2、am-topbar模 阅读全文
posted @ 2018-05-09 01:51 范仁义 阅读(728) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件9)--导航nav 一、总结 1、导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度,可以结合网格使用。还是ul包li的形式。 2、水平导航:在 .am-nav 的基础上再添加 .am-nav 阅读全文
posted @ 2018-05-09 01:39 范仁义 阅读(548) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件8)--列表list 一、总结 1、链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list。还是ui包着li的形式。<ul class="am-list">里面是各种含着a标签的li</ul> 2、文字截断:在 < 阅读全文
posted @ 2018-05-09 01:22 范仁义 阅读(348) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件7)--输入框组Input-group 一、总结 1、使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件。在容器上添加 .am-input-group,在标签文字上添加 .am-input-group-label 2 阅读全文
posted @ 2018-05-09 01:10 范仁义 阅读(2707) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件6)--图标Icon 一、总结 1、关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class。 <span class="am-icon-weixin"> Wechat</span> 2、图标大小: .am-icon-sm,放大 15 阅读全文
posted @ 2018-05-09 01:09 范仁义 阅读(3414) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件5)--评论列表Comment 一、总结 1、am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article也是div来的 2、comment基本结构如下: 3、评论列表:还是ul包着li的形式,<ul cl 阅读全文
posted @ 2018-05-08 23:43 范仁义 阅读(1044) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件4)--关闭按钮Close 一、总结 1、关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用。对 <a> 或者 <button> 添加 .am-close class。<a href="#" class="am-close">&times;</a> 2 阅读全文
posted @ 2018-05-08 23:36 范仁义 阅读(773) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件3)--按钮组Button-group 一、总结 1、按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group 。 2、按钮工具栏:将 .am-btn-group 放进 .am-btn-toolbar,实现工具栏效果。 3、按钮组大 阅读全文
posted @ 2018-05-08 23:10 范仁义 阅读(1408) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一、总结 1、am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrumb 面包屑导航。 2、breadcrumb形式:形式是ol里面内嵌li的形式 3、斜杠分隔符:默认分 阅读全文
posted @ 2018-05-08 23:01 范仁义 阅读(258) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(常用组件1)--小徽章Badge 一、总结 1、am-badge:添加am-badge来声明小徽章对象 <span class="am-badge am-badge-primary">2</span> 2、badge位置:badge可以放在span或者a标签中 <a 阅读全文
posted @ 2018-05-08 22:54 范仁义 阅读(369) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(HTML元素5)--表格Table 一、总结 1、基本样式:am-table;直接模块名 <table class="am-table"> 2、表格边框: 添加 .am-table-bordered 类。 <table class="am-table am-tabl 阅读全文
posted @ 2018-05-08 22:42 范仁义 阅读(2234) 评论(0) 推荐(1)
摘要:amazeui学习笔记--css(HTML元素4)--图片image 一、总结 1、响应式图片:随着页面宽度而变化 .am-img-responsive class。 <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" cl 阅读全文
posted @ 2018-05-08 22:34 范仁义 阅读(368) 评论(0) 推荐(0)
摘要:amazeui页面分析之登录页面 一、总结 1、tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式 2、表单样式:am-form到am-form-group的形式 二、登录页面 截图: 代码: 阅读全文
posted @ 2018-05-08 17:33 范仁义 阅读(778) 评论(0) 推荐(0)
摘要:amazeui-datatables(登录注册界面用到) 一、总结 amazeui-datatables:DataTables 插件 Amaze UI 集成,只修改了样式和默认显示语言,其他参数同官方版。 二、amazeui-datatables(登录注册界面用到) DataTables 插件 Am 阅读全文
posted @ 2018-05-08 17:24 范仁义 阅读(1405) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(HTML元素3)--表单Form 一、总结 1、form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式。 am-form. <form class="am-form"> 2、单选复选框:可以做成块级和行内元 阅读全文
posted @ 2018-05-08 16:36 范仁义 阅读(1806) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(HTML元素2)--代码Code 一、总结 1、行内代码:code标签<code> 2、代码片段:pre标签<pre> 3、限制代码块高度:添加 .am-pre-scrollable 限制代码块高度,默认为 24rem。是在pre标签里面加的class。 4、参考链 阅读全文
posted @ 2018-05-08 16:20 范仁义 阅读(238) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(HTML元素1)--按钮Button 一、总结 1、button的基本使用:a、am-btn 在要应用按钮样式的元素上添加 .am-btn,b、颜色 再设置相应的颜色(例如:<button type="button" class="am-btn am-btn-dan 阅读全文
posted @ 2018-05-08 15:26 范仁义 阅读(3048) 评论(0) 推荐(0)
摘要:amazeui学习笔记--css(布局相关3)--辅助类Utility 一、总结 1、元素清除浮动: 添加 am-cf 这个 class 即可 2、水平滚动: .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。 <div class="am-scrollable- 阅读全文
posted @ 2018-05-08 14:42 范仁义 阅读(460) 评论(0) 推荐(0)