文本颜色

通过颜色传达含义,并带有少量强调实用程序类。这些也可以应用于链接,并且在悬停时会变暗,就像我们的默认链接样式一样。

语法

1
2
3
{% textcolor [style] %}
text string
{% endtextcolor %}

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% textcolor muted %}
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
{% endtextcolor %}

{% textcolor primary %}
Nullam id dolor id nibh ultricies vehicula ut id elit.
{% endtextcolor %}

{% textcolor success %}
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
{% endtextcolor %}

{% textcolor info %}
Maecenas sed diam eget risus varius blandit sit amet non magna.
{% endtextcolor %}

{% textcolor warning %}
Etiam porta sem malesuada magna mollis euismod.
{% endtextcolor %}

{% textcolor danger %}
Donec ullamcorper nulla non metus auctor fringilla.
{% endtextcolor %}

结果

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

按钮

插入包含目标链接、文本和指定颜色的按钮。

语法

1
{% btn url text [style] %}

例子

1
2
3
4
5
6
7
8
9
10
11
{% btn http://hahack.com hahack %}

{% btn http://hahack.com hahack primary %}

{% btn http://hahack.com hahack success %}

{% btn http://hahack.com hahack warning %}

{% btn http://hahack.com hahack danger %}

{% btn http://hahack.com hahack info %}

结果

hahack hahack hahack hahack hahack hahack

标签

插入带有文本和指定颜色的标签。

语法

1
{% label text [style] %}

例子

1
2
3
4
5
6
7
8
9
10
11
{% label default %}

{% label warinng warning %}

{% label success success %}

{% label danger danger %}

{% label primary primary %}

{% label info info %}

结果

default warinng success danger primary info

徽章

插入带文本的锁屏提醒。

语法

1
{% badge text %}

例子

1
{% badge 42 %}

结果

42

警报

插入带有文本和指定颜色的警报消息。

语法

1
2
3
{% alert [style] %}
Alert string
{% endalert %}

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% alert warning %}
Best check yo self, you're not looking too good.
{% endalert %}

{% alert danger %}
Change a few things up and try submitting again.
{% endalert %}

{% alert success %}
You successfully read this important alert message.
{% endalert %}

{% alert info %}
This alert needs your attention, but it's not super important.
{% endalert %}

结果

Best check yo self, you're not looking too good.
Change a few things up and try submitting again.
You successfully read this important alert message.
This alert needs your attention, but it's not super important.