正常:
.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>
这里需要配合js在input 的focus的时候加上.input-group--focus
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属性实现
椭圆形用.switch--round类名修饰
checked状态可以使用.switch--checked类名或者checked属性修饰
disabled状态可以使用.switch--disabled类名或者disabled属性修饰
小尺寸:.switch--sm
使用的dropdown的样式,但是为了降低使用难度,组件需要单独封装,
.dropdown类或者其他声明为 position:
relative;的元素.<a> or <button>
都可以触发dropdown
基础 & 尺寸
focus状态
可搜索
多选
分组
拖动点在没有拖动的时候默认的cursor为grab,按住鼠标的时候需添加slider__handle--dragging把cursor变为grabbing
disabled属性或者.slider--disabled
大尺寸:.slider--lg 小尺寸:.slider--sm
disabled状态:disabled属性或者.form-input-number--disabled
请注意!上面的设置只是样式的设置,input标签依然需要设置disabled属性来使输入框真正不可使用
.form--lg.form--smSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
With supporting text below as a natural lead-in to additional content.
Go somewhereLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereThis 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
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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
progress
progress--sm
progress-circle--lg
progress-circle--md
progress-circle--sm
1976年
Apple I 问世
1984年
发布 Macintosh
2007年
发布 iPhone
2010年
发布 iPad
2011年10月5日
史蒂夫·乔布斯去世
时间段显示在左边需要.timeline--horizontal
Apple I 问世
Apple I 问世
发布 Macintosh
发布 Macintosh
发布 iPhone
发布 iPhone
发布 iPad
发布 iPad
史蒂夫·乔布斯去世
史蒂夫·乔布斯去世
包含5种状态:默认、success(.timeline__item-node--success)、info(.timeline__item-node--info)、warning(.timeline__item-node--warning)、danger(.timeline__item-node--danger)
Apple I 问世
Apple I 问世
发布 Macintosh
发布 Macintosh
发布 iPhone
发布 iPhone
发布 iPad
发布 iPad
史蒂夫·乔布斯去世
史蒂夫·乔布斯去世
Apple I 问世
Apple I 问世
发布 Macintosh
发布 Macintosh
发布 iPhone
发布 iPhone
发布 iPad
发布 iPad
史蒂夫·乔布斯去世
史蒂夫·乔布斯去世
默认、
.tag--success、
.tag--danger、
.tag--dark、
.tag--warning、
.tag--muted、
.tag--info
文本
HC HC HC HC HC图片
大小 增加 avatar--sm为小尺寸
可结合 bg--*改变文本类头像的背景色
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
展开节点:可以在.tree__node 后面添加.tree__node--open类名实现
mini steps
steps with description
mini vertical steps
vertical steps with description
大尺寸:.pagination--lg 小尺寸:.pagination--sm
disabled:.pagination__item--disabled 或者disabled属性
.pagination--border-0
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.| 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 |
| 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 |
| 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 |
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