瀏覽文檔

Bootstrap 摺疊短代碼

Hugo Modules Authors Razon Yang 2023年3月24日 2 分鐘閱讀 文檔 短代碼 Bootstrap Collapse

用於摺疊內容的短代碼。

贊助

成為我們的資助者或贊助商，以支持我們的工作。

愛發電 GitHub 贊助商 PayPal
本頁內容
贊助商
Bootstrap 摺疊短代碼

語法

1{{< bs/collapse >}}
2{{< /bs/collapse >}}

參數

heading

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

標題。

style

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

樣式：primary、secondary、success、warning、info、danger、light、dark。

expand

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

是否默認展開。

border

索引名稱類型必填默認值版本示例
-borderstring-truev0.21.0-

是否顯示邊框。

rounded

索引名稱類型必填默認值版本示例
-roundedstring-truev0.21.0-

是否啟用圓角邊框。

示例

步驟示例

源碼
 1{{< bs/collapse heading="1. Step One" expand=true >}}
 2First of all ...
 3{{< /bs/collapse >}}
 4
 5{{% bs/collapse "2. Step Two" secondary %}}
 6And then ...
 7{{% /bs/collapse %}}
 8
 9{{% bs/collapse "3. Step Three" success %}}
10**Well done**.
11{{% /bs/collapse %}}
結果
1. Step One
First of all …
And then …
Well done.

文件示例

源碼
 1{{< bs/collapse heading="Configuration" expand=true >}}
 2  {{< bs/config-toggle hugo >}}
 3  params:
 4    message: "Hello world!"
 5  {{< /bs/config-toggle >}}
 6{{< /bs/collapse >}}
 7
 8{{% bs/collapse "Template" %}}
 9  ```go-html-template
10  <div class="greeting">
11    {{ site.Params.message }}
12  </div>
13  ```
14{{% /bs/collapse %}}
結果
Configuration

hugo.yaml

1params:
2  message: Hello world!

hugo.toml

1[params]
2  message = 'Hello world!'

hugo.json

1{
2   "params": {
3      "message": "Hello world!"
4   }
5}

1<div class="greeting">
2  {{ site.Params.message }}
3</div>

列表示例

源碼
11. Item one
22. Item two {{< bs/collapse heading="Inline" expand=true >}}_Inline_ markdown{{< /bs/collapse >}}
33. Item three {{< bs/collapse heading="Code block" expand=true >}}
4  ```sh
5  echo "Hello world"
6  ```
7  {{< /bs/collapse >}}
84. Item four
結果
  1. Item one
  2. Item two
    Inline
    Inline markdown
  3. Item three
    Code block
    1echo "Hello world"
  4. Item four
圖標網格
鏈接按鈕