我是标题，1级标题

我是标题， 2级标题

我是标题， 3级标题

上述事例代码

{% titleB h1, 我是标题， 1级标题 %}
{% titleB h2, 我是标题， 2级标题, #895546 %}
{% titleB h3, 我是标题， 3级标题, red %}

段落文本标签演示效果

我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多

上述事例代码

{% p yellow, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p primary, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p info, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p warning, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p danger, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p success, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p red, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p green, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p blue, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center large danger, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center large info, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}
{% p center small, 我是一个文本高亮大萨达所多撒多撒多撒大多多撒多撒多撒大所多撒大多 %}

文本高亮标签演示效果

这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文本高亮，唱着我们心肠的曲折

上述事例代码

这是一个简单的文字{% pbg yellow, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg info, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg warning, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg danger, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg success, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg red, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg green, 我是一个文本高亮 %}，唱着我们心肠的曲折 
这是一个简单的文字{% pbg blue, 我是一个文本高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% pbg cyan, 我是一个文本高亮 %}，唱着我们心肠的曲折

文字颜色标签演示效果

这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折

我是一个居中文字高亮

这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折
这是一个简单的文字我是一个文字高亮，唱着我们心肠的曲折

上述事例代码

这是一个简单的文字{% span yellow, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span primary, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span info, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span warning, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span danger, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span success, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span red, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span green, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span blue, 我是一个文字高亮 %}，唱着我们心肠的曲折
{% span center green, 我是一个居中文字高亮 %}
这是一个简单的文字{% span large, 我是一个文字高亮 %}，唱着我们心肠的曲折
这是一个简单的文字{% span small danger, 我是一个文字高亮 %}，唱着我们心肠的曲折

Text文本样式标签演示

带下划线的文本

带着重号的文本

带波浪线的文本

带 ~~删除线~~ 的文本

键盘样式的文本 command + D

密码样式的文本：这里没有验证码

上述事例代码

{% title h2, Text文本样式标签演示 %}

带 {% u 下划线 %} 的文本

带 {% emp 着重号 %} 的文本

带 {% wavy 波浪线 %} 的文本

带 {% del 删除线 %} 的文本

键盘样式的文本 {% kbd command %} + {% kbd D %}

密码样式的文本：{% psw 这里没有验证码 %}

Note标签演示效果

markdown默认写法，左边框颜色，随着主题色改变

我有一只小毛驴，我从来都不骑。

适合引用一段话

这是一个警告

这是一个错误

这是一个成功

这是一个信息

上述事例代码

> markdown默认写法，左边框颜色，随着主题色改变

{% note, 我有一只小毛驴，我从来都不骑。 %}

{% note quote, 适合引用一段话 %}

{% note warning, 这是一个警告 %}

{% note danger, 这是一个错误 %}

{% note success, 这是一个成功 %}

{% note info, 这是一个信息 %}

NoteBlock标签演示效果

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

标题（可选）

asdsd

上述事例代码

{% noteblock base, 标题（可选） %}
    asdsd
{% endnoteblock %}

{% noteblock quote, 标题（可选） %}
    asdsd
{% endnoteblock %}

{% noteblock warning, 标题（可选） %}
    asdsd
{% endnoteblock %}

{% noteblock success, 标题（可选） %}
    asdsd
{% endnoteblock %}

{% noteblock danger, 标题（可选） %}
    asdsd
{% endnoteblock %}

{% noteblock info, 标题（可选） %}
    asdsd
{% endnoteblock %}

进度条示例

该标签适用版本为1.8.1及以上

进度条测试

自定义颜色(Custom colors)

进度条测试

上述示例代码

{% progress 70 danger 进度条测试 %}
{% progress 60 info 进度条测试 %}
{% progress 60 success 进度条测试 %}
{% progress 60 warning 进度条测试 %}
{% progress 60 primary 进度条测试 %}
自定义颜色(Custom colors)
{% progress 60 #000 进度条测试 %}
{% progress 60 #2f54eb 进度条测试 %}

Link效果

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

上述事例代码

{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

多行链接

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

点击跳转到百度

http://www.baidu.com

上述事例代码

{% linkgroup %}
{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}

{% link 点击跳转到百度, http://www.baidu.com, https://cdn.pixabay.com/photo/2018/12/05/13/41/panda-3857754__340.jpg %}
{% endlinkgroup %}

圆形进度条示例

该标签适用版本为2.0.7+及以上

进度条测试

自定义颜色(Custom colors)

70%

上述示例代码

{% progressCircle 70 danger 进度条测试 %}
{% progressCircle 80 info 进度条测试 %}
{% progressCircle 60 success 进度条测试 %}
{% progressCircle 50 warning 进度条测试 %}
{% progressCircle 90 primary 进度条测试 %}
自定义颜色(Custom colors)
{% progressCircle 70 #12e9e9 70% %}
{% progressCircle 70 skyblue 70% %}

按钮

融入段落中按钮

不设置任何参数的按钮适合融入段落中。

上述实例源码

不设置任何参数的 {% btn 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn warning, 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn info, 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn success, 按钮, / %} 适合融入段落中。

不设置任何参数的 {% btn danger, 按钮, / %} 适合融入段落中。

空心和实心按钮

示例博客示例博客

上述实例源码

{% btn hollow, 示例博客, https://baidu.com, fab fa-qq %}
{% btn solid, 示例博客, https://baidu.com, fab fa-weixin %}

大点的按钮和样式

开始使用

上述实例源码

{% btn center large, 开始使用, https://baidu.com, fa fa-download %}

环形按钮

开始使用

上述实例源码

{% btn center large round solid, 开始使用, https://baidu.com, fa fa-download %}

warning等颜色按钮

开始使用开始使用开始使用开始使用开始使用

上述实例源码

{% btn large round solid warning, 开始使用, https://baidu.com, fa fa-download %}
{% btn large round solid info, 开始使用, https://baidu.com, fa fa-download %}
{% btn large round solid success, 开始使用, https://baidu.com, fa fa-download %}
{% btn large round solid danger, 开始使用, https://baidu.com, fa fa-download %}
{% btn large solid success, 开始使用, https://baidu.com, fa fa-download %}

warning等颜色空心按钮

开始使用开始使用开始使用开始使用开始使用

上述实例源码

{% btn large warning hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn large info hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn large success hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn large danger hollow, 开始使用, https://baidu.com, fa fa-download %}
{% btn success hollow, 开始使用, https://baidu.com, fa fa-download %}

warning等颜色空心环形居中按钮

开始使用开始使用

上述实例源码

{% btn large danger hollow center round, 开始使用, https://baidu.com, fa fa-download %}
{% btn danger hollow center round, 开始使用, https://baidu.com, fa fa-download %}

带有头像和名称的按钮

草帽海贼团

小绵羊

沫兮

凯爹

阿离

韩信

上述实例源码

{% btns circle grid2 %}
  {% cell 草帽海贼团, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/007e3777e7e64c4aae95ae812708a7bf!400x400.jpeg %}
  {% cell 小绵羊, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/4c59f9dd4aae421fae21344aec8c7b60!400x400.jpeg %}
  {% cell 沫兮, https://baidu.com, https://img2.woyaogexing.com/2021/01/30/1b2aec116f0b49c682badc5befd43905!400x400.jpeg %}
  {% cell 凯爹, https://baidu.com, https://p.qqan.com/up/2021-1/16112058848478910.jpg %}
  {% cell 阿离, https://baidu.com, https://p.qqan.com/up/2021-1/16118869719896010.jpg %}
  {% cell 韩信, https://baidu.com, https://p.qqan.com/up/2021-1/16118869704182020.jpg %}
{% endbtns %}

一行三个带有头像和名称的按钮

QQ头像

随机动漫男头像

上述实例源码

{% btns circle grid3 %}
  {% cell QQ头像, https://baidu.com, http://q1.qlogo.cn/g?b=qq&nk=1730241541&s=640 %}
  {% cell 随机动漫头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c1&format=images %}
  {% cell 随机男生头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=a1&format=images %}
  {% cell 随机女生头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=b1&format=images %}
  {% cell 随机动漫女头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c2&format=images %}
  {% cell 随机动漫男头像, https://baidu.com, http://api.btstu.cn/sjtx/api.php?lx=c3&format=images %}
{% endbtns %}

一行四个带有头像和名称的按钮

随机Github头像

上述实例源码

{% btns circle grid4 %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
  {% cell 随机Github头像, https://baidu.com, https://api.prodless.com/avatar.png %}
{% endbtns %}

一行五个带有头像和名称的按钮

随机头像

随机头像id

随机风景

上述实例源码

{% btns circle grid5 %}
  {% cell 随机头像, https://baidu.com, https://picsum.photos/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/1/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/2/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/3/200 %}
  {% cell 随机头像id, https://baidu.com, https://picsum.photos/id/4/200 %}
{% endbtns %}

{% btns circle grid5 %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
  {% cell 随机风景, https://baidu.com,   https://api.ixiaowai.cn/gqapi/gqapi.php %}
{% endbtns %}

环形图标按钮

下载源码查看文档

上述事例代码

{% btns rounded grid5 %}
  {% cell 下载源码, /, fa fa-download %}
  {% cell 查看文档, /, fa fa-book %}
{% endbtns %}

环形图标填充按钮

下载源码查看文档

上述事例代码

{% btns rounded grid5 center %}
  {% cell 下载源码, /, fa fa-download %}
  {% cell 查看文档, /, fa fa-book %}
{% endbtns %}

环形图标填充按钮

下载源码查看文档

上述事例代码

{% btns rounded grid5 fill %}
  {% cell 下载源码, /, fa fa-download %}
  {% cell 查看文档, /, fa fa-book %}
{% endbtns %}

圆形图标按钮

这个是微信

微信

这个是支付宝

支付宝

上述示例代码

{% btns circle center grid5 %}
  <a href='/medias/reward/wechat.bmp'>
    <i class='fa fa-apple'></i>
    <b>这个是微信</b>
    {% p red, 微信 %}
    <img src='/medias/reward/wechat.bmp'>
  </a>
  <a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
    <i class='fa fa-apple'></i>
    <b>这个是支付宝</b>
    {% p green, 支付宝 %}
    <img src='/medias/reward/alipay.bmp'>
  </a>
{% endbtns %}

radio标签演示效果

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

warning色

success色

danger色

info色

上述事例代码

{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
{% radio warning, warning色 %}
{% radio success, success色 %}
{% radio danger, danger色 %}
{% radio info, info色 %}

CheckBox图形示例

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

上述示例代码

{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

tab示例

这是栏目1的内容

这是栏目2的内容，以后要记得怎么写

上述示例代码

{% tabs tab-id %}

<!-- tab 栏目1 -->

这是栏目1的内容

<!-- endtab -->

<!-- tab 栏目2 -->

这是栏目2的内容，以后要记得怎么写

<!-- endtab -->

{% endtabs %}

folding效果

图片折叠

查看图片测试

上述事例代码

{% folding 查看图片测试 %}
  ![](https://pic4.zhimg.com/80/v2-5e0b1aaa1994f6d7cb9aac94a6f4e0b3_1440w.jpg)
{% endfolding %}

默认打开的折叠框

查看默认打开的折叠框

这是一个默认打开的折叠框。

上述事例代码

{% folding cyan open, 查看默认打开的折叠框 %}

  这是一个默认打开的折叠框。

{% endfolding %}

代码折叠

查看代码测试

这里写代码高亮部分

###上述事例代码

{% folding green, 查看代码测试 %}
这里写代码高亮部分
{% endfolding %}

列表折叠

查看列表测试

haha
hehe

###上述事例代码

{% folding yellow, 查看列表测试 %}

  - haha
  - hehe

{% endfolding %}

嵌套折叠

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

上述事例代码

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://image.dbbqb.com/202101221115/7cdd741907c2ea150d054d24c4da6594/4d0G' ></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

site-card标签演示效果

上述事例代码

{% sitegroup %}
    {% site 木兮, url=http://www.baidu.com, screenshot=https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg, avatar=https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg, description=这是描述 %}
    {% site yuang01, url=https://yuang01.gitee.io/, screenshot=https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg, avatar=https://pic3.zhimg.com/80/v2-8bb491487280587026cd576b224ca91e_1440w.jpg, description=这是描述哦 %}
    {% site 木兮, url=http://www.baidu.com, screenshot=https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg, avatar=https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg, description=这是描述 %}
    {% site yuang01, url=https://yuang01.gitee.io/, screenshot=https://pic4.zhimg.com/80/v2-f549722dac8f777693c090a92498de0f_1440w.jpg, avatar=https://pic3.zhimg.com/80/v2-8bb491487280587026cd576b224ca91e_1440w.jpg, description=这是描述哦 %}
    {% site 木兮, url=http://www.baidu.com, screenshot=https://pic4.zhimg.com/v2-7fcb0d73e1d90788ccf136e22ba7b1bd_r.jpg, avatar=https://pic4.zhimg.com/80/v2-45eb5749949e7f90a5c788f9bc5721ef_1440w.jpg, description=这是描述 %}
{% endsitegroup %}

timeline时间线标签演示效果

2021-01-01 1.0.3 -> 1.0.3

我是一个测试文字ghghgh。
我是一个测试问题二’qweqw’，请问企鹅请问请问佛挡杀fgfgf佛第三节课。
我是一个测试问题三’fgfgfg’，请问企鹅请问请问佛挡杀trtrtr佛第三节课。

2020-08-15 1.0.2 -> 1.0.2

这是一段测试文字

2020-08-08 1.0.0 -> 1.0.0

我是一个测试文字ghghgh。
我是一个测试问题二’qweqw’，请问企鹅请问请问佛挡杀fgfgf佛第三节课。
我是一个测试问题三’fgfgfg’，请问企鹅请问请问佛挡杀trtrtr佛第三节课。

上述事例代码

{% timeline %}

    {% timenode 2021-01-01 [1.0.3 -> 1.0.3](https://github.com/yuang01/hexo-theme-bamboo) %}
        1. 我是一个测试文字`ghghgh`。
        2. 我是一个测试问题二'qweqw'，请问企鹅请问请问佛挡杀`fgfgf`佛第三节课。
        2. 我是一个测试问题三'fgfgfg'，请问企鹅请问请问佛挡杀`trtrtr`佛第三节课。
    {% endtimenode %}

    {% timenode 2020-08-15 [1.0.2 -> 1.0.2](https://github.com/yuang01/hexo-theme-bamboo) %}
        这是一段测试文字
    {% endtimenode %}

    {% timenode 2020-08-08 [1.0.0 -> 1.0.0](https://github.com/yuang01/hexo-theme-bamboo) %}
        1. 我是一个测试文字`ghghgh`。
        2. 我是一个测试问题二'qweqw'，请问企鹅请问请问佛挡杀`fgfgf`佛第三节课。
        2. 我是一个测试问题三'fgfgfg'，请问企鹅请问请问佛挡杀`trtrtr`佛第三节课。
    {% endtimenode %}
{% endtimeline %}

我是标题，1级标题

我是标题， 2级标题

我是标题， 3级标题

上述事例代码

段落文本标签演示效果

上述事例代码

文本高亮标签演示效果

上述事例代码

文字颜色标签演示效果

上述事例代码

Text文本样式标签演示

上述事例代码

Note标签演示效果

上述事例代码

NoteBlock标签演示效果

上述事例代码

进度条示例

上述示例代码

Link效果

上述事例代码

多行链接

上述事例代码

圆形进度条示例

上述示例代码

按钮

融入段落中按钮

上述实例源码

空心和实心按钮

上述实例源码

大点的按钮和样式

上述实例源码

环形按钮

上述实例源码

warning等颜色按钮

上述实例源码

warning等颜色空心按钮

上述实例源码

warning等颜色空心环形居中按钮

上述实例源码

带有头像和名称的按钮

上述实例源码

一行三个带有头像和名称的按钮

上述实例源码

一行四个带有头像和名称的按钮

上述实例源码

一行五个带有头像和名称的按钮

上述实例源码

环形图标按钮

环形图标按钮

上述事例代码

环形图标填充按钮

上述事例代码

环形图标填充按钮

上述事例代码

圆形图标按钮

上述示例代码

radio标签演示效果

上述事例代码

CheckBox图形示例

上述示例代码

tab示例

tab标签示例如下

上述示例代码

folding效果

图片折叠

上述事例代码

默认打开的折叠框

上述事例代码

代码折叠

列表折叠

嵌套折叠

上述事例代码

site-card标签演示效果

上述事例代码

timeline时间线标签演示效果

上述事例代码

你的赏识是我前进的动力