快速上手
航天云路可视化框架,致力于提供给程序员愉悦的开发体验。
提示
在开始之前,官方指南假设你已了解关于 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来选择自己所需要的对应字体、色值、模块、元素等,通过控制台检查元素,拷贝适合自己需要的代码到页面中。