浏览文档

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
文章卡片
示例