Bootstrap 鏈接按鈕短代碼

用於生成鏈接按鈕的短代碼。

語法

閉合語法

1{{< bs/btn-link >}}
2TEXT
3{{< /bs/btn-link >}}

建議用於富文本按鈕,對於嵌套短代碼很有用,比如 圖標

自閉合語法

1{{< bs/btn-link text=TEXT />}}

推薦用於純文本按鈕。

參數

url

索引名稱類型必填默認值版本示例
#0urlstring---

鏈接,將優先使用內部頁面鏈接。

style

索引名稱類型必填默認值版本示例
#1stylestring-primary--

樣式:primarysecondarysuccessdangerwarninginfolightdarklink

outline

索引名稱類型必填默認值版本示例
#2outlinestring-false--

是否啟用 outline 樣式。

size

索引名稱類型必填默認值版本示例
#3sizestring----

按鈕鏈接的大小:smlg

class

索引名稱類型必填默認值版本示例
-classstring----

用於添加額外的 CSS 類名。

示例

源碼
1{{< bs/btn-link url="#self-closing-button-link" text="Self-Closing" />}}
源碼
1{{< bs/btn-link url="#closing-button-link" >}}
2Closing {{< ico vendor=bs name=x-circle >}}
3{{< /bs/btn-link >}}
結果
Closing
源碼
 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 >}}
源碼
1{{< bs/btn-link url="#outline-button-link" outline=true >}}
2Primary outline button link
3{{< /bs/btn-link >}}
源碼
 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 >}}
源碼
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 >}}
源碼
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 >}}