# Basic

## 按钮-buttons

## 基础按钮

正常：

.active：

.disabled：

图标：

圆形：圆形按钮需要自己设置width和height一样高

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary"Primary</button>

    <!-- Secondary, outline button -->
    <button type="button" class="btn btn-secondary">Secondary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">Danger</button>

## 幽灵按钮

正常：

.active：

.disabled：

圆形：圆形按钮需要自己设置width和height一样高

白色按钮

正常

active

disabled

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-outline-primary">Primary</button>

    <!-- Secondary, outline button -->
    <button type="button" class="btn btn-outline-secondary">Secondary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-outline-success">Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-outline-info">Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-outline-warning">Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-outline-danger">Danger</button>

## 按钮尺寸

给按钮添加`.btn-lg`或者`.btn-sm`类以实现额外的大小。

    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-secondary btn-sm">Large button</button>

给按钮添加`.btn-block`类，可以创建一个块区域按钮——即那种延展到父元素全宽的按钮。

    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

## 按钮组

### 预定义按钮组

用`.btn-group`把一系列带有`.btn`的按钮包裹起来。

    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-secondary">Left</button>
      <button type="button" class="btn btn-secondary">Middle</button>
      <button type="button" class="btn btn-secondary">Right</button>
    </div>

### 按钮工具栏

将一系列按钮组组合成工具栏以实现更复杂的组件。

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">1</button>
        <button type="button" class="btn btn-secondary">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">8</button>
      </div>
    </div>

### 尺寸

不需要对组中的每个按钮应用按钮尺寸类，只需要对每个`.btn-group`添加`.btn-group-*`类。如果嵌套了多个组，里面每个按钮都会自动获得大小。

    <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
    <div class="btn-group" role="group" aria-label="...">...</div>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

# Form

## Input 输入框

配合js在输入框有内容时候添加`.form-input--clear`显示清除按钮

disabled

大尺寸:`form-control--lg`

小尺寸:`form-control--sm`

### 按钮输入框组

这里需要配合js在input 的focus的时候加上`.input-group--focus`

disabled，这里只有样式，需要把input和button也添加disabled属性

大尺寸: `.input-group--lg`

小尺寸: `.input-group--sm`

### 图标输入框组

disabled

大尺寸：`.input-group--lg`

小尺寸：`.input-group--sm`

## AutoComplete 自动完成

## Search-Filter 搜索框

输入内容的时候需要有清除的图标按钮，使用`.form-input--clear`类名显示标签

大尺寸：`.input-group--lg` 小尺寸：`.input-group--sm`

尺寸
disabled

disabled状态：`disabled`

## Radio 单选框

Check this custom radio Check this custom radio Check this custom radio
Check this custom radio Check this custom radio Check this custom radio

### radio-group

Check this custom radio Check this custom radio Check this custom radio

### radio-group-inline

Check this custom radio Check this custom radio Check this custom radio

## Checkbox

checked状态：可以在`label.form-checkbox` 后面添加`.form-checkbox--checkded`类名实现，也可以在`input.form-checkbox__input`后添加`checked`属性实现

Check this custom checkbox Check this custom checkbox Check this custom checkbox

disabled状态：可以在`label.form-checkbox` 后面添加`.form-checkbox--disabled`类名实现，也可以在`input.form-checkbox__input`后添加`disabled`属性实现

Check this custom checkbox Check this custom checkbox Check this custom checkbox

半选状态：可以在`label.form-checkbox` 后面添加`.form-checkbox--indeterminate`类名实现，也可以在`input.form-checkbox__input`后添加`indeterminate`属性实现

Check this custom checkbox Check this custom checkbox Check this custom checkbox

### checkbox-group

Check this custom checkbox Check this custom checkbox Check this custom checkbox

### checkbox-group-inline

Check this custom checkbox Check this custom checkbox Check this custom checkbox

## Switch 开关

椭圆形用`.switch--round`类名修饰

checked状态可以使用`.switch--checked`类名或者`checked`属性修饰

基本
开 关
disabled

disabled状态可以使用`.switch--disabled`类名或者`disabled`属性修饰

开 关
尺寸

小尺寸：`.switch--sm`

开 关

## select 选择器

使用的dropdown的样式，但是为了降低使用难度，组件需要单独封装，

`.dropdown`类或者其他声明为 `position: relative;`的元素.`<a>` or `<button>` 都可以触发dropdown

基础 & 尺寸

请选择 中国移动
请选择 中国移动
小尺寸&&禁用 中国移动

focus状态

请选择 中国移动

可搜索

中国移动

多选

- 中国电信
- 中国移动
- 中国联通

小尺寸&&禁用

分组

请选择 中国移动

## Slider 滑块

拖动点在没有拖动的时候默认的cursor为`grab`,按住鼠标的时候需添加`slider__handle--dragging`把cursor变为`grabbing`

单范围
25
双范围
20
50
间断点
20
50
Number 0
10
20
30
40
50
60
70
80
90
100
disabled

`disabled`属性或者`.slider--disabled`

20
50
尺寸

大尺寸：`.slider--lg` 小尺寸：`.slider--sm`

20
50
20
50
20
50

## Number-Stepper 数字输入框

disabled状态：`disabled`属性或者`.form-input-number--disabled`

请注意！上面的设置只是样式的设置，input标签依然需要设置`disabled`属性来使输入框真正不可使用

## Rate 评分

基本用法

4星
支持半星评分

支持小于或大于半星只读显示

2.4星
小尺寸

2.4星

  23
  喜欢

15 喜欢

## Upload 上传

支持扩展名：.rar .zip .doc .docx .pdf .jpg...
xxx.doc
xxx.doc
xxx.doc
支持扩展名：.rar .zip .doc .docx .pdf .jpg...
xxx.png
xxx.png
xxx.png
xxx.png
Upload

Click or drag file to this area to upload

支持扩展名：.rar .zip .doc .docx .pdf .jpg...

## Cascader 级联选择

## DatePicker 日期选择器

### 基本操作

#### 日期选择

####

#### 日期时间选择

#### 日期范围选择

### 带快捷选项

### 范围选择

## TimePicker 时间选择器

## Editor

Example 1 changed!

## Form 表单

### 行内排列

Name:
Username:
@

### 表单控件

输入框
选择器
请选择 北京
日期控件
时间控件
单选框
男 女
多选框
吃饭 睡觉 跑步
开关
数字输入框
滑块
文本域
上传控件

### 表单大尺寸 增加 `.form--lg`

输入框
选择器
请选择 北京
日期控件
时间控件
单选框
男 女
多选框
吃饭 睡觉 跑步
开关
数字输入框
滑块
文本域
上传控件

### 表单小尺寸 增加 `.form--sm`

输入框
选择器
请选择 北京
日期控件
时间控件
单选框
男 女
多选框
吃饭 睡觉 跑步
开关
数字输入框
滑块
文本域
上传控件
标题
标题名称
标题名称左对齐
标题
标题名称
标题名称右对齐
标题
标题名称
标题名称顶对齐

### 表单控件

输入框
不能为空！
选择器
请选择 北京
请选择一项！
日期控件
请选择日期！
请选择日期！
时间控件
请选择时间！
请选择时间！
单选框
男 女
请选择性别！
多选框
吃饭 睡觉 跑步
至少选一项！
开关
数字输入框
滑块
文本域
输入了内容
输入正确！

# View

## Alert 警告提示

默认提示信息
success提示信息
warning提示信息
danger提示信息
info提示信息
默认提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
success提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
warning提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
danger提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
info提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
默认提示信息
success提示信息
warning提示信息
danger提示信息
info提示信息
自定义图标的提示信息
success提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
warning提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
danger提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
info提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
自定义图标的提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字

###### 可关闭

消息提示文案
成功提示文案
成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案
自定义关闭内容 不再提示

## Card 卡片

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

Card link Another link

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Featured

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Quote

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Featured

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

#### Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

#### Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

## Message 全局提示

## Notice 通知提醒

一碗鸡汤
一碗鸡汤
程序员可以让步，却不可以退缩，可以羞涩，却不可以软弱，总之，程序员必须是勇敢的
一碗鸡汤
程序员可以让步，却不可以退缩，可以羞涩，却不可以软弱，总之，程序员必须是勇敢的
程序员励志
非优秀的程序员常常把空间和时间消耗殆尽，优秀的程序员则总是有足够的空间和时间去完成编程任务，而且配合近乎完美。

## Modal 对话框

##### Modal title

Modal body text goes here.

## Progress 进度条

`progress`

10%
25%
50%

`progress--sm`

10%
25%
50%

`progress-circle--lg`

80%

`progress-circle--md`

0%

`progress-circle--sm`

0%

## Collapse 折叠面板

Collapsible Group Item #1
Collapsible Group Item #2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem deserunt explicabo, impedit ipsum nulla odit placeat quasi quo rerum. Ad architecto debitis error, nam qui rerum saepe veritatis voluptatum.
Collapsible Group Item #2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Collapsible Group Item #3
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

## Timeline 时间轴

- 1976年

  Apple I 问世

- 1984年

  发布 Macintosh

- 2007年

  发布 iPhone

- 2010年

  发布 iPad

- 2011年10月5日

  史蒂夫·乔布斯去世

时间段显示在左边需要`.timeline--horizontal`

- 1976年

  Apple I 问世

  Apple I 问世

- 1984年

  发布 Macintosh

  发布 Macintosh

- 2007年

  发布 iPhone

  发布 iPhone

- 2010年

  发布 iPad

  发布 iPad

- 2011年10月5日

  史蒂夫·乔布斯去世

  史蒂夫·乔布斯去世

### 状态不同的圆圈颜色

包含5种状态：默认、success(`.timeline__item-node--success`)、info(`.timeline__item-node--info`)、warning(`.timeline__item-node--warning`)、danger(`.timeline__item-node--danger`)

- 1976年

  Apple I 问世

  Apple I 问世

- 1984年

  发布 Macintosh

  发布 Macintosh

- 2007年

  发布 iPhone

  发布 iPhone

- 2010年

  发布 iPad

  发布 iPad

- 2011年10月5日

  史蒂夫·乔布斯去世

  史蒂夫·乔布斯去世

### 自定义图标

- 1976年

  Apple I 问世

  Apple I 问世

- 1984年

  发布 Macintosh

  发布 Macintosh

- 2007年

  发布 iPhone

  发布 iPhone

- 2010年

  发布 iPad

  发布 iPad

- 2011年10月5日

  史蒂夫·乔布斯去世

  史蒂夫·乔布斯去世

## Tag 标签

### 默认

`默认`、 `.tag--success`、 `.tag--danger`、 `.tag--dark`、 `.tag--warning`、 `.tag--muted`、 `.tag--info`

标签 标签 标签 标签 标签 标签 标签 标签

### 标签文字

标签 标签 标签 标签 标签 标签 标签 标签

### 丸状标签

标签 标签 标签 标签 标签

### 状态文字

标签 标签 标签 标签 标签 标签 标签 标签

## 头像

文本

HC HC HC HC HC

图片

大小 增加 `avatar--sm`为小尺寸

HC

可结合 `bg--*`改变文本类头像的背景色

HC HC HC HC HC

## Badge 徽标数

一位数字

3

多位数字

99+ 999+

定位在顶部

10

颜色

3 3 3 3 3

## Tooltip 文字提示

Tooltip on the top
Tooltip on the right
Tooltip on the bottom
Tooltip on the left

## Poptip 气泡提示

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

## Carousel 走马灯

我是第一张幻灯片

我是一段文字描述

我是第二张幻灯片

我是一段文字描述

我是第三张幻灯片

我是一段文字描述

Previous Next

## Tree 树形控件

展开节点：可以在`.tree__node` 后面添加`.tree__node--open`类名实现

#### 基本单选

- 一级内容
  - 二级内容
  - 二级内容
    - 三级内容
    - 三级内容
      - 四级内容
      - 四级内容
  - 二级内容
  - 二级内容

#### 基本多选选

- 一级内容
  - 二级内容
  - 二级内容
    - 三级内容
    - 三级内容
      - 四级内容
      - 四级内容
  - 二级内容
  - 二级内容

# Navigation

## Menu 导航菜单

## Tabs 标签页

更多
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

## Dropdown 下拉菜单

## Breadcrumb 面包屑

## Steps 步骤条

mini steps

Finished
2
In Progress
3
Waiting
error

steps with description

Finished
This is a description
2
In Progress
This is a description
3
Waiting
This is a description
error
This is a description

mini vertical steps

Finished
2
In Progress
3
Waiting
error

vertical steps with description

Finished
This is a description
2
In Progress
This is a description
3
Waiting
This is a description
error
This is a description

## LoadingBar 加载进度条

## Status Message

## scroll-to

## 分页-Pagination

### 基本

大尺寸：`.pagination--lg` 小尺寸：`.pagination--sm`

disabled：`.pagination__item--disabled` 或者`disabled`属性

### 无边框

`.pagination--border-0`

### 更多

### 跳转

### 迷你

### 迷你跳转

## list-group

Normal

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

Hover
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
Active

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

Disabled

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

Contextual classes normal

- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros

Contextual classes hover
Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
With badges

- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1

Custom content

##### List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

##### List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

##### List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

# Data Display

## Table 表格

#### 默认表格

Name | Age | Address | Action
--- | --- | --- | ---
John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions
Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete
Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions

#### 紧凑表格

Name | Age | Address | Action
--- | --- | --- | ---
John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions
Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete
Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions

#### 线条表格

如果不想要表头的背景色，只要去掉`thead`上的`.thead`修饰类

Name | Age | Address | Action
--- | --- | --- | ---
John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions
Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete
Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions

#### 条纹表格

Name | Age | Address | Action
--- | --- | --- | ---
John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions
Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete
Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions

#### 可操作带分页表格

Check this custom checkbox | Name | Age | Address | Action | Operation
--- | --- | --- | --- | --- | ---
Check this custom checkbox | John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions |
Check this custom checkbox | Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete |
Check this custom checkbox | Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions | modify delete

#### 带排序的表格

需要设置`width`才有横向滚动条搭配`.table-wrapper--scroll`

Check this custom checkbox | Name | Age | Address | Action | Operation
--- | --- | --- | --- | --- | ---
Check this custom checkbox | John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions |
Check this custom checkbox | Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete |
Check this custom checkbox | Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions | modify delete

#### 固定列的表格

固定action列

Check this custom checkbox | Name | Age | Address | Action | Operation
--- | --- | --- | --- | --- | ---
Check this custom checkbox | John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions |
Check this custom checkbox | Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete |
Check this custom checkbox | Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions | modify delete

Check this custom checkbox | Name | Age | Address | Action | Operation
--- | --- | --- | --- | --- | ---
Check this custom checkbox | John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions |
Check this custom checkbox | Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete |
Check this custom checkbox | Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions | modify delete

Check this custom checkbox | Name | Age | Address | Action | Operation
--- | --- | --- | --- | --- | ---
Check this custom checkbox | John Brown | 32 | New York No. 1 Lake Park | Action 一 John Brown Delete More actions |
Check this custom checkbox | Jim Green | 42 | London No. 1 Lake Park | Action 一Jim Green Delete |
Check this custom checkbox | Joe Black | 32 | Sidney No. 1 Lake Park | Action 一Joe Black Delete More actions | modify delete

## Calendar

2017年
4月
2017年4月20日
周日 周一 周二 周三 周四 周五 周六

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

30

Sunny Out of Office

1

2

3

4

5

6

7

Sunny Out of Office

8

9

10

11

12

13

14

Sunny Out of Office

15

16

17

18

19

20

21

Sunny Out of Office

22

23

24

25

26

27

28

Sunny Out of Office

29

30

31

1

2

3

4

Sunny Out of Office

5

6

7

8

9

10

undefined, undefinedNaN x

## Transfer 穿梭框

1/5 items

- 内容1
- 内容2
- 内容3
- 内容4
- 内容5

5 items

- 内容1
- 内容2
- 内容3
- 内容4
- 内容5

带搜索框的穿梭框
1/5 items

- 内容1
- 内容2
- 内容3
- 内容4
- 内容5

5 items

- 内容1
- 内容2
- 内容3
- 内容4
- 内容5