How to use amaze UI

Time:2020-10-26

Today, the teacher explained to me the use of amaze UI, and I would like to share my learning notes with you. Although the official website of amaze UI has provided specific implementation steps, it is still difficult to understand for me who has no experience in front-end development.

introduction

The development of a foreground page generally needs the support of HTML, CSS and JavaScript. Amazui UI encapsulates some CSS and JS, which can be called directly by users.

usage method

There are two ways to use amaze UI: CSS and JS files are copied to the project; CDN is used. (the first method is adopted in the development process; the second method is adopted when deployment is needed at the end of development.

See Appendix 1 for specific explanation)

Method 1

1. download the zip corresponding to the amaze UI.

After decompressing, view the assets file under the folder. The assets folder includes CSS and JS folders. These two files are packaged in amaze UI and can be used by users directly.

2. Copy the CSS and JS folder mentioned above to the Webroot of the web project.

3. Use the style in the project.

Note: it is very convenient to develop with hbuilder.



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello amazeui</title>
</head>
<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<body>
  <button class="am-btn-primary am-btn-block " >aaa</button>
</body>
</html>

Method 2

Get the corresponding addresses of JS and CSS on the official website and introduce them into JS. However, JS using amaze UI needs the support of jQuery, so it needs to be imported in the order before JS.


<!DOCTYPE html>
<html>
 <head>

<meta charset="utf-8" />
     <title></title  >
     <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css"/>
     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
     <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
	</head>
	<body>
	<button <span style="color:#ff0000;">class</span>="am-btn" value="aa">		
	</button>
	</body>
</html>

We use the amaze UI encapsulated format in the class.

Appendix 1

In the development process, the hbuilder tool is used. If the CSS and JS of amaze UI are imported into the project, the tool itself will prompt during the development process. However, when users visit the web page, they will request local CSS and JS resources every time, which will increase the burden of the server deploying the project. So in order to avoid the second problem, we will change to the second way when we deploy the project.

summary

This article on the use of amaze UI detailed tutorial article introduced here, more related to the use of amaze UI content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!