控件
图标
图标能在视觉上简洁有效的指引用户操作。特殊情况下，使用图标能够代替文本。
如何使用图标？
同一个应用程序中的图标应该具有一致的外观及用户行为响应，应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况：
- 用于应用程序头部，便于用户识别正在使用的应用；
- 用于按钮，对于一些常用的按钮可以使用图标取代按钮中的文本，使得界面更加简洁；
- 用于提示消息，图标能指明消息类型，便于用户无需仔细阅读消息内容就可以迅速做出决策；
- 用于一些简单但重要列表，在列表项目前面加上合适的图标能大大增强列表识别程度；
- 等同与标签，图标能简明表达项目或信息类型。
使用图标字体
在图标字体没有普及之前，图标通常是通过图片来展示，如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整，例如定义大小、颜色及特殊效果。在ZUI中将使用图标字体作为系统图标集方案。采用开源web图标字体Font Awesome是一个不错的选择。
在Font Awesome 3.2.1中提供了361个图标。ZUI基于FontAwesome 3.2.1定制，去除了一些不常用的图标，并加入了一些适合中国使用的图标。
以下列出ZUI中包含的图标：
- music
- search
- envelope
- heart
- star
- star-empty
- user
- film
- th-large
- th
- th-list
- ok
- remove
- zoom-in
- zoom-out
- off
- signal
- cog
- trash
- home
- file
- time
- download-alt
- download
- upload
- inbox
- play-circle
- repeat
- refresh
- list-alt
- lock
- flag
- headphones
- volume-off
- volume-up
- qrcode
- barcode
- tag
- tags
- book
- bookmark
- camera
- font
- bold
- align-left
- align-justify
- list
- picture
- pencil
- map-marker
- adjust
- tint
- edit
- share
- check
- move
- step-backward
- fast-backward
- backward
- play
- pause
- stop
- forward
- fast-forward
- step-forward
- eject
- chevron-left
- chevron-right
- plus-sign
- minus-sign
- remove-sign
- ok-sign
- question-sign
- info-sign
- screenshot
- remove-circle
- ok-circle
- ban-circle
- arrow-left
- arrow-right
- arrow-up
- arrow-down
- share-alt
- resize-full
- resize-small
- plus
- minus
- asterisk
- exclamation-sign
- gift
- leaf
- eye-open
- eye-close
- warning-sign
- plane
- calendar
- random
- comment
- magnet
- chevron-up
- chevron-down
- retweet
- shopping-cart
- folder-close
- folder-open
- resize-vertical
- resize-horizontal
- bar-chart
- camera-retro
- key
- cogs
- comments
- thumbs-up
- thumbs-down
- star-half
- heart-empty
- signout
- pushpin
- external-link
- signin
- trophy
- upload-alt
- lemon
- phone
- check-empty
- bookmark-empty
- phone-sign
- unlock
- credit
- rss
- hdd
- bullhorn
- bell
- certificate
- hand-right
- hand-left
- hand-up
- hand-down
- circle-arrow-left
- circle-arrow-right
- circle-arrow-up
- circle-arrow-down
- globe
- wrench
- tasks
- filter
- briefcase
- fullscreen
- group
- link
- cloud
- beaker
- cut
- copy
- paper-clip
- save
- sign-blank
- reorder
- list-ul
- list-ol
- table
- magic
- caret-down
- caret-up
- caret-left
- caret-right
- columns
- sort
- sort-down
- sort-up
- envelope-alt
- undo
- dashboard
- comment-alt
- comments-alt
- bolt
- sitemap
- umbrella
- paste
- lightbulb
- exchange
- cloud-download
- cloud-upload
- stethoscope
- suitcase
- bell-alt
- coffee
- file-alt
- building
- medkit
- fighter-jet
- double-angle-left
- double-angle-right
- double-angle-up
- double-angle-down
- angle-left
- angle-right
- angle-up
- angle-down
- desktop
- laptop
- tablet
- mobile
- circle-blank
- quote-left
- quote-right
- spinner
- circle
- reply
- folder-close-alt
- folder-open-alt
- expand-alt
- collapse-alt
- smile
- frown
- meh
- gamepad
- keyboard
- flag-alt
- flag-checkered
- terminal
- code
- reply-all
- star-half-full
- location-arrow
- crop
- code-fork
- unlink
- question
- info
- exclamation
- shield
- calendar-empty
- rocket
- chevron-sign-left
- chevron-sign-right
- chevron-sign-up
- chevron-sign-down
- html5
- anchor
- unlock-alt
- bullseye
- ellipsis-horizontal
- ellipsis-vertical
- rss-sign
- play-sign
- minus-sign-alt
- check-minus
- level-up
- level-down
- check-sign
- edit-sign
- external-link-sign
- share-sign
- compass
- collapse
- collapse-top
- expand
- dollar
- yen
- renminbi
- file2
- file-text
- sort-by-alphabet
- sort-by-alphabet-alt
- sort-by-attributes
- sort-by-attributes-alt
- sort-by-order
- sort-by-order-alt
- thumbs-up2
- thumbs-down2
- youtube-play
- long-arrow-down
- long-arrow-up
- long-arrow-left
- long-arrow-right
- apple
- windows
- android
- linux
- sun
- moon
- archive
- bug
- renren
- chrome
- firefox
- ie
- opera
- safari
- node
- layout
- usecase
- stack
- branch
- chat
- comment-s
使用图标字体有一个好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容：
- 图标应具备统一的颜色，如果有交互行为样式也应该保持一致；
- 图标的大小应该保持一致，正文中的图标大小应为16px，标题中的图标可以为32px；
- 图标应与所指示的内容对应，不同地方的同一个指示内容应该使用同一个图标。
如有需要，也可以自定义专有的图标字体。例如需要使用一些Font Awesome中没有定义的图标，或者由于性能要求太高需要Font Awesome中没有用到的图标。
进度条
提供工作或动作的实时反馈，只用简单且灵活的进度条。
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。
类型
基本类型
| 进度条 | 描述 |
|---|---|
|
|
默认的进度条 |
变化
颜色
为了一致的样式，进度条颜色使用与按钮相同的类。
| 进度条 | 描述 |
|---|---|
|
|
主要/默认 |
|
|
信息 |
|
|
成功 |
|
|
警告 |
|
|
危险 |
|
|
成功 |
效果
用一个渐变可以创建条纹效果，在IE8中不可用。
| 进度条 | 描述 |
|---|---|
|
|
条纹效果 |
|
|
运动效果。给 |
|
|
堆叠效果。把多个进度条放入同一个 |
标签
基本样式
| 标签 | 描述 |
|---|---|
New |
h1 |
New |
h2 |
New |
h3 |
New |
h4 |
New |
h5 |
New |
h6 |
徽标
.label-badge
12
Primary
Success
Info
Warning
Danger
小圆点徽标
12
Info
Warning
Danger
按钮中的徽标
列表组中的徽标和标签
标签和徽标的颜色
| 标签 | 描述 |
|---|---|
| Default | .label-default |
| Primary | .label-primary |
| Success | .label-success |
| Info | .label-info |
| Warning | .label-warning |
| Danger | .label-danger |
文本框
类型
基本类型
| 文本框 | 描述 |
|---|---|
| input type='email' | |
| input type='text' | |
| input type='checkbox' | |
| input type='radio'' | |
| textarea row='3' | |
| file | |
| select |
状态
| 文本框 | 描述 |
|---|---|
| 禁用：input type='text' diabled | |
| 焦点：input type='text' class='form-focus' | |
|
|
has-warning |
|
|
has-error |
|
|
has-success |
变化
高度
| 文本框 | 描述 |
|---|---|
| .input-lg | |
| Default iinput | |
| .input-sm |
宽度
图片
类型
圆角图片
.img-rounded
圆形图片
.img-circle
缩略图
.img-thumbnail
参数
响应式图片
图片最大宽度将不会超过父级容器。.img-responsive
标题
类型
标准内容标题
内容标题用来对一段内容进行总结。内容标题有1-6个级别，用html中的h1、h2...h6来应用样式
| 元素 | 标签 | 像素大小 | 说明 |
|---|---|---|---|
Heading1 一级标题 |
<h1> |
28px | 在一个页面（或在hgroup标记的范围内）只有一个页面标题。 |
Heading2 二级标题 |
<h2> |
24px | 作为页面第二级标题，可能在一个页面中使用到多个二级标题。 |
Heading3 三级标题 |
<h3> |
20px 粗体 | 页面第三级标题，嵌套在二级标题下使用。 |
Heading4 四级标题 |
<h4> |
16px 粗体 | 页面第四级标题，嵌套在三级标题下使用。 |
Heading5 五级标题 |
<h5> |
14px 粗体 颜色灰色 | 页面第五级标题，嵌套在四级标题下使用。 |
Heading6 六级标题 |
<h6> |
12px 粗体 颜色灰色 | 页面第六级标题，嵌套在五级标题下使用。 |
带额外内容的标题
标题中可以加入解释性的文本，这些文本通过一个small标签加入。
Heading1 标题1 额外的标题 secondary headings
Heading2 标题2 额外的标题 secondary headings
Heading3 标题3 额外的标题 secondary headings
Heading4 标题4 额外的标题 secondary headings
Heading5 标题5 额外的标题 secondary headings
Heading6 标题6 额外的标题 secondary headings
单独一行的解释性文本
Heading1 标题1 这是关于标题的解释性文本 secondary headings
带图标的标题
页面标题使用额外的div.header来为页面内容提供更多的样式控制，与其他控件完美整合在一起。
带图标的标题
参数
.header-block
带背景颜色的标题。
标题
.header-dividing
带底部水平分隔线的标题