--- layout: default title: 开始使用 · SUI Mobile ---
{% include masthead.html %}

开始使用

只需要如下几个简单的步骤,就可以在你的应用中使用SUI Mobile了.

{% include ad.html %}

创建页面

1. 引用静态资源

我们提供了CDN地址可以直接使用,并且强烈建议使用我们的CDN而不是下载到本地。

{% highlight html %} {% endhighlight %}

如果你用到了拓展包中的组件,还需要引用extend扩展包,为减少请求数,可以使用阿里CDN的combo功能:

{% highlight html %} {% endhighlight %}

2. 调试代码

如果你希望在开发环境下可以调试代码,那么你可以这样引用未压缩的版本

{% highlight html %} {% endhighlight %}

完整的页面模板

你可以直接用下面的模板来创建你的页面:

{% highlight html %} 我的生活 {% endhighlight %}

使用组件

上面已经有了页面的基本结构,下一步就是把你需要的组件塞进去,这里我们以一个卡片形式的页面为例。我们主要会用到导航栏和卡片两个组件。

首先,我们需要一个标题栏和工具栏。

{% highlight html %} {% endhighlight %}

然后我们在内容区中填上几个卡片

{% highlight html %}
旅途的山

发表于 2015/01/15

此处是内容...

旅途的山

发表于 2015/01/15

此处是内容...

... 可以多放几张卡片
{% endhighlight %}

最终效果是这样的 示例

{% include footer.html %}