使用ZUI进行构建现代应用非常简单。一般情况下,ZUI仅依赖于jQuery,ZUI中的Javascript组件构建于jQuery之上。

下面给出一个非常简单的Hello world页面。

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>

    <!-- zui -->
    <link href="css/zui.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="js/zui.min.js"></script>
  </body>
</html>

如果你的网站需要兼容IE8,请参考“兼容IE浏览器”章节。

ZUI使用 normalize 来重置样式,这样尽可能保证在所有浏览器中有一致的体验。

因为IE浏览器与各大浏览器区别太大,为了尽可能的保证在所有浏览器中有一致的体验,很多时候需要单独对待IE浏览器。为了保证代码精简及一致,ZUI支持IE8-11。

禁用IE兼容模式

为了保证IE能够使用最新渲染模式而不是兼容模式,在html文档头部应加入以下代码:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    ...

国内众多浏览器推出“高速”模式(webkit内核)和“兼容”模式(IE内核),不过默认情况下使用“兼容”模式。将一下代码加入到页面中,可以让部分国产浏览器默认采用“高速”模式渲染页面:

<meta name="renderer" content="webkit">

目前只有360浏览器支持此meta标签。

更古老的浏览器

针对IE7及更早的版本,应该给出提示,让用户升级浏览器。在body之后加入以下代码可以有选择性的出现浏览器升级提示,并给出链接引导用户访问browsehappy.com

<body>
    <!--[if lt IE 8]>
        <div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
    <![endif]-->
    ...

因为IE8及早期版本不支持HTML5标签,所以针对IE8浏览器,我们引入html5shiv来使得HTML5标签在IE8中也能使用。在HTML文档的script区域加入以下代码(示例中html5shiv库来自maxcdn):

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

因为IE8及早期版本同样不支持media query来实现响应式布局,我们同样可以通过条件注释引入respond.js来帮助ie实现该功能。(示例中的respond.js来自maxcdn,可以和html5shiv共享同一个条件注释区域。)

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

现代web应用应该支持响应式布局。栅格系统已提供良好的基础构建响应式布局页面,同时也提供一些辅助工具类来控制内容在不同设备的展现方式。

在ZUI中提供针对4中不同尺寸的设备屏幕进行分别控制。

屏幕 名称 尺寸
超小屏幕(手机) xs <768px
小屏幕(平板) sm >=768px
中等屏幕(笔记本电脑) md >=992px
大屏幕(桌面电脑) lg >=1200px

针对4种屏幕类型各定义两种辅助类来在不同的设备上显示或隐藏内容。

超小屏幕小屏幕中等屏幕大屏幕
.visible-xs可见隐藏隐藏隐藏
.visible-sm隐藏可见隐藏隐藏
.visible-md隐藏隐藏可见隐藏
.visible-lg隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

其中显示辅助类.visible-xs.visible-sm.visible-md.visible-lg可以组合使用,同理对于隐藏辅助类也可以组合使用以达到不同的效果。但不要将显示辅助类和隐藏辅助类混合使用。

ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐藏不能同时使用。

禁用响应式布局

有时你所开发应用仅针对一个设备或平台,并不需要响应式布局。即使这样,也建议你使用响应式布局,因为不需要额外的代码,而且为跨屏提供了可能性。

在ZUI中并没用一个全局的开关来控制是否启用响应式布局。如果确实要禁用该功能,请参考下面的建议:

采用Bootstrap3的栅格设计。具体使用参考bootstrap3-grid

以下列出常用参数:

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

字体

在ZUI中我们定义了三种字体家族已适应不同的场合。这些字体在中英文环境下都能够很好的显示。

无衬线字体 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif
衬线字体 Georgia, "Times New Roman", Times, serif
等宽字体 Monaco, Menlo, Consolas, "Courier New", monospace

使用无衬线字体来作为页面的默认字体,因为无衬线字体非常适合在屏幕上显示;衬线字体作为一个额外的选择,但并不推荐在小字号中使用,但可以用于特殊文字或者标题中;等宽字体用来显示程序代码。

默认的字体大小为 13px,以保证在所有屏幕上都能有最佳效果。ZUI中也允许使用更小号的字体,不过不要小于 12px。默认行高为字体大小的1.38倍,一般为18px。一至六级标题的行高为字体大小的1.2。

文字排版

字是组成页面的重要内容,一个好的排版是构建好的用户界面的基石。应根据我们的设计原则来进行文字排版。下表中列举了web设计时会用到的文字排版方式。

元素 标签 字体大小 说明

页面标题

<h1> 26px 在一个页面只有一个页面标题。

标题

<h2> 22px 作为页面第二级标题,可能在一个页面中使用到多个二级标题。

三级标题

<h3> 16px 粗体 页面第三级标题,嵌套在二级标题下使用。

四级标题

<h4> 15px 粗体 页面第四级标题,嵌套在三级标题下使用。
五级标题
<h5> 13px 粗体 颜色灰色 页面第五级标题,嵌套在四级标题下使用。
六级标题
<h6> 12px 粗体 颜色灰色 页面第六级标题,嵌套在五级标题下使用。

这是一个段落

<p> 13px 正文中大部分由段落组成。段落的行高为20px。段落间在垂直方向上有10px边距。

这是一个突出的段落

<p class="lead"> 20px 突出的段落具有更大的字体,在一个段落上加.lead类。
粗体文本 <strong> 13px 通常粗体文本用来强调内容。
斜体文本 <em> 13px
小的文本 <small> 12px 颜色灰色 small文本字体只有正常字体大小的85%,通常为11.9px。
超链接 <a> 13px 超链接具有不同的颜色以区别其他文本,超链接仅当鼠标悬停时会增加下划线。
  1. 这是一个有序列表
  2. 包含三个列表项
  3. 作为示例
<ol><li>...</ol> 13px 当组织一些并列项目且关注项目之间顺序时可以使用有序列表。
  • 这是一个无序列表
  • 包含三个列表项
  • 作为示例
<ul><li>...</ul> 13px 当组织一些并列项目但不关注项目之间顺序时可以使用无序列表。
这是一大段引用内容
<blockquote> 13px 用于显示一大段引用的内容。
这是内嵌的引用 <q> 13px 用于在正文行内显示引用的术语。
<div>
        <p>代码区域</p>
        </div>
<pre><code>...</code> 13px 等宽字体 代码区域会加上方框,并使用等宽字体显示,详细代码显示规定请参见节代码高亮

在ZUI中提供了众多实用的辅助类。任何时候只需要加入对应的CSS类名即可。虽然辅助类使用起来非常方便,但也要避免滥用。使用之前应该了解以下要点。

小字号文本

使用标签<small>或者CSS类名.small来使得文本字号比正常情况小一号。

小字号文本,small text.
<small>...</small>

文本颜色

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-danger">...</p>
<p class="text-success">...</p>
<p class="text-warning">...</p>
<p class="text-info">...</p>
<p class="text-important">...</p>
<p class="text-special">...</p>

文本背景高亮

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="highlight-default">...</p>
<p class="highlight-primary">...</p>
<p class="highlight-danger">...</p>
<p class="highlight-success">...</p>
<p class="highlight-warning">...</p>
<p class="highlight-info">...</p>
<p class="highlight-important">...</p>
<p class="highlight-special">...</p>

文本背景色

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="bg-default">...</p>
<p class="bg-primary">...</p>
<p class="bg-danger">...</p>
<p class="bg-success">...</p>
<p class="bg-warning">...</p>
<p class="bg-info">...</p>
<p class="bg-important">...</p>
<p class="bg-special">...</p>

禁用文本换行

使所有文本在一行显示。超出的部分将会被隐藏。只需要使用.text-nowrap或者.nobr

<h2 class="text-nowrap">...</h2>

文本超出省略

使所有文本在一行显示。超出的部分会被截断,并且在文本末尾添加省略号。使用.text-ellipsis

<h2 class="text-ellipsis">...</h2>

并不是所有浏览器都支持此选项。

内容边距

在内容元素内添加内边距,使得元素更易于阅读。使用.with-padding

内容边距和文本背景一起使用的例子。

Lorem ipsum dolor sit amet, consectetur.

Perferendis eveniet ipsa modi nesciunt, vel.

Molestias maxime perspiciatis saepe unde corporis.

Culpa eum modi assumenda, velit vitae.

Cumque consequuntur modi fugiat debitis dolorum.

Minus nisi consectetur dolorum temporibus architecto.

Tenetur ullam amet illo sint magni!

Sapiente voluptates debitis dolor ipsam libero!

<p class="with-padding bg-default">...</p>
<p class="with-padding bg-primary">...</p>
<p class="with-padding bg-danger">...</p>
<p class="with-padding bg-success">...</p>
<p class="with-padding bg-warning">...</p>
<p class="with-padding bg-info">...</p>
<p class="with-padding bg-important">...</p>
<p class="with-padding bg-special">...</p>

关闭按钮

通常用来关闭消息框或者模态框。

<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

三角符号

<span class="caret"></span>

浮动

强制使得一个元素向左或者向右浮动。

<div class="pull-left"></div>
<div class="pull-right"></div>

对应的CSS代码:

.pull-right
{
  float: right !important;
}
.pull-left
{
  float: left !important;
}

清除浮动

只需要一个CSS类名即可使得内部浮动元素也具备高度等特性。

<div class="clearfix">...</div>

块居中

使得一个具备固定宽度的能够在父级容器中居中显示。

<div class="center-block">...</div>

对应的CSS代码:

.center-block
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

隐藏文本

隐藏文本能够使得标签内的文本不显示,通常用于图片代替文本。

<h1 class="text-hide">此处文本不会显示</h1>

显示或隐藏元素

提供多个辅助类来帮助切换内容显示。

.hide
{
  display: none;
}
.hidden
{
  display: none!important;
}
.show
{
  display: block;
}
.showing
{
  display: block!important;
}
.invisible
{
  visibility: hidden;
}

.hidden.showing具备更高的优先级,防止其他规则重写。.invisible仅仅隐藏元素,但元素内容所占的空间并不会清除。

ZUI也针对浏览器的滚动条进行了样式优化。

浏览器兼容性

滚动条样式目前仅支持Webkit内核浏览器。

滚动条样式测试

一些文字

更多的文字

更多的文字

更多的文字

长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本。

较宽的内容。

ZUI的界面应该简洁,易于识别,让人感觉舒适而不失严谨。所使用的配色应该尽可能达到该目的。

ZUI的配色表包含三部分:主要颜色,灰度颜色及额外颜色。

主要颜色

包含3~5种颜色,决定了ZUI界面整体色调。虽然并没有强制的规则来决定如何指定主要颜色,但最好是使用同一色调的不同明度的颜色。一般选取2深色+2浅色+1强调色。主要颜色会用在菜单、导航、链接、高亮选项等。

在ZUI的默认配色方案中,主要颜色均为同一色系。

灰度颜色

灰度颜色强制使用同一色调不同亮度的一组颜色。在无特别需求的情况下,一般使用黑色灰度。灰度颜色会用在块的背景,边框,次要的文本上。灰度颜色为界面创建了层次感,加深了内容与内容间的边界,更易于体现内容的重要程度。

额外颜色

额外的颜色为特殊控件提供的更多的色彩选择。例如各种级别的消息框,特殊作用的按钮,特殊文本等。

配色设计要点

ZUI中力求界面元素令人赏心悦目。不过如果你需要更多的个性化设置,这时你可以充分利用ZUI提供的主题样式表来个大换装。你只需要修改dist目录下的theme.css文件,并增加到你的项目引用中即可,不需要对原有文件做出修改。

如果你追求更深度的定制,可能需要了解src/less目录下的theme.less文件。修改这个文件也是非常简单,如果你只需要更换一下配色,那是简单不过,只需要将@color-primary变量设置一个新的值然后重新编译即可。

theme.less给出主要色彩值(@color-primary)会自动计算该色彩对应的配色方案。