default

        

          
<div class="breadcrumbs-wrapper">
          
  <div class="breadcrumbs-cell">
          
    <i class="fa fa-home"></i>
          
    <span>主页</span>
          
  </div>
          
  <div class="breadcrumbs-cell">
          
    <span>培训考核</span>
          
  </div>
          
  <div class="breadcrumbs-cell">
          
    <span>考核评价</span>
          
  </div>
          
  <div class="breadcrumbs-cell">
          
    <span>...</span>
          
  </div>
          
  ...
          
</div>
        
      

arrow

        

          
<div class="breadcrumbs-wrapper breadcrumbs-arrow">
          
  <div class="breadcrumbs-cell">
          
    <i class="fa fa-home"></i>
          
    <span>主页</span>
          
  </div>
          
  <div class="breadcrumbs-cell">
          
    <span>培训考核</span>
          
  </div>
          
  <div class="breadcrumbs-cell">
          
    <span>考核评价</span>
          
  </div>
          
  <div class="breadcrumbs-cell">
          
    <span>...</span>
          
  </div>
          
  ...
          
</div>
        
      

default

        

          
*HTML*
          
<div data-comp=Collapse data-compatible="true" data-activeindex="0" class="default">
          
  <div class="collapse-panel">
          
    <div "class"="collapse-heading">
          
      <h3 class="collapse-title">股权架构</h3>
          
    </div>
          
    <div "class"="collapse-body">
          
      <div class="collapse-content">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
          
    </div>
          
  </div>
          
  <div class="collapse-panel">
          
    <div "class"="collapse-heading">
          
      <h3 class="collapse-title">股权架构</h3>
          
    </div>
          
    <div "class"="collapse-body">
          
      <div class="collapse-content">2009年9月，国科控股通过北京产权交易所公开挂牌，以27.55亿元的价格，将联想控股有限公司29%的股份转让给中国泛海控股集团有限公司，转让后的股权结构为：国科控股持股36%。</div>
          
    </div>
          
  </div>
          
  ...
          
</div>
        
      

primary

        

          
*HTML*
          
<div data-comp=Collapse data-compatible="false" data-activeindex="0" class="primary">
          
  <div class="collapse-panel">
          
    <div "class"="collapse-heading">
          
      <h3 class="collapse-title">股权架构</h3>
          
    </div>
          
    <div "class"="collapse-body">
          
      <div class="collapse-content">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
          
    </div>
          
  </div>
          
  <div class="collapse-panel">
          
    <div "class"="collapse-heading">
          
      <h3 class="collapse-title">股权架构</h3>
          
    </div>
          
    <div "class"="collapse-body">
          
      <div class="collapse-content">2009年9月，国科控股通过北京产权交易所公开挂牌，以27.55亿元的价格，将联想控股有限公司29%的股份转让给中国泛海控股集团有限公司，转让后的股权结构为：国科控股持股36%。</div>
          
    </div>
          
  </div>
          
  ...
          
</div>
        
      

category-main

        

          
<div class="category-main">
          
  <a href="#" class="category-item">
          
    <p>重要文章</p>
          
    <i class="fa fa-anchor"</i>
          
  </a> 
          
  ...
          
</div>
          

          
*可放置2-3个元素*
        
      

category-bg

category-lof5 nobg

        

          
<div class="category-lof5">
          
  <a href="#" class="category-item">
          
    <div class="icon-bg" style="background:transparent">
          
      <i class="fa fa-anchor"</i>
          
    </div>
          
    <p>重要文章</p>
          
  </a>
          
  ...
          
</div>
          

          
*最多放置5个元素*
        
      

category-lof5 withbg

        

          
<div class="category-lof5">
          
  <a href="#" class="category-item">
          
    <div class="icon-bg" style="background:#f7b7e59">
          
      <i class="fa fa-anchor"</i>
          
    </div>
          
    <p>重要文章</p>
          
  </a>
          
  ...
          
</div>
          

          
*最多放置5个元素*
        
      

category-lof2 left

        

          
<div class="category-lof2 left">
          
  <a href="#" class="category-item">
          
    <div class="item-wrapper">
          
      <div class="icon-bg" style="background:transparent"></i>
          
        <i class="fa fa-bullhorn"></i>
          
      </div>
          
      <div class="info">
          
        <p class="title">政策法规</p>
          
        <p class="describes">描述文字</p>
          
      </div>
          
    </div>
          
  </a>
          
  ...
          
</div>
          

          
*放置2个以上偶数个元素*
        
      

category-lof2 right

        

          
<div class="category-lof2 right">
          
  <a href="#" class="category-item">
          
    <div class="item-wrapper">
          
      <div class="icon-bg" style="background:#5bb5ec"></i>
          
        <i class="fa fa-bullhorn"></i>
          
      </div>
          
      <div class="info">
          
        <p class="title">政策法规</p>
          
        <p class="describes">描述文字</p>
          
      </div>
          
    </div>
          
  </a>
          
  ...
          
</div>
          

          
*放置2个以上偶数个元素*
        
      

category-lof1

        

          
<div class="category-lof1">
          
  <a href="#" class="category-item">
          
    <div class="item-wrapper">
          
      <div class="icon-bg" style="background:#5bb5ec"></i>
          
        <i class="fa fa-bullhorn"></i>
          
      </div>
          
      <div class="info">
          
        <p class="title">政策法规</p>
          
        <p class="describes">描述文字</p>
          
      </div>
          
    </div>
          
  </a>
          
  ...
          
</div>
        
      

category-lof1

        

          
<div class="category-lof1">
          
  <a href="#" class="category-item">
          
    <div class="item-wrapper">
          
      <div class="icon-bg" style="background:#5bb5ec"></i>
          
        <i class="fa fa-bullhorn"></i>
          
      </div>
          
      <div class="info">
          
        <p class="title">政策法规</p>
          
      </div>
          
    </div>
          
  </a>
          
  ...
          
</div>
        
      

category-lof1

        

          
<div class="category-lof1">
          
  <a href="#" class="category-item">
          
    <div class="item-wrapper">
          
      <i class="fa fa-bullhorn" style="color:#73bec1"></i>
          
      <div class="info">
          
        <p class="title">政策法规</p>
          
      </div>
          
    </div>
          
  </a>
          
  ...
          
</div>
        
      

tab-lof5-default

• 首页
• 首页
• 首页
• 首页
• 首页

        

          
<ul class="tab-cell tab-lof5-default">
          
 <li class="tab-item active">
          
  <a>首页</a>
          
 </li>
          
 <li class="tab-item"><a>...</a></li>
          
 <li class="tab-item"><a>...</a></li>
          
 ...
          
</ul>
          

          
*最多放置5个元素*
        
      

tab-lof5-primary

• 首页
• 首页
• 首页
• 首页
• 首页

        

          
<ul class="tab-cell tab-lof5-primary">
          
 <li class="tab-item active">
          
  <a>首页</a>
          
 </li>
          
 <li class="tab-item"><a>...</a></li>
          
 <li class="tab-item"><a>...</a></li>
          
 ...
          
</ul>
          

          
*最多放置5个元素*
        
      

tab-label

• 重要文章
• 重要文章
• 重要文章
• 重要文章

        

          
<ul class="tab-cell tab-label">
          
 <li class="tab-item active">
          
  <a>重要文章</a>
          
 </li>
          
 <li class="tab-item"><a>...</a></li>
          
 <li class="tab-item"><a>...</a></li>
          
 ...
          
</ul>
          

          
*最多放置4个元素*
        
      

tab-lof4

• 首首页
• 首页
• 首页
• 首页

        

          
<ul class="tab-cell tab-lof4">
          
 <li class="tab-item active">
          
  <a>首页</a>
          
 </li>
          
 <li class="tab-item"><a>...</a></li>
          
 <li class="tab-item"><a>...</a></li>
          
 ...
          
</ul>
          

          
*最多放置4个元素*
        
      

tab

预定义样式

        

          
<button type="button" class="btn btn-default">default</button>
          

          
<button type="button" class="btn btn-primary">primary</button>
          

          
<button type="button" class="btn btn-default-line">default-line</button>
          

          
<button type="button" class="btn btn-primary-line">primary-line</button>
        
      

尺寸

        

          
<button type="button" class="btn btn-default btn-large">large button</button>
          

          
<button type="button" class="btn btn-default btn-mini">mini button</button>
        
      

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上，并通过编程的方式使其处于激活状态。

        

          
<button type="button" class="btn btn-default active">default</button>
          

          
<button type="button" class="btn btn-primary active">primary</button>
        
      

链接(<a>)元素

        

          
<a href="#" class="btn btn-default active">default</a>
          

          
<a href="#" class="btn btn-primary active">primary</a>
        
      

禁用状态

button元素

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

        

          
<button type="button" class="btn btn-default" disabled="disabled">default</button>
          

          
<button type="button" class="btn btn-primary" disabled="disabled">primary</button>
          

          
<button type="button" class="btn btn-default-line" disabled="disabled">default-line</button>
          

          
<button type="button" class="btn btn-primary-line" disabled="disabled">primary-line</button>
        
      

链接（<a>）元素

        

          
<a href="#" class="btn btn-default disabled">default</a>
          

          
<a href="#" class="btn btn-primary disabled">primary</a>
        
      

按钮类

为 <a>、<button> 或 <input> 元素应用按钮类

        

          
<a class="btn btn-default" href="#" role="button">Link</a>
          

          
<button class="btn btn-default" type="submit">Button</button>
          

          
<input class="btn btn-default" type="button" value="Input">
          

          
<input class="btn btn-default" type="submit" value="Submit">
          

        
      

        

          
<div class="picture-wrapper">
          
  <a href="#" class="picture-item" style="background-image:url(...)"></a>
          
  <a href="#" class="picture-item" style="background-image:url(...)"></a>
          
  ...
          
</div>
        
      

组件 primary1

组件 primary2

        

          
*HTML*
          
<div id="xxx" class="search-cell">
          
  <div class="search-cell-left">
          
    <i class="fa fa-arrow-left"></i>
          
  </div>
          
  <div class="search-cell-wrapper">
          
    <input class="search-input" name=“search” placeholder="搜索内容">
          
    <input class="search-button" type="button" name=“” value="搜索">
          
  </div>
          
  <div class="search-cell-right">
          
    <i class="fa fa-search"></i>
          
  </div>
          
</div>
          
*JS*
          
var search = new Search('xxx','primary1')
          
          
var search = new Search('xxx','primary2')
        
      

product-row

• 
  Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本 Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本 ¥6188.00
• 
  Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本 ¥6188.00

        

          
<ul class="product-row">
          
  <li class="product-row-cell">
          
    <div class="produce-cell-left">
          
      <img src="..." width="100%">
          
    </div>
          
    <div class="produce-cell-right">
          
      <span class="product-title">Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本</span>
          
      <span class "product-price"><i>&yen;</i>6188.00</span>
          
    </div>
          
  </li>
          
  <li class="product-row-cell">
          
    <div class="produce-cell-left">
          
      <img src="..." width="100%">
          
    </div>
          
    <div class="produce-cell-right">
          
      <span class="product-title">Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本</span>
          
      <span class "product-price"><i>&yen;</i>6188.00</span>
          
    </div>
          
  </li>
          
  ...
          
</ul>
        
      

product-column

• 
  Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本 ¥6188.00
• 
  Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本 ¥6188.00
• 
  Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本 ¥6188.00

        

          
<ul class="product-column">
          
  <li class="product-column-cell">
          
    <div class="product-cell-img">
          
      <img src="..." width="100%">
          
    </div>
          
    <a href="#" class="product-title">Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本</a>
          
    <span class="product-price"><i>&yen;</i>6188.00</span>
          
  </li>
          
  <li class="product-column-cell">
          
    <div class="product-cell-img">
          
      <img src="..." width="100%">
          
    </div>
          
    <a href="#" class="product-title">Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本</a>
          
    <span class="product-price"><i>&yen;</i>6188.00</span>
          
  </li>
          
  ...
          
</ul>
        
      

product-details

        

          
<div class="product-details">
          
  <div class="product-details-cell">
          
    <div class="product-cell-img" style="background-image:url(...)"></div>
          
    <a href="#" class="product-cell-title">Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本Lenovo/联想 YOGA4 Pro yo-ga900-13 i7处理器 固态 触屏 超级本</a>
          
    <span class="product-cell-price"><i>&yen;</i>6188.00</span>
          
  </div>
          
</div>
        
      

基础组件

        

          
*HTML*
          
<div date-comp="Pagination" class="pagination page-deault">
          
  <div class="page-cell-left">
          
    <span>上一页</span>
          
  </div>
          
  <div class="page-cell-wrapper">
          
    <div class="page-menu">
          
      <div class="pagenumber">
          
        <span>1</span>/<span>6</span><i class"fa fa-angle-up"</i>
          
      </div>
          
      <div class="pagenumber-alt" style="height:0;">
          
        <ul>
          
          <a href="#">1</a>
          
          ...
          
        </ul>
          
      </div>
          
    </div>
          
  </div>
          
  <div class="page-cell-right">
          
    <span>下一页</span>
          
  </div>
          
</div>
          

          
*JS*
          
var pagination = new Pagination('js-pagination-select')
        
      

预定义样式

        

          
<div data-comp="Pagination" class="pagination page-default">...</div>
          
<div data-comp="Pagination" class="pagination page-default-normal">...</div>
          
<div data-comp="Pagination" class="pagination page-default-bg">...</div>
          
<div data-comp="Pagination" class="pagination page-main">...</div>
          
<div data-comp="Pagination" class="pagination page-main-default">...</div>
          
<div data-comp="Pagination" class="pagination page-main-bg">...</div>
        
      

不可点击

        

          
<div data-comp="Pagination" class="pagination page-default">
          
  <div class="page-cell-left disable">...</div>
          
  ...
          
</div>
          

          
<div data-comp="Pagination" class="pagination page-default-normal">
          
  ...
          
  <div class="page-cell-right disable">...</div>
          
</div>
          

          
<div data-comp="Pagination" class="pagination page-default-bg">
          
  <div class="page-cell-left disable">...</div>
          
  ...
          
</div>
          

          
<div data-comp="Pagination" class="pagination page-main">
          
  ...
          
  <div class="page-cell-right disable">...</div>
          
</div>
          

          
<div data-comp="Pagination" class="pagination page-main-normal">
          
  <div class="page-cell-left disable">...</div>
          
  ...
          
</div>
          

          
<div data-comp="Pagination" class="pagination page-main-bg">
          
  ...
          
  <div class="page-cell-right disable">...</div>
          
</div>
          

        
      

article-smimg article-default

        

          
<div class="article-smimg article-default">
          
  <header>
          
    <span>图/标题/正文组合</span>
          
  </header>
          
  <nav>
          
    </div> class="article-cell">
          
      <div class="content">
          
        <p class="title">文化建设的“六个一”</p>
          
        <p class="describes">文化建设的“六个一”</p>
          
      </div>
          
      <div class="cell-img">
          
        <img src="..." style="width:100%;" />
          
      </div>
          
    </div>
          
    ...
          
  </nav>
          
</div>
        
      

article-smimg article-more

        

          
<div class="article-smimg article-more">
          
  <header>
          
    <span>图/标题/加载更多</span>
          
  </header>
          
  <nav>
          
    </div> class="article-cell">
          
      <div class="content">
          
        <p class="title">文化建设的“六个一”</p>
          
        <p class="time">2016-08-19 20:09</p>
          
      </div>
          
      <div class="cell-img">
          
        <img src="..." style="width:100%;" />
          
      </div>
          
    </div>
          
    ...
          
  </nav>
          
  <div class="more-tag">
          
    <div class=tag-cell-left>
          
      <span>查看更多</span>
          
    </div>
          
    <div class=tag-cell-right>
          
      <i class="fa fa-angle-right"></i>
          
    </div>
          
  </div>
          
</div>
        
      

article lgimg

        

          
<div class="article-lgimg">
          
  <div class="article-cell article-with-anthor">
          
    <div class="cell-img" style="background-image:url(...)"></div>
          
    <div class="content">
          
      <h2 class="title">xxxxxx</h2>
          
      </div class="describes">
          
        <div class="date">
          
          <p>2015-07-27</p>
          
        </div>
          
        <div class="anthor">
          
          <p>anthor</p>
          
        </div>
          
      </div>
          
    </div>
          
  </div>
          
  ...
          
</div>
          

          
*省略作者可不需要添加class 'article-with-anthor'*
        
      

article onlytitle

        

          
<div class="article-onlytitle">
          
  <div class="article-cell noinfo">
          
    <h4 class="title">xxxxxx</h4>
          
  </div>
          
  <div class="article-cell withinfo">
          
    <h2 class="title">xxxxxx</h2>
          
    <p class="describes">xxxxxx</p>
          
  </div>
          
</div>
        
      

article-midimg

文化建设的“六个一”文化建设的“六个一”

创建时间:2015-07-27

文化建设的“六个一”文化建设的“六个一”

文化建设的“六个一”文化建设的“六个一”文化建设的“六个一”文化建设的“六个一”

文化建设的“六个一”文化建设的“六个一”

作者:老师

创建时间:2015-07-27

        

          
<div class="article-midimg">
          
  <div class="article-cell with-title-day">
          
    <div class="content">
          
      <h2 class="title">xxxxxx</h2>
          
      <div class="describes">
          
        <p class="date">创建时间:205-07-27</p>
          
      </div>
          
    <div class="cell-img" style="background-image:url()"></div>
          
  </div>
          
          
  <div class="article-cell with-info">
          
    <div class="content">
          
      <h2 class="title">xxxxxx</h2>
          
      <div class="describes">xxxxxx</div>
          
    <div class="cell-img" style="background-image:url()"></div>
          
  </div>
          
          
  <div class="article-cell with-title-day">
          
    <div class="content">
          
      <h2 class="title">xxxxxx</h2>
          
      <div class="describes">
          
        <p class="anthor">作者：anthor</p>
          
        <p class="date">创建时间:205-07-27</p>
          
      </div>
          
    <div class="cell-img" style="background-image:url()"></div>
          
  </div>
          
          
</div>