组件是SUI的基础。熟练的使用SUI的组件,能大大的提高页面布局的速度。
响应式
它会自动左右居中,并且根据页面的宽度来调整自身宽度,左右两边有合理的边距。
用法: <div class='sui-container'></div>
谷歌浏览器看css的具体设置
栅格系统 将页面按比例分区 |
栏数 | 每栏宽度 | |
---|---|---|---|
默认栅格系统 | 计算出屏幕宽度能容下多少定宽的栏 | 定宽 | |
流式栅格系统 | 有多少栏,就显示多少栏 | 不定宽,宽度是其容器的百分比 |
可视化比较(粉红为默认栅格系统,灰色为流式栅格系统)
导航栏 class="sui-navbar"
我把它固定在底部了。
导航列表 class="sui-nav nav-list"
分页器 class="sui-pagination"
面包屑 class="sui-breadcrumb"
标签页 class="sui-nav nav-tabs"
新手指引 data-step="?" data-intro="?" data-position="left" class="divcont"
此组件的css代码被移入了 sui-append.css 中,需在 head 中加入下面代码
<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui-append.min.css" rel="stylesheet">
提示消息 class="sui-msg msg-error"
步骤条 class="sui-steps"
loading class="sui-loading"
class="sui-progress"
表单 class="sui-form"
按钮 class="sui-btn"
下拉菜单 class="sui-dropdown"
选框 type="checkbox"
data-toggle="datepicker"
数据表格 class="sui-table
用来记录简单的数据,只包含文本和链接。
class="sui-table
表格中可以包含复杂的结构。
全局文字
Lable class="sui-label label-"
Tag class="sui-tag"
对话框 临时跳转到新的页面(之后会跳转回来),关键是javaScripts。
气泡Tips data-toggle="tooltip"
总体感受:
感觉SUI是简化了的HTML+CSS。SUI做了大量约束,使你只需要做简单的选择题,而不需要精细的调整,同样可以做出好看的页面。熟悉SUI组件的过程,同时也暴露出自己HTML+CSS基础不牢固的问题。
收获:
相关文章推荐: