在开始之前，官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的初级知识，并且掌握前端页面的正确开发方式。如果你刚开始学习前端，将 UI 框架作为你的第一步可能不是最好的主意。

点我看示例

在进行开发之前，首先需要引入静态资源。

1. 样式文件（css）引入：

<link rel="stylesheet" href="https://ui.htres.cn/v2/res/css/assets/css/bootstrap.min.css"> <link rel="stylesheet" href="https://ui.htres.cn/v2/res/styles/index.css">

2. 脚本文件（js）引入：

<script type="text/javascript" src="https://cdn.htres.cn/res/scenes/assets/js/jquery-3.1.1.min.js"></script> <script src="https://ui.htres.cn/v2/res/js/yunluui-2.1.1.min.js"></script>

通过栅格系统进行网站结构的合理布局。参考地址：https://ui.htres.cn/dev/pages/grid/index/render.html

例如：

<div class="container"> <div class="row"> <div class="col-xs-12 col-md-4 col-lg-6">栅格使用规范</div> <div class="col-xs-12 col-md-4 col-lg-3">栅格使用规范</div> <div class="col-xs-12 col-md-4 col-lg-3">栅格使用规范</div> </div> <div class="row"> <div class="col-xs-12 col-md-4">栅格使用规范</div> <div class="col-xs-12 col-md-4">栅格使用规范</div> <div class="col-xs-12 col-md-4">栅格使用规范</div> </div> </div>

通过参考框架示例：https://ui.htres.cn/dev/pages/font/index/render.html来选择自己所需要的对应字体、色值、模块、元素等，通过控制台检查元素，拷贝适合自己需要的代码到页面中。