AUI 框架的介绍和使用

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

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

AUI 框架的介绍和使用

第一步:下载AUI2.1

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

b7a72b77ed885

第二步:在项目中引用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>

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

d88473381cf3d

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

发表评论

Item added to cart.
0 items - ¥0.00