Note (Bootstrap Callout)

用法一：

1
2
3
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
class 【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
no-icon 【可选】不显示 icon
style 【可选】可以覆盖配置中的 style（simple/modern/flat/disabled）

  • simple

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
{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

{% note success simple %}
success 提示块标签
{% endnote %}

{% note info simple %}
info 提示块标签
{% endnote %}

{% note warning simple %}
warning 提示块标签
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  • modern

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
{% note modern %}
默认 提示块标签
{% endnote %}

{% note default modern %}
default 提示块标签
{% endnote %}

{% note primary modern %}
primary 提示块标签
{% endnote %}

{% note success modern %}
success 提示块标签
{% endnote %}

{% note info modern %}
info 提示块标签
{% endnote %}

{% note warning modern %}
warning 提示块标签
{% endnote %}

{% note danger modern %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  • flat

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
{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

{% note success flat %}
success 提示块标签
{% endnote %}

{% note info flat %}
info 提示块标签
{% endnote %}

{% note warning flat %}
warning 提示块标签
{% endnote %}

{% note danger flat %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  • disabled

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
{% note disabled %}
默认 提示块标签
{% endnote %}

{% note default disabled %}
default 提示块标签
{% endnote %}

{% note primary disabled %}
primary 提示块标签
{% endnote %}

{% note success disabled %}
success 提示块标签
{% endnote %}

{% note info disabled %}
info 提示块标签
{% endnote %}

{% note warning disabled %}
warning 提示块标签
{% endnote %}

{% note danger disabled %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

用法二

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称 用法
color 【可选】顔色(default / blue / pink / red / purple / orange / green)
icon 【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style 【可选】可以覆盖配置中的 style
（simple/modern/flat/disabled）

  • simple

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
{% note 'fab fa-cc-visa' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}

{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  • modern

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
{% note 'fab fa-cc-visa' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' modern %}
2021年快到了....
{% endnote %}

{% note pink 'fas fa-car-crash' modern %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' modern %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' modern %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  • flat

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
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}

{% note pink 'fas fa-car-crash' flat %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' flat %}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple 'far fa-hand-scissors' flat %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' flat %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  • disabled

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
{% note 'fab fa-cc-visa' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue 'fas fa-bullhorn' disabled %}
2021年快到了....
{% endnote %}

{% note pink 'fas fa-car-crash' disabled %}
小心开车 安全至上
{% endnote %}

{% note red 'fas fa-fan' disabled %}
这是三片呢？还是四片？
{% endnote %}

{% note orange 'fas fa-battery-half' disabled %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple 'far fa-hand-scissors' disabled %}
剪刀石头布
{% endnote %}

{% note green 'fab fa-internet-explorer' disabled %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

  • no-icon

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
{% note no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note blue no-icon %}
2021年快到了....
{% endnote %}

{% note pink no-icon %}
小心开车 安全至上
{% endnote %}

{% note red no-icon %}
这是三片呢？还是四片？
{% endnote %}

{% note orange no-icon %}
你是刷 Visa 还是 UnionPay
{% endnote %}

{% note purple no-icon %}
剪刀石头布
{% endnote %}

{% note green no-icon %}
前端最讨厌的浏览器
{% endnote %}

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器