* finish task#1742.

 * finish task#1743.

components.html

+---
+layout: default
+title: 组件
+slug: components
+lead: "基本组件设计."
+base_url: "./"
+---
+<section id='panels' class="page-section">
+  <div class="page-header"><h1>面板</h1></div>
+
+  <h3>类型</h3>
+  <h4>基本类型</h4>
+  <div class="panel">
+    <div class="panel-body">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
+  </div>
+  <h4>带标题</h4>
+  <div class="panel">
+    <div class="panel-heading">面板标题</div>
+    <div class="panel-body">面板内容</div>
+  </div>
+  <h4>带脚注</h4>
+  <div class="panel">
+    <div class="panel-body">面板内容</div>
+    <div class="panel-footer">面板脚注</div>
+  </div>
+
+  <h3>变化</h3>
+  <h4>颜色</h4>
+  <div class="panel panel-primary">
+    <div class="panel-heading">.panel-primary</div>
+    <div class="panel-body">面板内容</div>
+  </div>
+  <div class="panel panel-success">
+    <div class="panel-heading">.panel-success</div>
+    <div class="panel-body">面板内容</div>
+  </div>
+  <div class="panel panel-warning">
+    <div class="panel-heading">.panel-warning</div>
+    <div class="panel-body">面板内容</div>
+  </div>
+  <div class="panel panel-danger">
+    <div class="panel-heading">.panel-danger</div>
+    <div class="panel-body">面板内容</div>
+  </div>
+  <div class="panel panel-info">
+    <div class="panel-heading">.panel-info</div>
+    <div class="panel-body">面板内容</div>
+  </div>
+
+  <h4>包含表格</h4>
+  <div class="panel">
+    <!-- Default panel contents -->
+    <div class="panel-heading">Panel heading</div>
+    <!-- Table -->
+    <table class="table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Larry</td>
+          <td>the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <h4>包含列表</h4>
+  <div class="panel">
+    <div class="panel-heading">Panel heading</div>
+    <ul class="list-group">
+      <li class="list-group-item">todo</li>
+      <li class="list-group-item">story</li>
+      <li class="list-group-item">task</li>
+      <li class="list-group-item">bug</li>
+      <li class="list-group-item">case</li>
+    </ul>
+  </div>
+
+  <h4>面板组</h4>
+  <div class='panel-group'>
+    <div class="panel">
+      <div class="panel-heading">面板标题</div>
+      <div class="panel-body">面板内容</div>
+      <div class="panel-footer">面板脚注</div>
+    </div>
+    <div class="panel">
+      <div class="panel-heading">面板标题</div>
+      <div class="panel-body">面板内容</div>
+      <div class="panel-footer">面板脚注</div>
+    </div>
+    <div class="panel">
+      <div class="panel-heading">面板标题</div>
+      <div class="panel-body">面板内容</div>
+      <div class="panel-footer">面板脚注</div>
+    </div>
+  </div>
+
+</section>
+
+<section id='list-group' class="page-section">
+  <div class="page-header"><h1>列表组</h1></div>
+
+  <h3>类型</h3>
+  <h4>基本类型</h4>
+  <ul class="list-group">
+    <li class="list-group-item"><a href='#'>用ul > li实现，点击区域只有文字</a></li>
+    <li class="list-group-item">todo </li>
+    <li class="list-group-item">story</li>
+    <li class="list-group-item">task</li>
+    <li class="list-group-item">bug</li>
+    <li class="list-group-item">case</li>
+  </ul>
+  <h4>链接</h4>
+  <div class="list-group">
+    <a href="#" class="list-group-item">用div > a实现，实现整行点击 </a>
+    <a href="#" class="list-group-item">todo </a>
+    <a href="#" class="list-group-item">story</a>
+    <a href="#" class="list-group-item active">task active</a>
+    <a href="#" class="list-group-item">bug</a>
+    <a href="#" class="list-group-item">case</a>
+  </div>
+
+  <h3>变化</h3>
+  <h4>定制列表内容</h4>
+  <div class="list-group">
+    <a href="#" class="list-group-item">
+      <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
+      <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
+    </a>
+    <a href="#" class="list-group-item active">
+      <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
+      <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
+    </a>
+    <a href="#" class="list-group-item">
+      <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
+      <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
+    </a>
+  </div>
+
+</section>
+

examples/list-group.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>ZUI</title>
+  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
+  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
+  <script type="text/javascript" src="../assets/js/less.js"></script>
+</head>
+
+<body>
+  <section id='list-group' class="page-section">
+    <div class="page-header"><h1>列表组</h1></div>
+
+    <h3>类型</h3>
+    <h4>基本类型</h4>
+    <ul class="list-group">
+      <li class="list-group-item"><a href='#'>用ul > li实现，点击区域只有文字</a></li>
+      <li class="list-group-item">todo </li>
+      <li class="list-group-item">story</li>
+      <li class="list-group-item">task</li>
+      <li class="list-group-item">bug</li>
+      <li class="list-group-item">case</li>
+    </ul>
+    <h4>链接</h4>
+    <div class="list-group">
+      <a href="#" class="list-group-item">用div > a实现，实现整行点击 </a>
+      <a href="#" class="list-group-item">todo </a>
+      <a href="#" class="list-group-item">story</a>
+      <a href="#" class="list-group-item active">task active</a>
+      <a href="#" class="list-group-item">bug</a>
+      <a href="#" class="list-group-item">case</a>
+    </div>
+
+    <h3>变化</h3>
+    <h4>定制列表内容</h4>
+    <div class="list-group">
+      <a href="#" class="list-group-item">
+        <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
+        <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
+      </a>
+      <a href="#" class="list-group-item active">
+        <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
+        <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
+      </a>
+      <a href="#" class="list-group-item">
+        <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
+        <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
+      </a>
+    </div>
+
+  </section>
+</body>
+</html>
+

examples/panels.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>ZUI</title>
+  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
+  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
+  <script type="text/javascript" src="../assets/js/less.js"></script>
+</head>
+
+<body>
+  <section id='panels' class="page-section">
+    <div class="page-header"><h1>面板</h1></div>
+
+    <h3>类型</h3>
+    <h4>基本类型</h4>
+    <div class="panel">
+      <div class="panel-body">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
+    </div>
+    <h4>带标题</h4>
+    <div class="panel">
+      <div class="panel-heading">面板标题</div>
+      <div class="panel-body">面板内容</div>
+    </div>
+    <h4>带脚注</h4>
+    <div class="panel">
+      <div class="panel-body">面板内容</div>
+      <div class="panel-footer">面板脚注</div>
+    </div>
+
+    <h3>变化</h3>
+    <h4>颜色</h4>
+    <div class="panel panel-primary">
+      <div class="panel-heading">.panel-primary</div>
+      <div class="panel-body">面板内容</div>
+    </div>
+    <div class="panel panel-success">
+      <div class="panel-heading">.panel-success</div>
+      <div class="panel-body">面板内容</div>
+    </div>
+    <div class="panel panel-warning">
+      <div class="panel-heading">.panel-warning</div>
+      <div class="panel-body">面板内容</div>
+    </div>
+    <div class="panel panel-danger">
+      <div class="panel-heading">.panel-danger</div>
+      <div class="panel-body">面板内容</div>
+    </div>
+    <div class="panel panel-info">
+      <div class="panel-heading">.panel-info</div>
+      <div class="panel-body">面板内容</div>
+    </div>
+
+    <h4>包含表格</h4>
+    <div class="panel">
+      <!-- Default panel contents -->
+      <div class="panel-heading">Panel heading</div>
+      <!-- Table -->
+      <table class="table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Username</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Mark</td>
+            <td>Otto</td>
+            <td>@mdo</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Jacob</td>
+            <td>Thornton</td>
+            <td>@fat</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Larry</td>
+            <td>the Bird</td>
+            <td>@twitter</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <h4>包含列表</h4>
+    <div class="panel">
+      <div class="panel-heading">Panel heading</div>
+      <ul class="list-group">
+        <li class="list-group-item">todo</li>
+        <li class="list-group-item">story</li>
+        <li class="list-group-item">task</li>
+        <li class="list-group-item">bug</li>
+        <li class="list-group-item">case</li>
+      </ul>
+    </div>
+
+    <h4>面板组</h4>
+    <div class='panel-group'>
+      <div class="panel">
+        <div class="panel-heading">面板标题</div>
+        <div class="panel-body">面板内容</div>
+        <div class="panel-footer">面板脚注</div>
+      </div>
+      <div class="panel">
+        <div class="panel-heading">面板标题</div>
+        <div class="panel-body">面板内容</div>
+        <div class="panel-footer">面板脚注</div>
+      </div>
+      <div class="panel">
+        <div class="panel-heading">面板标题</div>
+        <div class="panel-body">面板内容</div>
+        <div class="panel-footer">面板脚注</div>
+      </div>
+    </div>
+
+  </section>
+</body>
+</html>
+

src/less/basic/variables.less

@@ -306,3 +306,48 @@
 // -------------------------
 @breadcrumb-color:            #ccc;
 @breadcrumb-active-color:     @gray-light;
+
+// List group
+// -------------------------
+@list-group-bg:               #fff;
+@list-group-border:           #ddd;
+@list-group-border-radius:    @border-radius-base;
+
+@list-group-hover-bg:         #f5f5f5;
+@list-group-active-color:     #fff;
+@list-group-active-bg:        @component-active-bg;
+@list-group-active-border:    @list-group-active-bg;
+
+@list-group-link-color:          #555;
+@list-group-link-heading-color:  #333;
+
+// Panels
+// -------------------------
+@panel-bg:                    #fff;
+@panel-inner-border:          #ddd;
+@panel-border-radius:         @border-radius-base;
+@panel-footer-bg:             #f5f5f5;
+
+@panel-default-text:          @gray-dark;
+@panel-default-border:        #ddd;
+@panel-default-heading-bg:    #f5f5f5;
+
+@panel-primary-text:          #fff;
+@panel-primary-border:        @color-primary;
+@panel-primary-heading-bg:    @color-primary;
+
+@panel-success-text:          @state-success-text;
+@panel-success-border:        @state-success-border;
+@panel-success-heading-bg:    @state-success-bg;
+
+@panel-warning-text:          @state-warning-text;
+@panel-warning-border:        @state-warning-border;
+@panel-warning-heading-bg:    @state-warning-bg;
+
+@panel-danger-text:           @state-danger-text;
+@panel-danger-border:         @state-danger-border;
+@panel-danger-heading-bg:     @state-danger-bg;
+
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;

src/less/components/list-group.less

+//
+// List groups
+// --------------------------------------------------
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+.list-group 
+{
+  // No need to set list-style: none; since .list-group-item is block level
+  margin-bottom: 20px;
+  padding-left: 0; // reset padding because ul and ol
+}
+
+// Individual list items
+// -------------------------
+
+.list-group-item 
+{
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  // Place the border on the list items and negative margin up for better styling
+  margin-bottom: -1px;
+  background-color: @list-group-bg;
+  border: 1px solid @list-group-border;
+
+  // Round the first and last items
+  &:first-child { .border-top-radius(@list-group-border-radius); }
+  &:last-child  { margin-bottom: 0; .border-bottom-radius(@list-group-border-radius); }
+
+  // Align badges within list items
+  > .badge { float: right; }
+  > .badge + .badge { margin-right: 5px; }
+
+  // Linked list items
+  a& 
+  {
+    color: @list-group-link-color;
+    .list-group-item-heading { color: @list-group-link-heading-color; }
+    // Hover state
+    &:hover,
+    &:focus { text-decoration: none; background-color: @list-group-hover-bg; }
+  }
+
+  // Active class on item itself, not parent
+  &.active,
+  &.active:hover,
+  &.active:focus 
+  {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: @list-group-active-color;
+    background-color: @list-group-active-bg;
+    border-color: @list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading { color: inherit; }
+    .list-group-item-text { color: lighten(@list-group-active-bg, 40%); }
+  }
+}
+
+// Custom content options
+// -------------------------
+
+.list-group-item-heading { margin-top: 0; margin-bottom: 5px; }
+.list-group-item-text { margin-bottom: 0; line-height: 1.3; }

src/less/components/panels.less

+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel 
+{
+  margin-bottom: @line-height-computed;
+  background-color: @panel-bg;
+  border: 1px solid transparent;
+  border-radius: @panel-border-radius;
+  .box-shadow(0 1px 1px rgba(0,0,0,.05));
+  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
+}
+
+// Panel contents
+.panel-body { padding: 15px; .clearfix(); }
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel 
+{
+  > .list-group 
+  {
+    margin-bottom: 0;
+
+    .list-group-item 
+    {
+      border-width: 1px 0;
+
+      // Remove border radius for top one
+      &:first-child { .border-top-radius(0); }
+      // But keep it for the last one
+      &:last-child { border-bottom: 0; }
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group 
+{
+  .list-group-item:first-child 
+  {
+    border-top-width: 0;
+  }
+}
+
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel 
+{
+  > .table { margin-bottom: 0; }
+  > .panel-body + .table { border-top: 1px solid @table-border-color; }
+}
+
+// Optional heading
+.panel-heading 
+{
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  .border-top-radius(@panel-border-radius - 1);
+}
+
+// Within heading, strip any `h*` tag of it's default margins for spacing.
+.panel-title 
+{
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: ceil((@font-size-base * 1.125));
+  > a { color: inherit; }
+}
+
+// Optional footer (stays gray in every modifier class)
+.panel-footer 
+{
+  padding: 10px 15px;
+  background-color: @panel-footer-bg;
+  border-top: 1px solid @panel-inner-border;
+  .border-bottom-radius(@panel-border-radius - 1);
+}
+
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group
+{
+  // Tighten up margin so it's only between panels
+  .panel 
+  {
+    margin-bottom: 0;
+    border-radius: @panel-border-radius;
+    overflow: hidden; // crop contents when collapsed
+    + .panel { margin-top: 5px; }
+  }
+
+  .panel-heading 
+  {
+    border-bottom: 0;
+    + .panel-collapse .panel-body { border-top: 1px solid @panel-inner-border; }
+  }
+  .panel-footer 
+  {
+    border-top: 0;
+    + .panel-collapse .panel-body { border-bottom: 1px solid @panel-inner-border; }
+  }
+
+  // New subcomponent for wrapping collapsable content for proper animations
+  .panel-collapse { }
+}
+
+// Contextual variations
+.panel-primary { .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); }
+.panel-success { .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); }
+.panel-warning { .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); }
+.panel-danger  { .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); }
+.panel-info    { .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); }

src/less/zui.less

@@ -43,10 +43,12 @@
 // --------------------------------------------------
 
 @import "components/tables.less";
+@import "components/list-group.less";
+@import "components/panels.less";
 
 
 //
 // ASSETS
 // --------------------------------------------------
 
-@import "controls/font-awesome.less";
\ No newline at end of file
+@import "controls/font-awesome.less";