随笔分类 - 1_amaze ui
摘要：amazeui学习笔记--css（常用组件12）--面板Panel 一、总结 1、面板基本样式：默认的 .am-panel 提供基本的阴影和边距，默认边框添加 .am-panel-default，内容放在 .am-panel-bd 里面。 2、带标题的面板：.am-panel-hd 用来放置标题，建
阅读全文
摘要：amazeui学习笔记--css（常用组件11）--分页Pagination 一、总结 1、分页使用：还是ul包li的形式： 分页组件，<ul> / <ol> 添加 .am-pagination class， 包含一系列 <li>。 2、居中对齐：在默认样式的基础上添加 .am-pagination
阅读全文
摘要：amazeui学习笔记--css（常用组件10）--导航条Topbar 一、总结 1、 导航条：就是页面最顶端的导航条：在容器上添加 .am-topbar class，然后按照示例组织所需内容。<header class="am-topbar">导航条内容</header> 2、am-topbar模
阅读全文
摘要：amazeui学习笔记--css（常用组件9）--导航nav 一、总结 1、导航基本使用：<ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度，可以结合网格使用。还是ul包li的形式。 2、水平导航：在 .am-nav 的基础上再添加 .am-nav
阅读全文
摘要：amazeui学习笔记--css（常用组件8）--列表list 一、总结 1、链接列表：就是多个链接在一起组成的列表， 使用 <ul> 结构嵌套链接列表，添加 .am-list。还是ui包着li的形式。<ul class="am-list">里面是各种含着a标签的li</ul> 2、文字截断：在 <
阅读全文
摘要：amazeui学习笔记--css（常用组件7）--输入框组Input-group 一、总结 1、使用：Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。在容器上添加 .am-input-group，在标签文字上添加 .am-input-group-label 2
阅读全文
摘要：amazeui学习笔记--css（常用组件6）--图标Icon 一、总结 1、关注用法即可：在 HTML 上添加添加 am-icon-{图标名称} class。 <span class="am-icon-weixin"> Wechat</span> 2、图标大小： .am-icon-sm，放大 15
阅读全文
摘要：amazeui学习笔记--css（常用组件5）--评论列表Comment 一、总结 1、am-comment：使用am-comment来声明评论对象，这个是放在article里面的，虽然article也是div来的 2、comment基本结构如下： 3、评论列表：还是ul包着li的形式，<ul cl
阅读全文
摘要：amazeui学习笔记--css（常用组件4）--关闭按钮Close 一、总结 1、关闭按钮基本用法：关闭按钮样式，可以结合其他不同组件使用。对 <a> 或者 <button> 添加 .am-close class。<a href="#" class="am-close">×</a> 2
阅读全文
摘要：amazeui学习笔记--css（常用组件3）--按钮组Button-group 一、总结 1、按钮组用法：把一系列要使用的 .am-btn 按钮放入 .am-btn-group 。 2、按钮工具栏：将 .am-btn-group 放进 .am-btn-toolbar，实现工具栏效果。 3、按钮组大
阅读全文
摘要：amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb 一、总结 1、am-breadcrumb：用am-breadcrumb来声明面包屑导航控件，.am-breadcrumb 面包屑导航。 2、breadcrumb形式：形式是ol里面内嵌li的形式 3、斜杠分隔符：默认分
阅读全文
摘要：amazeui学习笔记--css（常用组件1）--小徽章Badge 一、总结 1、am-badge：添加am-badge来声明小徽章对象 <span class="am-badge am-badge-primary">2</span> 2、badge位置：badge可以放在span或者a标签中 <a
阅读全文
摘要：amazeui学习笔记--css（HTML元素5）--表格Table 一、总结 1、基本样式：am-table；直接模块名 <table class="am-table"> 2、表格边框： 添加 .am-table-bordered 类。 <table class="am-table am-tabl
阅读全文
摘要：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
阅读全文
摘要：amazeui页面分析之登录页面 一、总结 1、tpl命名空间：tpl命名空间的样式都是从app.css里面来的，app.css用用来移动网站开发的样式 2、表单样式：am-form到am-form-group的形式 二、登录页面 截图： 代码：
阅读全文
摘要：amazeui-datatables（登录注册界面用到） 一、总结 amazeui-datatables：DataTables 插件 Amaze UI 集成，只修改了样式和默认显示语言，其他参数同官方版。 二、amazeui-datatables（登录注册界面用到） DataTables 插件 Am
阅读全文
摘要：amazeui学习笔记--css（HTML元素3）--表单Form 一、总结 1、form样式使用：在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。 am-form. <form class="am-form"> 2、单选复选框：可以做成块级和行内元
阅读全文
摘要：amazeui学习笔记--css（HTML元素2）--代码Code 一、总结 1、行内代码：code标签<code> 2、代码片段：pre标签<pre> 3、限制代码块高度：添加 .am-pre-scrollable 限制代码块高度，默认为 24rem。是在pre标签里面加的class。 4、参考链
阅读全文
摘要：amazeui学习笔记--css（HTML元素1）--按钮Button 一、总结 1、button的基本使用：a、am-btn 在要应用按钮样式的元素上添加 .am-btn，b、颜色 再设置相应的颜色（例如：<button type="button" class="am-btn am-btn-dan
阅读全文
摘要：amazeui学习笔记--css（布局相关3）--辅助类Utility 一、总结 1、元素清除浮动： 添加 am-cf 这个 class 即可 2、水平滚动： .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条。 <div class="am-scrollable-
阅读全文
浙公网安备 33010602011771号