Bootstrap 链接按钮短代码
用于生成链接按钮的短代码。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
语法
闭合语法
1{{< bs/btn-link >}}
2TEXT
3{{< /bs/btn-link >}}
建议用于富文本按钮，对于嵌套短代码很有用，比如 图标。
自闭合语法
1{{< bs/btn-link text=TEXT />}}
推荐用于纯文本按钮。
参数
url
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | url | string | ✓ | - | - | - |
链接，将优先使用内部页面链接。
style
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#1 | style | string | - | primary | - | - |
样式：primary、secondary、success、danger、warning、info、light、dark、link。
outline
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#2 | outline | string | - | false | - | - |
是否启用 outline 样式。
size
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#3 | size | string | - | - | - | - |
按钮链接的大小：sm、lg。
class
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | class | string | - | - | - | - |
用于添加额外的 CSS 类名。
示例
Self-Closing Button Link
源码
1{{< bs/btn-link url="#self-closing-button-link" text="Self-Closing" />}}Closing Button Link
源码
1{{< bs/btn-link url="#closing-button-link" >}}
2Closing {{< ico vendor=bs name=x-circle >}}
3{{< /bs/btn-link >}}结果
Closing Button Link Styles
源码
1{{< bs/btn-link "#button-link-styles" "primary" >}}
2Primary
3{{< /bs/btn-link >}}
4
5{{< bs/btn-link url="#button-link-styles" style="secondary" text="Secondary" />}}
6
7{{< bs/btn-link "#button-link-styles" "success" >}}
8Success
9{{< /bs/btn-link >}}
10
11{{< bs/btn-link "#button-link-styles" "danger" >}}
12Danger
13{{< /bs/btn-link >}}
14
15{{< bs/btn-link "#button-link-styles" "warning" >}}
16Warning
17{{< /bs/btn-link >}}
18
19{{< bs/btn-link "#button-link-styles" "info" >}}
20Info
21{{< /bs/btn-link >}}
22
23{{< bs/btn-link "#button-link-styles" "light" >}}
24Light
25{{< /bs/btn-link >}}
26
27{{< bs/btn-link "#button-link-styles" "dark" >}}
28Dark
29{{< /bs/btn-link >}}
30
31{{< bs/btn-link "#button-link-styles" "link" >}}
32Link
33{{< /bs/btn-link >}}Outline Button Link
源码
1{{< bs/btn-link url="#outline-button-link" outline=true >}}
2Primary outline button link
3{{< /bs/btn-link >}}Button Link Sizes
源码
1{{< bs/btn-link url="#button-link-sizes" size=sm >}}
2Smaller button link size
3{{< /bs/btn-link >}}
4
5{{< bs/btn-link url="#button-link-sizes" >}}
6Normal button link size
7{{< /bs/btn-link >}}
8
9{{< bs/btn-link url="#button-link-sizes" size=lg >}}
10Lager button link size
11{{< /bs/btn-link >}}Button Link with Extra Classes
源码
1{{< bs/btn-link url="#button-link-with-extra-classes" size=lg class="d-block py-3 rounded-0" >}}
2Button link with extra classes
3{{< /bs/btn-link >}}External and Internal Button Links
源码
1{{< bs/btn-link "https://hbstack.dev/" >}}
2HB Framework (external)
3{{< /bs/btn-link >}}
4
5{{< bs/btn-link "docs/installation" >}}
6Installation (internal)
7{{< /bs/btn-link >}}