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显示清除按钮

大尺寸: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

Radio 单选框

radio-group

radio-group-inline

Checkbox

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

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

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

checkbox-group

checkbox-group-inline

Switch 开关

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

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

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

小尺寸:.switch--sm

select 选择器

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

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

基础 & 尺寸

中国移动
  • 中国电信
  • 中国移动
  • 中国联通
  • 中石化
  • 中石油
  • 中电网
中国移动
  • 中国电信
  • 中国移动
  • 中国联通
  • 中石化
  • 中石油
  • 中电网
小尺寸&&禁用
  • 中国电信
  • 中国移动
  • 中国联通
  • 中石化
  • 中石油
  • 中电网

focus状态

中国移动
  • 中国电信
  • 中国移动
  • 中国联通
  • 中石化
  • 中石油
  • 中电网

可搜索

  • 中国电信
  • 中国移动
  • 中国联通
  • 中石化
  • 中石油
  • 中电网

多选

  • 中国电信
  • 中国移动
  • 中国联通
  • 中国电信
  • 中国移动
  • 中国联通
  • 中石化
  • 中石油
  • 中电网

分组

中国移动

Slider 滑块

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

Number 0
10
20
30
40
50
60
70
80
90
100

disabled属性或者.slider--disabled

大尺寸:.slider--lg 小尺寸:.slider--sm

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...
支持扩展名:.rar .zip .doc .docx .pdf .jpg...

Click or drag file to this area to upload

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

Cascader 级联选择

DatePicker 日期选择器

基本操作

范围选择

TimePicker 时间选择器

Editor

Example 1 changed!

Form 表单

行内排列

@

表单控件

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

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

表单控件

View


Alert 警告提示

默认提示信息
success提示信息
warning提示信息
danger提示信息
info提示信息
默认提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
success提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
warning提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
danger提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
info提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
默认提示信息
success提示信息
warning提示信息
danger提示信息
info提示信息
自定义图标的提示信息
success提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
warning提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
danger提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
info提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
自定义图标的提示信息
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字 描述文字描述文字描述文字
可关闭
消息提示文案
成功提示文案
成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案
自定义关闭内容 不再提示

Card 卡片

100%x180

Card title

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

Go somewhere
Image cap [100%x180]

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

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
Image cap [100%x180]

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.

Someone famous in Source Title
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
100%x180

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

100%x270

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

100%x180

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

100%x180

Card title

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

Last updated 3 mins ago

100%x180

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 通知提醒

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

Progress 进度条

progress

10%
25%
50%

progress--sm

10%
25%
50%

progress-circle--lg

80%

progress-circle--md

0%

progress-circle--sm

0%

Collapse 折叠面板

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.
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.
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.

Tree 树形控件

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

基本单选

基本多选选

Navigation


Tabs 标签页

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Dapibus ac facilisis in
  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

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 BlackDeleteMore 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 BlackDeleteMore 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 BlackDeleteMore 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 BlackDeleteMore actions

可操作带分页表格

Name Age Address Action Operation
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 BlackDeleteMore actions modify delete

带排序的表格

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

Name Age Address Action Operation
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 BlackDeleteMore actions modify delete

固定列的表格

固定action列

Name Age Address Action Operation
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 BlackDeleteMore actions modify delete
Action
Action 一 John Brown Delete More actions
Action 一Jim Green Delete
Action 一Joe BlackDeleteMore actions

Calendar

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

 

Transfer 穿梭框