SUI前端开发框架快速入门

SUI前端开发框架快速入门

SUI 是一套基于bootstrap开发的前端组件库，可直接开发HTML5，同时SUI包含了一套WEB设计规范，通过SUI，我们可以快速的设计和实现理想的页面。

启动HBuilder软件，创建一个Web项目，在项目名称栏输入HelloSUI，确定后HBuilder会自动生成相关的缺省目录和index.html文件

引入SUI库文件方式一：网络引入

在HTML页面中直接通过网络方式引入SUI库文件，这种方式最简单，但是要求电脑是可以联网的。

修改index.html文件，在文件中增加jquery，sui库（包括css和js库）的引入

引入SUI库文件方式二：本地引入

1）这时候需要先从github上下载已经编译好的SUI库压缩包文件，选择build分支进行下载。

2）将下载下来的sui-build.zip文件解压缩后将.package目录下的所有文件文件和目录复制到HelloSUI工程目录下

4）下载jQuery的js库文件到HelloSUI的js目录下

3）在index.html文件中的head中引入本地sui库和jQuery js库

使用SUI库的样式以及组件，编写测试页面

如增加一个导航面包屑内容：就可以直接使用SUI的样式sui-breadcrumb

• Home Page
• Mobile Phone
• Shoes
• Sports