AUI框架的介绍和使用

简单来说，AUI框架就是一个用于移动端开发的前端框架，能够为你的移动端开发节省很多时间，并且为你提供好看的样式和更好的用户体验。如果想要进AUI官网查看详细的介绍，请点这里。

作为一个前端程序员，会使用框架是必须的。框架让你的代码更简洁。下面来介绍一下AUI框架的使用过程。

第一步：下载AUI2.1

这是AUI框架的官网，首先我们需要点击下载AUI2.1按钮.下载的是一个压缩包，将解压后文件存放进你的项目里。如下图所示。

第二步：在项目中引用AUI

你需要在你的页面中引入AUI文件，代码如下：

<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css" />
<script type="text/javascript" src="aui-20170109-v2.1/script/api.js"></script>

只有在页面中加入这两行代码，（如果使用的样式不涉及到JS特效，可以只引用aui.css文件）。

第三步：正式使用AUI

就是正式使用AUI框架来完成你的项目。在此过程中需要查阅AUI2.0文档。在官网中也提供了AUI2.0文档的链接，在右上角的文档中点击2.x文档即可。该文档详细描述了各种样式的使用方法。在此处举个简单的例子。

<div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">默认按钮(info)</div>

这样一行简单的代码，就可以定义出一个好看的按钮样式并且自带点击样式，效果如下图：

如果需要用到如弹出框，图片轮播等效果时，还要引入其对应的js文件。具体可以在官网提供的AUI2.0文档中查看并使用。

本人为JS实习生一枚，不断学习，不断进步。欢迎各位前辈批评指教。

AUI框架的介绍和使用相关推荐

H5移动开发AUI框架入门---博客园老牛大讲堂
大家都知道H5可以开发移动端的页面,网上提供的移动端的开发都有很多.因为我学习了AUI框架,所以我这里介绍一下移动端AUI框架.--博客园老牛大讲堂一.AUI框架是什么?---博客园老牛大讲堂 AU ...
NET Core微服务之路：自己动手实现Rpc服务框架，基于DotEasy.Rpc服务框架的介绍和集成...
原文:NET Core微服务之路:自己动手实现Rpc服务框架,基于DotEasy.Rpc服务框架的介绍和集成本篇内容属于非实用性(拿来即用)介绍,如对框架设计没兴趣的朋友,请略过. 快一个月没有写博 ...
Django - Django框架简单介绍
Django框架简单介绍本文地址: http://blog.csdn.net/caroline_wendy/article/details/29172271 1. 介绍 Django是一个开放源码 ...
python nose测试框架全面介绍十---用例的跳过
又来写nose了,这次主要介绍nose中的用例跳过应用,之前也有介绍,见python nose测试框架全面介绍四,但介绍的不详细.下面详细解析下 nose自带的SkipTest 先看看nose自带的S ...
.Net Core应用框架Util介绍（四）
上篇介绍了Util Angular Demo的目录结构和运行机制,本文介绍Util封装Angular的基本手法及背后的动机. Angular应用由Ts和Html两部分构成,本文介绍第一部分. Angu ...
.Net Core应用框架Util介绍（三）
上篇.Net Core应用框架Util介绍(二)介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构在VS上打开Util De ...
.Net Core应用框架Util介绍（二）
Util的开源地址 https://github.com/dotnetcore/util Util的开源协议 Util以MIT协议开源,这是目前最宽松的开源协议,你不仅可以用于商业项目,还能把Util ...
python单元测试框架unittest介绍和使用_Python+Selenium框架设计篇之-简单介绍unittest单元测试框架...
前面文章已经简单介绍了一些关于自动化测试框架的介绍,知道了什么是自动化测试框架,主要有哪些特点,基本组成部分等.在继续介绍框架设计之前,我们先来学习一个工具,叫unittest. unittest是一 ...
Spring框架Runtime介绍（导包）
一.Spring框架Runtime介绍,如图 1.1 Test: Spring提供测试功能 1.2 Core Container:Spring核心容器,Spring启动的基本条件, 1.2.1 Bea ...

AUI框架的介绍和使用

AUI框架的介绍和使用相关推荐

最新文章

热门文章