Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
controls.html 51.5 KB
Newer Older
C
* updated document files.  
Catouse 已提交
1 
<!-- ---
C
* update document structure.  
Catouse 已提交
2 3 4 5 
layout: default
title: 控件
slug: controls
lead: "基本控件设计."
C
* fix jekyll config 'base_url'.  
Catouse 已提交
6 
base_url: "./"
C
* updated document files.  
Catouse 已提交
7 8 
--- -->
<!DOCTYPE html>
C
* updated documents.  
Catouse 已提交
9 
<html lang="zh-CN">
C
* updated document files.  
Catouse 已提交
10 11 12 13 14 15 
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，一个简单灵活的前端框架。">
    <meta name="author" content="Zentao">
C
* update document structure.  
Catouse 已提交
16
C
* updated document.  
Catouse 已提交
17 
    <title>ZUI - 开源HTML5跨屏框架</title>
C
* updated controls.html.  
Catouse 已提交
18
C
* updated documents.  
Catouse 已提交
19 
    <link href="css/zui.min.css" rel="stylesheet">
C
* changed file structure and remove some unused files.  
Catouse 已提交
20 
    <link href="css/doc.css" rel="stylesheet">
C
* updated document files.  
Catouse 已提交
21 22 
  </head>
  <body>
C
* updated documents.  
Catouse 已提交
23 
    <header data-tab="controls">
C
* updated document files.  
Catouse 已提交
24 25 26 27 28 29 30 31 
    </header>
    <div id="main">
      <div class="page-header">
        <h1>控件</h1>
      </div>

      <section id="icons">
        <div class="page-header">
C
* updated documents.  
Catouse 已提交
32 
          <h2>图标 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
C
+ add document section of buttons.  
Catouse 已提交
33 
        </div>
C
* updated document files.  
Catouse 已提交
34 
        <p>图标能在视觉上简洁有效的指引用户操作。特殊情况下，使用图标能够代替文本。</p>
C
* updated documents.  
Catouse 已提交
35 
        <h3>何时使用图标？</h3>
C
* updated document files.  
Catouse 已提交
36 37 38 39 40 41 42 43 44 45 46 
        <p>同一个应用程序中的图标应该具有一致的外观及用户行为响应，应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况：</p>
        <ul>
          <li>用于应用程序头部，便于用户识别正在使用的应用；</li>
          <li>用于按钮，对于一些常用的按钮可以使用图标取代按钮中的文本，使得界面更加简洁；</li>
          <li>用于提示消息，图标能指明消息类型，便于用户无需仔细阅读消息内容就可以迅速做出决策；</li>
          <li>用于一些简单但重要列表，在列表项目前面加上合适的图标能大大增强列表识别程度；</li>
          <li>等同与标签，图标能简明表达项目或信息类型。</li>
        </ul>
        <h3>使用图标字体</h3>
        <p>在图标字体没有普及之前，图标通常是通过图片来展示，如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整，例如定义大小、颜色及特殊效果。在ZUI中将使用图标字体作为系统图标集方案。采用开源web图标字体<a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>是一个不错的选择。</p>
        <p>在Font Awesome 3.2.1中提供了361个图标。ZUI基于FontAwesome 3.2.1定制，去除了一些不常用的图标，并加入了一些适合中国使用的图标。</p>
C
* rebuilt.  
Catouse 已提交
47 
        <p>在ZUI中提供了290个图标：</p>
C
* updated document files.  
Catouse 已提交
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 
        <div class="icons example">
          <ul class='clearfix'>
            <li><i class="icon-music"></i> music</li>
            <li><i class="icon-search"></i> search</li>
            <li><i class="icon-envelope"></i> envelope</li>
            <li><i class="icon-heart"></i> heart</li>
            <li><i class="icon-star"></i> star</li>
            <li><i class="icon-star-empty"></i> star-empty</li>
            <li><i class="icon-user"></i> user</li>
            <li><i class="icon-film"></i> film</li>
            <li><i class="icon-th-large"></i> th-large</li>
            <li><i class="icon-th"></i> th</li>
            <li><i class="icon-th-list"></i> th-list</li>
            <li><i class="icon-ok"></i> ok</li>
            <li><i class="icon-remove"></i> remove</li>
            <li><i class="icon-zoom-in"></i> zoom-in</li>
            <li><i class="icon-zoom-out"></i> zoom-out</li>
            <li><i class="icon-off"></i> off</li>
            <li><i class="icon-cog"></i> cog</li>
            <li><i class="icon-trash"></i> trash</li>
            <li><i class="icon-home"></i> home</li>
            <li><i class="icon-file"></i> file</li>
            <li><i class="icon-time"></i> time</li>
            <li><i class="icon-download-alt"></i> download-alt</li>
            <li><i class="icon-download"></i> download</li>
            <li><i class="icon-upload"></i> upload</li>
            <li><i class="icon-inbox"></i> inbox</li>
            <li><i class="icon-play-circle"></i> play-circle</li>
            <li><i class="icon-repeat"></i> repeat</li>
            <li><i class="icon-refresh"></i> refresh</li>
            <li><i class="icon-list-alt"></i> list-alt</li>
            <li><i class="icon-lock"></i> lock</li>
            <li><i class="icon-flag"></i> flag</li>
            <li><i class="icon-headphones"></i> headphones</li>
            <li><i class="icon-volume-off"></i> volume-off</li>
            <li><i class="icon-volume-up"></i> volume-up</li>
            <li><i class="icon-qrcode"></i> qrcode</li>
            <li><i class="icon-barcode"></i> barcode</li>
            <li><i class="icon-tag"></i> tag</li>
            <li><i class="icon-tags"></i> tags</li>
            <li><i class="icon-book"></i> book</li>
            <li><i class="icon-bookmark"></i> bookmark</li>
            <li><i class="icon-print"></i> print</li>
            <li><i class="icon-camera"></i> camera</li>
            <li><i class="icon-font"></i> font</li>
            <li><i class="icon-bold"></i> bold</li>
            <li><i class="icon-align-justify"></i> align-justify</li>
            <li><i class="icon-list"></i> list</li>
            <li><i class="icon-picture"></i> picture</li>
            <li><i class="icon-pencil"></i> pencil</li>
            <li><i class="icon-map-marker"></i> map-marker</li>
            <li><i class="icon-adjust"></i> adjust</li>
            <li><i class="icon-tint"></i> tint</li>
            <li><i class="icon-edit"></i> edit</li>
            <li><i class="icon-share"></i> share</li>
            <li><i class="icon-check"></i> check</li>
            <li><i class="icon-move"></i> move</li>
            <li><i class="icon-step-backward"></i> step-backward</li>
            <li><i class="icon-fast-backward"></i> fast-backward</li>
            <li><i class="icon-backward"></i> backward</li>
            <li><i class="icon-play"></i> play</li>
            <li><i class="icon-pause"></i> pause</li>
            <li><i class="icon-stop"></i> stop</li>
            <li><i class="icon-forward"></i> forward</li>
            <li><i class="icon-fast-forward"></i> fast-forward</li>
            <li><i class="icon-step-forward"></i> step-forward</li>
            <li><i class="icon-eject"></i> eject</li>
            <li><i class="icon-chevron-left"></i> chevron-left</li>
            <li><i class="icon-chevron-right"></i> chevron-right</li>
            <li><i class="icon-plus-sign"></i> plus-sign</li>
            <li><i class="icon-minus-sign"></i> minus-sign</li>
            <li><i class="icon-remove-sign"></i> remove-sign</li>
            <li><i class="icon-ok-sign"></i> ok-sign</li>
            <li><i class="icon-question-sign"></i> question-sign</li>
            <li><i class="icon-info-sign"></i> info-sign</li>
            <li><i class="icon-remove-circle"></i> remove-circle</li>
            <li><i class="icon-ok-circle"></i> ok-circle</li>
            <li><i class="icon-ban-circle"></i> ban-circle</li>
            <li><i class="icon-arrow-left"></i> arrow-left</li>
            <li><i class="icon-arrow-right"></i> arrow-right</li>
            <li><i class="icon-arrow-up"></i> arrow-up</li>
            <li><i class="icon-arrow-down"></i> arrow-down</li>
            <li><i class="icon-share-alt"></i> share-alt</li>
            <li><i class="icon-resize-full"></i> resize-full</li>
            <li><i class="icon-resize-small"></i> resize-small</li>
            <li><i class="icon-plus"></i> plus</li>
            <li><i class="icon-minus"></i> minus</li>
            <li><i class="icon-asterisk"></i> asterisk</li>
            <li><i class="icon-exclamation-sign"></i> exclamation-sign</li>
            <li><i class="icon-gift"></i> gift</li>
            <li><i class="icon-leaf"></i> leaf</li>
            <li><i class="icon-eye-open"></i> eye-open</li>
            <li><i class="icon-eye-close"></i> eye-close</li>
            <li><i class="icon-warning-sign"></i> warning-sign</li>
            <li><i class="icon-plane"></i> plane</li>
            <li><i class="icon-calendar"></i> calendar</li>
            <li><i class="icon-random"></i> random</li>
            <li><i class="icon-comment"></i> comment</li>
            <li><i class="icon-chevron-up"></i> chevron-up</li>
            <li><i class="icon-chevron-down"></i> chevron-down</li>
            <li><i class="icon-shopping-cart"></i> shopping-cart</li>
            <li><i class="icon-folder-close"></i> folder-close</li>
            <li><i class="icon-folder-open"></i> folder-open</li>
            <li><i class="icon-resize-vertical"></i> resize-vertical</li>
            <li><i class="icon-resize-horizontal"></i> resize-horizontal</li>
            <li><i class="icon-bar-chart"></i> bar-chart</li>
            <li><i class="icon-camera-retro"></i> camera-retro</li>
            <li><i class="icon-key"></i> key</li>
            <li><i class="icon-cogs"></i> cogs</li>
            <li><i class="icon-comments"></i> comments</li>
            <li><i class="icon-thumbs-up"></i> thumbs-up</li>
            <li><i class="icon-thumbs-down"></i> thumbs-down</li>
            <li><i class="icon-star-half"></i> star-half</li>
            <li><i class="icon-heart-empty"></i> heart-empty</li>
            <li><i class="icon-signout"></i> signout</li>
            <li><i class="icon-pushpin"></i> pushpin</li>
            <li><i class="icon-external-link"></i> external-link</li>
            <li><i class="icon-signin"></i> signin</li>
            <li><i class="icon-trophy"></i> trophy</li>
            <li><i class="icon-upload-alt"></i> upload-alt</li>
            <li><i class="icon-lemon"></i> lemon</li>
            <li><i class="icon-phone"></i> phone</li>
            <li><i class="icon-check-empty"></i> check-empty</li>
            <li><i class="icon-bookmark-empty"></i> bookmark-empty</li>
            <li><i class="icon-phone-sign"></i> phone-sign</li>
            <li><i class="icon-credit"></i> credit</li>
            <li><i class="icon-rss"></i> rss</li>
            <li><i class="icon-hdd"></i> hdd</li>
            <li><i class="icon-bullhorn"></i> bullhorn</li>
            <li><i class="icon-bell"></i> bell</li>
            <li><i class="icon-certificate"></i> certificate</li>
            <li><i class="icon-hand-right"></i> hand-right</li>
            <li><i class="icon-hand-left"></i> hand-left</li>
            <li><i class="icon-hand-up"></i> hand-up</li>
            <li><i class="icon-hand-down"></i> hand-down</li>
            <li><i class="icon-circle-arrow-left"></i> circle-arrow-left</li>
            <li><i class="icon-circle-arrow-right"></i> circle-arrow-right</li>
            <li><i class="icon-circle-arrow-up"></i> circle-arrow-up</li>
            <li><i class="icon-circle-arrow-down"></i> circle-arrow-down</li>
            <li><i class="icon-globe"></i> globe</li>
            <li><i class="icon-wrench"></i> wrench</li>
            <li><i class="icon-tasks"></i> tasks</li>
            <li><i class="icon-filter"></i> filter</li>
            <li><i class="icon-fullscreen"></i> fullscreen</li>
            <li><i class="icon-group"></i> group</li>
            <li><i class="icon-link"></i> link</li>
            <li><i class="icon-cloud"></i> cloud</li>
            <li><i class="icon-beaker"></i> beaker</li>
            <li><i class="icon-cut"></i> cut</li>
            <li><i class="icon-copy"></i> copy</li>
            <li><i class="icon-paper-clip"></i> paper-clip</li>
            <li><i class="icon-save"></i> save</li>
            <li><i class="icon-sign-blank"></i> sign-blank</li>
            <li><i class="icon-reorder"></i> reorder</li>
            <li><i class="icon-list-ul"></i> list-ul</li>
            <li><i class="icon-list-ol"></i> list-ol</li>
            <li><i class="icon-table"></i> table</li>
            <li><i class="icon-magic"></i> magic</li>
            <li><i class="icon-caret-down"></i> caret-down</li>
            <li><i class="icon-caret-up"></i> caret-up</li>
            <li><i class="icon-caret-left"></i> caret-left</li>
            <li><i class="icon-caret-right"></i> caret-right</li>
            <li><i class="icon-columns"></i> columns</li>
            <li><i class="icon-sort"></i> sort</li>
            <li><i class="icon-sort-down"></i> sort-down</li>
            <li><i class="icon-sort-up"></i> sort-up</li>
            <li><i class="icon-envelope-alt"></i> envelope-alt</li>
            <li><i class="icon-undo"></i> undo</li>
            <li><i class="icon-dashboard"></i> dashboard</li>
            <li><i class="icon-comment-alt"></i> comment-alt</li>
            <li><i class="icon-comments-alt"></i> comments-alt</li>
            <li><i class="icon-bolt"></i> bolt</li>
            <li><i class="icon-sitemap"></i> sitemap</li>
            <li><i class="icon-umbrella"></i> umbrella</li>
            <li><i class="icon-paste"></i> paste</li>
            <li><i class="icon-lightbulb"></i> lightbulb</li>
            <li><i class="icon-exchange"></i> exchange</li>
            <li><i class="icon-cloud-download"></i> cloud-download</li>
            <li><i class="icon-cloud-upload"></i> cloud-upload</li>
            <li><i class="icon-bell-alt"></i> bell-alt</li>
            <li><i class="icon-coffee"></i> coffee</li>
            <li><i class="icon-file-alt"></i> file-alt</li>
            <li><i class="icon-building"></i> building</li>
            <li><i class="icon-double-angle-left"></i> double-angle-left</li>
            <li><i class="icon-double-angle-right"></i> double-angle-right</li>
            <li><i class="icon-double-angle-up"></i> double-angle-up</li>
            <li><i class="icon-double-angle-down"></i> double-angle-down</li>
            <li><i class="icon-angle-left"></i> angle-left</li>
            <li><i class="icon-angle-right"></i> angle-right</li>
            <li><i class="icon-angle-up"></i> angle-up</li>
            <li><i class="icon-angle-down"></i> angle-down</li>
            <li><i class="icon-desktop"></i> desktop</li>
            <li><i class="icon-laptop"></i> laptop</li>
            <li><i class="icon-tablet"></i> tablet</li>
            <li><i class="icon-mobile"></i> mobile</li>
            <li><i class="icon-circle-blank"></i> circle-blank</li>
            <li><i class="icon-quote-left"></i> quote-left</li>
            <li><i class="icon-quote-right"></i> quote-right</li>
            <li><i class="icon-spinner"></i> spinner</li>
            <li><i class="icon-circle"></i> circle</li>
            <li><i class="icon-reply"></i> reply</li>
            <li><i class="icon-folder-close-alt"></i> folder-close-alt</li>
            <li><i class="icon-folder-open-alt"></i> folder-open-alt</li>
            <li><i class="icon-expand-alt"></i> expand-alt</li>
            <li><i class="icon-collapse-alt"></i> collapse-alt</li>
            <li><i class="icon-smile"></i> smile</li>
            <li><i class="icon-frown"></i> frown</li>
            <li><i class="icon-meh"></i> meh</li>
            <li><i class="icon-gamepad"></i> gamepad</li>
            <li><i class="icon-keyboard"></i> keyboard</li>
            <li><i class="icon-flag-alt"></i> flag-alt</li>
            <li><i class="icon-flag-checkered"></i> flag-checkered</li>
            <li><i class="icon-terminal"></i> terminal</li>
            <li><i class="icon-code"></i> code</li>
            <li><i class="icon-reply-all"></i> reply-all</li>
            <li><i class="icon-star-half-full"></i> star-half-full</li>
            <li><i class="icon-location-arrow"></i> location-arrow</li>
            <li><i class="icon-crop"></i> crop</li>
            <li><i class="icon-code-fork"></i> code-fork</li>
            <li><i class="icon-unlink"></i> unlink</li>
            <li><i class="icon-question"></i> question</li>
            <li><i class="icon-info"></i> info</li>
            <li><i class="icon-shield"></i> shield</li>
            <li><i class="icon-calendar-empty"></i> calendar-empty</li>
            <li><i class="icon-rocket"></i> rocket</li>
            <li><i class="icon-chevron-sign-left"></i> chevron-sign-left</li>
            <li><i class="icon-chevron-sign-right"></i> chevron-sign-right</li>
            <li><i class="icon-chevron-sign-up"></i> chevron-sign-up</li>
            <li><i class="icon-chevron-sign-down"></i> chevron-sign-down</li>
            <li><i class="icon-html5"></i> html5</li>
            <li><i class="icon-anchor"></i> anchor</li>
            <li><i class="icon-unlock-alt"></i> unlock-alt</li>
            <li><i class="icon-bullseye"></i> bullseye</li>
            <li><i class="icon-ellipsis-horizontal"></i> ellipsis-horizontal</li>
            <li><i class="icon-ellipsis-vertical"></i> ellipsis-vertical</li>
            <li><i class="icon-rss-sign"></i> rss-sign</li>
            <li><i class="icon-play-sign"></i> play-sign</li>
            <li><i class="icon-minus-sign-alt"></i> minus-sign-alt</li>
            <li><i class="icon-check-minus"></i> check-minus</li>
            <li><i class="icon-level-up"></i> level-up</li>
            <li><i class="icon-level-down"></i> level-down</li>
            <li><i class="icon-check-sign"></i> check-sign</li>
            <li><i class="icon-edit-sign"></i> edit-sign</li>
            <li><i class="icon-external-link-sign"></i> external-link-sign</li>
            <li><i class="icon-share-sign"></i> share-sign</li>
            <li><i class="icon-compass"></i> compass</li>
            <li><i class="icon-collapse"></i> collapse</li>
            <li><i class="icon-collapse-top"></i> collapse-top</li>
            <li><i class="icon-expand"></i> expand</li>
            <li><i class="icon-dollar"></i> dollar</li>
            <li><i class="icon-yen"></i> yen</li>
            <li><i class="icon-renminbi"></i> renminbi</li>
            <li><i class="icon-file2"></i> file2</li>
            <li><i class="icon-file-text"></i> file-text</li>
            <li><i class="icon-sort-by-alphabet"></i> sort-by-alphabet</li>
            <li><i class="icon-sort-by-alphabet-alt"></i> sort-by-alphabet-alt</li>
            <li><i class="icon-sort-by-attributes"></i> sort-by-attributes</li>
            <li><i class="icon-sort-by-attributes-alt"></i> sort-by-attributes-alt</li>
            <li><i class="icon-sort-by-order"></i> sort-by-order</li>
            <li><i class="icon-sort-by-order-alt"></i> sort-by-order-alt</li>
            <li><i class="icon-thumbs-up2"></i> thumbs-up2</li>
            <li><i class="icon-thumbs-down2"></i> thumbs-down2</li>
            <li><i class="icon-long-arrow-down"></i> long-arrow-down</li>
            <li><i class="icon-long-arrow-up"></i> long-arrow-up</li>
            <li><i class="icon-long-arrow-left"></i> long-arrow-left</li>
            <li><i class="icon-long-arrow-right"></i> long-arrow-right</li>
            <li><i class="icon-apple"></i> apple</li>
            <li><i class="icon-windows"></i> windows</li>
            <li><i class="icon-android"></i> android</li>
            <li><i class="icon-linux"></i> linux</li>
            <li><i class="icon-sun"></i> sun</li>
            <li><i class="icon-moon"></i> moon</li>
            <li><i class="icon-archive"></i> archive</li>
            <li><i class="icon-bug"></i> bug</li>
            <li><i class="icon-weibo"></i> weibo</li>
            <li><i class="icon-renren"></i> renren</li>
            <li><i class="icon-qq"></i> qq</li>
            <li><i class="icon-chrome"></i> chrome</li>
            <li><i class="icon-firefox"></i> firefox</li>
            <li><i class="icon-ie"></i> ie</li>
            <li><i class="icon-opera"></i> opera</li>
            <li><i class="icon-safari"></i> safari</li>
            <li><i class="icon-node"></i> node</li>
            <li><i class="icon-layout"></i> layout</li>
            <li><i class="icon-usecase"></i> usecase</li>
            <li><i class="icon-stack"></i> stack</li>
            <li><i class="icon-branch"></i> branch</li>
            <li><i class="icon-chat"></i> chat</li>
C
* rebuilt.  
Catouse 已提交
336 337 338 339 
            <li><i class="icon-comment-line"></i> comment-line</li>
            <li><i class="icon-chat-dot"></i> chat-dot</li>
            <li><i class="icon-cube"></i> cube</li>
            <li><i class="icon-align-left"></i> align-left</li>
C
* updated document files.  
Catouse 已提交
340 
          </ul>
C
+ add document section of buttons.  
Catouse 已提交
341 
        </div>
C
* updated document files.  
Catouse 已提交
342 343 344 
        <p>使用图标字体有一个好处就是图标就是文本字符，所有能用于文本的样式都可以用于图标，这样就可以随意定义图标的大小、颜色，甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式，包含如下内容：</p>
        <ul>
          <li>图标应具备统一的颜色，如果有交互行为样式也应该保持一致；</li>
C
* updated documents.  
Catouse 已提交
345 
          <li>图标的大小应该保持一致，正文中的图标大小应为14px，标题中的图标可以为28px；</li>
C
* updated document files.  
Catouse 已提交
346 347 
          <li>图标应与所指示的内容对应，不同地方的同一个指示内容应该使用同一个图标。</li>
        </ul>
C
* updated documents.  
Catouse 已提交
348 349 350 351 352 353 354 355 356 
        <p>如有需要，也可以自定义专有的图标字体。例如需要使用一些Font Awesome中没有定义的图标，或者由于性能要求太高需要去掉Font Awesome中没有用到的图标。</p>

        <h3>如何使用图标？</h3>
        <p>使用一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>并增加对应的CSS类名即可，用来作为图标的标签不需要包含任何文本也不应该如此。</p>
        <pre class="prettyprint"><code>&lt;i class="icon-star"&gt;&lt;/i&gt;</code></pre>
        <div class="alert alert-danger">
          <p>不要将在任何控件标签上直接应用图标CSS类名，应该嵌套一个单独的<code>&lt;span&gt;</code>标签或者<code>&lt;i&gt;</code>标签。</p>
        </div>
C
* updated document files.  
Catouse 已提交
357 
      </section>
A
* finish task#1721.  
azhi 已提交
358
C
* updated document files.  
Catouse 已提交
359 360 
      <section id="buttons">
        <div class="page-header">
C
* updated documents.  
Catouse 已提交
361 
          <h2>按钮 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
362 
        </div>
C
* updated document files.  
Catouse 已提交
363 
        <p>按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。</p>
A
* finish task#1721.  
azhi 已提交
364
C
* updated document files.  
Catouse 已提交
365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 
        <h3>按钮的类型</h3>
        <p>按钮根据表现形式有如下类型：</p>
        <table class="table">
          <tr>
            <th class="col-md-4">按钮</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><button class="btn btn-primary">主要按钮</button></td>
            <td>指示用户完成当前页面主要操作，例如提交表单，搜索，确认选择等。通常在一个页面里面仅包含一个主要按钮。</td>
          </tr>
          <tr>
            <td><button class="btn btn-default">标准按钮</button></td>
            <td>页面上的普通按钮，例如取消表单、重置输入等。</td>
          </tr>
          <tr>
            <td><button class="btn btn-link">链接按钮</button></td>
            <td>链接按钮的外观和超链接一样，所不同的是用户点击时不是导向超链接指示的地址，而是触发一个操作。链接按钮通常用于页面上的次要操作，例如取消表单。</td>
          </tr>
          <tr>
            <td>
              <div class="btn-group">
                <button class="btn btn-default">按钮组</button>
                <button class="btn btn-default">第二个</button>
                <button class="btn btn-default">第三个</button>
              </div>
            </td>
            <td>按钮组能够将相关的按钮并排展示，并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。</td>
          </tr>
        </table>

        <h3>按钮的大小</h3>
        <table class="table">
          <tr>
            <th class="col-md-6">实例</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <button class="btn btn-lg btn-primary" type="button">较大的按钮</button>
              <button class="btn btn-lg" type="button">较大的按钮</button>
            </td>
            <td>较大的按钮，通常用在英雄页面或者大屏幕中。</td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-primary" type="button">默认大小</button>
              <button class="btn btn-default" type="button">默认大小</button>
            </td>
            <td>默认大小</td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-sm btn-primary" type="button">较小的按钮</button>
              <button class="btn btn-sm" type="button">较小的按钮</button>
            </td>
            <td>较小的按钮</td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-mini btn-primary" type="button">迷你按钮</button>
              <button class="btn btn-mini" type="button">迷你按钮</button>
            </td>
            <td></td>
          </tr>
          <tr>
            <td>
              <button class="btn btn-large btn-block btn-primary" type="button">块状按钮</button>
              <button class="btn btn-large btn-block btn-default" type="button">块状按钮</button>
            </td>
            <td>块状按钮会占据整个水平宽度，适合较窄面板中的重要操作。</td>
          </tr>
        </table>
        <h3>按钮的不同状态</h3>
        <table class="table">
          <tr>
            <th class="col-md-4">实例</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <button class="btn btn-default"><i class="icon-edit"></i> 带图标的按钮</button>
            </td>
            <td>在按钮上使用图标有时能起到点睛之笔的效果。</td>
          </tr>
          <tr>
            <td>
              <button type="button" class="btn btn-primary active" data-toggle="button">状态切换按钮</button>
            </td>
            <td>
              状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态，再次点击取消选中状态。
            </td>
          </tr>
          <tr>
            <td>
              <div class="btn-group" data-toggle="buttons-checkbox">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
              </div>
            </td>
            <td>当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件（复选框）。</td>
          </tr>
          <tr>
            <td>
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
              </div>
            </td>
            <td>当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。</td>
          </tr>
          <tr>
            <td>
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default"><i class="icon-star"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-heart"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-heart-empty"></i></button>
              </div>
            </td>
            <td>在互斥的状态切换组中使用图标更加简洁明了。</td>
          </tr>
          <tr>
            <td>
              <button type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>
            </td>
            <td>当一个操作需要花费一定时间时，使用加载按钮会在用户触发后按钮文本更换"正在加载"，直至操作完成。</td>
          </tr>
          <tr>
            <td>
              <a href="#" class="btn btn-primary disabled">已禁用的操作</a>
              <a href="#" class="btn disabled">禁用的操作</a>
            </td>
            <td>当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态，让用户知道按钮不可点击。</td>
          </tr>
        </table>

        <h3>按钮的颜色</h3>
        <p>按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确，与用户期望一致。</p>
        <table class="table">
          <tr>
            <th class="col-md-3">实例</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-default">默认</button></td>
            <td>带渐变的标准灰色按钮</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-primary">主要</button></td>
            <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-info">信息</button></td>
            <td>默认样式的替代样式</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-success">成功</button></td>
            <td>表示成功或积极的动作</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-warning">警告</button></td>
            <td>提醒应该谨慎采取这个动作</td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-danger">危险</button></td>
            <td>表示这个动作危险或存在危险</td>
          </tr>
        </table>
      </section>

      <section id='progress'>
        <div class="page-header"><h2 id="progress">进度条</h2></div>
        <p class="lead">提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
        <p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。 </p>

        <h3>类型</h3>
        <h4>基本类型</h4>
        <table class="table col-md-12" style='text-align:center'>
          <tr>
            <th width='40%'>进度条</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>默认的进度条</td>
          </tr>
        </table>

        <h3>变化</h3>
        <h4>颜色</h4>
        <p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
        <table class="table col-md-12"  style='text-align:center'>
          <tr>
            <th width='40%'>进度条</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>主要/默认</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>信息</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>成功</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                  <span class="sr-only">60% Complete (warning)</span>
                </div>
              </div>
            </td>
            <td>警告</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                <span class="sr-only">80% Complete (danger)</span>
                </div>
              </div>
            </td>
            <td>危险</td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>成功</td>
          </tr>
        </table>

        <h4>效果</h4>
        <p>用一个渐变可以创建条纹效果，在IE8中不可用。</p>
        <table class="table col-md-12" style='text-align:center'>
          <tr>
            <th width='40%'>进度条</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>
              <div class="progress progress-striped" >
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
            </td>
            <td>条纹效果</td>
          </tr>
          <tr>
            <td>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                  <span class="sr-only">45% Complete</span>
                </div>
              </div>
            </td>
            <td><p>运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p></td>
          </tr>
          <tr>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-success" style="width: 35%">
                  <span class="sr-only">35% Complete (success)</span>
                </div>
                <div class="progress-bar progress-bar-warning" style="width: 20%">
                  <span class="sr-only">20% Complete (warning)</span>
                </div>
                <div class="progress-bar progress-bar-danger" style="width: 10%">
                  <span class="sr-only">10% Complete (danger)</span>
                </div>
              </div>
            </td>
            <td><p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p></td>
          </tr>
        </table>
      </section>

      <section id='labels'>
C
* updated documents.  
Catouse 已提交
678 
        <div class="page-header"><h2 id="labels">标签 <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2></div>
C
* updated document files.  
Catouse 已提交
679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 

        <h3>基本样式</h3>
        <table class="table" style='text-align:center'>
          <tr>
            <th width='200px'>标签</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><h1><span class="label">New</span></h1></td>
            <td>h1</td>
          </tr>
          <tr>
            <td><h2><span class="label">New</span></h2></td>
            <td>h2</td>
          </tr>
          <tr>
            <td><h3><span class="label">New</span></h3></td>
            <td>h3</td>
          </tr>
          <tr>
            <td><h4><span class="label">New</span></h4></td>
            <td>h4</td>
          </tr>
          <tr>
            <td><h5><span class="label">New</span></h5></td>
            <td>h5</td>
          </tr>
          <tr>
            <td><h6><span class="label">New</span></h6></td>
            <td>h6</td>
          </tr>
        </table>
C
* changed file structure and remove some unused files.  
Catouse 已提交
711
C
* updated document files.  
Catouse 已提交
712 713 714 715 716 717 718 719 720 
        <h3>徽标</h3>
        <p><code>.label-badge</code></p>
        <div class='example' contenteditable="true">
          <span class="label label-badge">12</span>
          <span class="label label-badge label-primary">Primary</span>
          <span class="label label-badge label-success">Success</span>
          <span class="label label-badge label-info">Info</span>
          <span class="label label-badge label-warning">Warning</span>
          <span class="label label-badge label-danger">Danger</span>
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
721 
        </div>
C
* updated document files.  
Catouse 已提交
722 723 724 725 726 727 728 729 
        <p>小圆点徽标</p>
        <div class='example' contenteditable="true">
          <span class="label label-dot">12</span>
          <span class="label label-dot label-primary"></span>
          <span class="label label-dot label-success"></span>
          <span class="label label-dot label-info">Info</span>
          <span class="label label-dot label-warning">Warning</span>
          <span class="label label-dot label-danger">Danger</span>
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
730 
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
731
C
* updated document files.  
Catouse 已提交
732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 
        <p>按钮中的徽标</p>
        <div class='example' contenteditable="true">
          <button class="btn">列表 <span class="label label-badge">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-primary">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-success">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-info">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-warning">12</span></button>
          <button class="btn">处理错误 <span class="label label-badge label-danger">12</span></button>
          <br><br>
          <button class="btn btn-primary">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-success">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-info">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-warning">联系人 <span class="label label-badge">12</span></button>
          <button class="btn btn-danger">联系人 <span class="label label-badge">12</span></button>
          <br><br>
          <button class="btn">列表 <span class="label label-dot">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-primary">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-success">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-info">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-warning">12</span></button>
          <button class="btn">处理错误 <span class="label label-dot label-danger">12</span></button>
          <br><br>
          <button class="btn btn-primary">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-success">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-info">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-warning">联系人 <span class="label label-dot">12</span></button>
          <button class="btn btn-danger">联系人 <span class="label label-dot">12</span></button>
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
759 
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
760
C
* updated document files.  
Catouse 已提交
761 762 763 764 765 766 767 768 769 
        <p>列表组中的徽标和标签</p>
        <div class='example' contenteditable="true">
          <div class="list-group">
            <a href="#" class="list-group-item">用div &gt; a实现，实现整行点击 <span class="label label-primary">Primary</span></a>
            <a href="#" class="list-group-item">todo </a>
            <a href="#" class="list-group-item">story <span class="label label-badge label-primary">Primary</span></a>
            <a href="#" class="list-group-item active">task active <span class="label label-dot"></span></a>
            <a href="#" class="list-group-item">bug <span class="label label-badge label-warning">Warning</span></a>
            <a href="#" class="list-group-item">case <span class="label label-dot label-danger"></span><span class="label label-badge label-danger pull-right">123</span></a>
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
770 771 
          </div>
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
772
C
* updated document files.  
Catouse 已提交
773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 
        <h3>标签和徽标的颜色</h3>
        <table class="table" style='text-align:left'>
          <tr>
            <th width='200px'>标签</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><span class="label">Default</span></td>
            <td><code>.label-default</code></td>
          </tr>
          <tr>
            <td><span class="label label-primary">Primary</span></td>
            <td><code>.label-primary</code></td>
          </tr>
          <tr>
            <td><span class="label label-success">Success</span></td>
            <td><code>.label-success</code></td>
          </tr>
          <tr>
            <td><span class="label label-info">Info</span></td>
            <td><code>.label-info</code></td>
          </tr>
          <tr>
            <td><span class="label label-warning">Warning</span></td>
            <td><code>.label-warning</code></td>
          </tr>
          <tr>
            <td><span class="label label-danger">Danger</span></td>
            <td><code>.label-danger</code></td>
          </tr>
        </table>
      </section>
A
* finish task#1721.  
azhi 已提交
805
C
* updated document files.  
Catouse 已提交
806 
      <section id='textbox'>
C
* updated documents.  
Catouse 已提交
807 
        <div class="page-header"><h2>文本框  <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2></div>
C
* updated document files.  
Catouse 已提交
808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 

        <h3>类型</h3>
        <h4>基本类型</h4>
        <table class="table">
          <tr>
            <th width='200px'>文本框</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><input type="email" class='form-control'placeholder="Enter email"></td>
            <td>input type='email'</td>
          </tr>
          <tr>
            <td><input type="text" class='form-control' placeholder="Text input"></td>
            <td>input type='text'</td>
          </tr>
          <tr>
            <td><input type="checkbox" value=""></td>
            <td>input type='checkbox'</td>
          </tr>
          <tr>
            <td><input type="radio" checked></td>
            <td>input type='radio''</td>
          </tr>
          <tr>
            <td><textarea class='form-control' rows="3"></textarea></td>
            <td>textarea row='3'</td>
          </tr>
          <tr>
            <td><input type="file" value=""></td>
            <td>file</td>
          </tr>
          <tr>
            <td>
              <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </td>
            <td>select </td>
          </tr>
        </table>
C
* changed file structure and remove some unused files.  
Catouse 已提交
853
C
* updated document files.  
Catouse 已提交
854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 

        <h3>状态</h3>
        <table class="table">
          <tr>
            <th width='200px'>文本框</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><input class="form-control"  type="text" placeholder="Disabled input here..." disabled><br /></td>
            <td>禁用：input type='text' diabled</td>
          </tr>
          <tr>
            <td><input class="form-control form-focus"  type="text" placeholder="Focused input here..."><br /></td>
            <td>焦点：input type='text' class='form-focus'</td>
          </tr>
          <tr>
            <td>
              <div class='has-warning'>
                <input class="form-control" type="text" placeholder="Has warnig input here...">
              </div><br />
            </td>
            <td>has-warning</td>
          </tr>
          <tr>
            <td>
              <div class='has-error'>
                <input class="form-control"   type="text" placeholder="Has error input here...">
              </div><br />
            </td>
            <td>has-error</td>
          </tr>
          <tr>
            <td>
              <div class='has-success'>
                <input class="form-control" type="text" placeholder="Has success input here...">
              </div><br />
            </td>
            <td>has-success</td>
          </tr>
        </table>

        <h3>变化</h3>
        <h4>高度</h4>
        <table class="table">
          <tr>
            <th width='200px'>文本框</th>
            <th>描述</th>
          </tr>
          <tr>
            <td><input class="form-control input-lg" type="text" placeholder=".input-lg"></td>
            <td>.input-lg</td>
          </tr>
          <tr>
            <td><input class="form-control" type="text" placeholder="Default input"></td>
            <td>Default iinput</td>
          </tr>
          <tr>
            <td><input class="form-control input-sm" type="text" placeholder=".input-sm"></td>
            <td>.input-sm</td>
          </tr>
        </table>

        <h4>宽度</h4>
        <div class="row">
          <div class="col-xs-2">
            <input type="text" class="form-control" placeholder=".col-xs-2">
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
920 
          </div>
C
* updated document files.  
Catouse 已提交
921 922 
          <div class="col-xs-3">
            <input type="text" class="form-control" placeholder=".col-xs-3">
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
923 
          </div>
C
* updated document files.  
Catouse 已提交
924 925 
          <div class="col-xs-4">
            <input type="text" class="form-control" placeholder=".col-xs-4">
A
* change the doc of progress same with semantic-ui.  
azhi 已提交
926 927 
          </div>
        </div>
C
* updated document files.  
Catouse 已提交
928 
      </section>
A
* add labels.  
azhi 已提交
929
C
* updated document files.  
Catouse 已提交
930 931 
      <section id='breadcrumb'>
        <div class="page-header">
C
* updated documents.  
Catouse 已提交
932 
          <h2>面包屑  <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
C
* updated document files.  
Catouse 已提交
933 934 935 936 937 938 939 
        </div>
        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
      </section>
A
* add labels.  
azhi 已提交
940
C
* updated document files.  
Catouse 已提交
941 942 
      <section id="images">
        <div class="page-header">
C
* updated documents.  
Catouse 已提交
943 
          <h2>图片  <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
C
* updated document files.  
Catouse 已提交
944 945 946 947 
        </div>
        <h3>类型</h3>
        <h4>圆角图片</h4>
        <p><code>.img-rounded</code></p>
C
* changed file structure and remove some unused files.  
Catouse 已提交
948 
        <div class="example"><img src="img/img2.jpg" width="200px" height="200px" class='img-rounded' alt=""></div>
C
* updated document files.  
Catouse 已提交
949 950 
        <h4>圆形图片</h4>
        <p><code>.img-circle</code></p>
C
* changed file structure and remove some unused files.  
Catouse 已提交
951 
        <div class="example"><img src="img/img2.jpg" width="200px" height="200px" class='img-circle' alt=""></div>
C
* updated document files.  
Catouse 已提交
952 953 
        <h4>缩略图</h4>
        <p><code>.img-thumbnail</code></p>
C
* changed file structure and remove some unused files.  
Catouse 已提交
954 
        <div class="example"><img src="img/img2.jpg" width="200px" height="200px" class='img-thumbnail' alt=""></div>
C
* updated document files.  
Catouse 已提交
955 956 957 958 
        <h3>参数</h3>
        <h4>响应式图片</h4>
        <p>图片最大宽度将不会超过父级容器。<code>.img-responsive</code></p>
        <div class="example">
C
* changed file structure and remove some unused files.  
Catouse 已提交
959 
           <div class='panel' style='width: 250px;'><img src="img/img2.jpg" class='img-responsive' alt=""></div>
C
* updated document files.  
Catouse 已提交
960 961 
        </div>
      </section>
A
* finish task#1720.  
azhi 已提交
962
C
* updated documents.  
Catouse 已提交
963 
      <section id="headers">
C
* updated document files.  
Catouse 已提交
964 
        <div class="page-header">
C
* updated documents.  
Catouse 已提交
965 
          <h2>标题  <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
C
* updated document files.  
Catouse 已提交
966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 
        </div>
        <h3>类型</h3>
        <h4>标准内容标题</h4>
        <p>内容标题用来对一段内容进行总结。内容标题有1-6个级别，用html中的<code>h1</code>、<code>h2</code>...<code>h6</code>来应用样式</p>
        <table class="table">
          <thead>
            <tr>
              <th style="width:30%">元素</th>
              <th>标签</th>
              <th>像素大小</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <h1>Heading1 一级标题</h1>
              </td>
              <td><code>&lt;h1&gt;</code></td>
              <td>28px</td>
              <td>在一个页面（或在<code>hgroup</code>标记的范围内）只有一个页面标题。</td>
            </tr>
            <tr>
              <td><h2>Heading2 二级标题</h2></td>
              <td><code>&lt;h2&gt;</code></td>
              <td>24px</td>
              <td>作为页面第二级标题，可能在一个页面中使用到多个二级标题。</td>
            </tr>
            <tr>
              <td><h3>Heading3 三级标题</h3></td>
              <td><code>&lt;h3&gt;</code></td>
              <td>20px 粗体</td>
              <td>页面第三级标题，嵌套在二级标题下使用。</td>
            </tr>
            <tr>
              <td><h4>Heading4 四级标题</h4></td>
              <td><code>&lt;h4&gt;</code></td>
              <td>16px 粗体</td>
              <td>页面第四级标题，嵌套在三级标题下使用。</td>
            </tr>
            <tr>
              <td><h5>Heading5 五级标题</h5></td>
              <td><code>&lt;h5&gt;</code></td>
              <td>14px 粗体 颜色灰色</td>
              <td>页面第五级标题，嵌套在四级标题下使用。</td>
            </tr>
            <tr>
              <td><h6>Heading6 六级标题</h6></td>
              <td><code>&lt;h6&gt;</code></td>
              <td>12px 粗体 颜色灰色</td>
              <td>页面第六级标题，嵌套在五级标题下使用。</td>
            </tr>
              </tbody>
        </table>
C
* changed file structure and remove some unused files.  
Catouse 已提交
1020
C
* updated document files.  
Catouse 已提交
1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 
        <h4>带额外内容的标题</h4>
        <p>标题中可以加入解释性的文本，这些文本通过一个<code>small</code>标签加入。</p>
        <div class="example" contenteditable="true">
          <h1>Heading1 标题1 <small>额外的标题 secondary headings</small></h1>
          <h2>Heading2 标题2 <small>额外的标题 secondary headings</small></h2>
          <h3>Heading3 标题3 <small>额外的标题 secondary headings</small></h3>
          <h4>Heading4 标题4 <small>额外的标题 secondary headings</small></h4>
          <h5>Heading5 标题5 <small>额外的标题 secondary headings</small></h5>
          <h6>Heading6 标题6 <small>额外的标题 secondary headings</small></h6>
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
1031
C
* updated document files.  
Catouse 已提交
1032 1033 1034 1035 
        <h4>单独一行的解释性文本</h4>
        <div class="example" contenteditable="true">
          <h2>Heading1 标题1 <small class="block">这是关于标题的解释性文本 secondary headings</small></h2>
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
1036
C
* updated document files.  
Catouse 已提交
1037 1038 1039 1040 1041 
        <h4>带图标的标题</h4>
        <p>页面标题使用额外的<code>div.header</code>来为页面内容提供更多的样式控制，与其他控件完美整合在一起。</p>
        <div class="example" contenteditable="true">
          <h2><i class="icon icon-film"></i> 带图标的标题</h2>
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
1042
C
* updated document files.  
Catouse 已提交
1043 
        <h3>参数</h3>
C
* changed file structure and remove some unused files.  
Catouse 已提交
1044
C
* updated document files.  
Catouse 已提交
1045 1046 1047 1048 1049 
        <h4><code>.header-block</code></h4>
        <p>带背景颜色的标题。</p>
        <div class="example" contenteditable="true">
          <h3 class="header-block">标题</h3>
        </div>
C
* changed file structure and remove some unused files.  
Catouse 已提交
1050
C
* updated document files.  
Catouse 已提交
1051 1052 1053 1054 1055 1056 
        <h4><code>.header-dividing</code></h4>
        <p>带底部水平分隔线的标题</p>
        <div class="example" contenteditable="true">
          <h3 class="header-dividing">标题</h3>
        </div>
      </section>
A
* finish task#1720.  
azhi 已提交
1057
C
* updated document files.  
Catouse 已提交
1058 1059 
      <section id="dividers">
        <div class="page-header">
C
* updated documents.  
Catouse 已提交
1060 
           <h2>分隔线  <small class='label label-info' title='此内容也在精简版中提供'>LITE</small></h2>
C
* updated document files.  
Catouse 已提交
1061 
        </div>
A
* finish task#1720.  
azhi 已提交
1062
C
* updated document files.  
Catouse 已提交
1063 1064 1065 1066 1067 1068 
        <h3>类型</h3>
        <h4>水平分隔线</h4>
        <div class="example" contenteditable="true">
          <hr>
        </div>
      </section>
A
* finish task#1720.  
azhi 已提交
1069 1070 

    </div>
C
* updated documents.  
Catouse 已提交
1071
C
* changed file structure and remove some unused files.  
Catouse 已提交
1072 1073 1074 1075 
    <script src="../assets/jquery.js"></script>
    <script src="../dist/js/zui.min.js"></script>
    <script src="../assets/google-code-prettify/prettify.js"></script>
    <script src="js/doc.js"></script>
C
* updated document files.  
Catouse 已提交
1076 1077 
  </body>
</html>