Bootstrap Toggle 短代码
用于生成可切换的导航栏和标签栏。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
The config toggle is useful, but it’s limited to generate configuration code blocks in YAML, TOML and JSON languages. The toggle* shortcodes are designed to be more versatile.
Toggle
Toggle 参数
name
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | name | string | ✓ | - | - | - |
Toggle 的 ID 和名称，每个页面必须唯一。
style
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | style | string | - | tabs | - | - |
样式：tabs、pills、underline。
data
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | data | string | - | - | - | - |
条目数据文件名，当不使用嵌套短代码时必填。
Toggle 条目
Toggle 条目参数
name
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | name | string | ✓ | - | - | - |
Toggle 的 ID 和名称，每个页面必须唯一。
style
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | style | string | - | tabs | - | - |
样式：tabs、pills、underline。
data
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | data | string | - | - | - | - |
条目数据文件名，当不使用嵌套短代码时必填。
示例
数据文件示例
data/bootstrap/toggle-data-file.yaml
1- name: Foo
2 inner: "*Foo* Content with **Markdown**"
3
4- name: Bar
5 inner: "Bar Content without Markdown"
源码
1{{< bs/toggle "data-file" "pills" "bootstrap.toggle-data-file" />}}结果
Foo Content with Markdown
Bar Content without Markdown
嵌套示例
源码
1{{< bs/toggle foobar >}}
2
3 {{% bs/toggle-item Foo %}}
4 *Foo* Content with **Markdown**
5 {{% /bs/toggle-item %}}
6
7 {{< bs/toggle-item Bar >}}
8 Bar Content without Markdown
9 {{< /bs/toggle-item >}}
10
11{{< /bs/toggle >}}结果
Foo Content with Markdown
Bar Content without Markdown
带 Pills 样式的 SDK 示例
源码
1{{< bs/toggle name=sdk style=pills >}}
2
3 {{< bs/toggle-item JS >}}
4 {{< highlight js >}}
5 console.log('hello world');
6 {{< /highlight >}}
7 {{< /bs/toggle-item >}}
8
9 {{< bs/toggle-item PHP >}}
10 {{< highlight php >}}
11 echo 'hello world';
12 {{< /highlight >}}
13 {{< /bs/toggle-item >}}
14
15 {{< bs/toggle-item Go >}}
16 {{< highlight go >}}
17 fmt.Println("hello world")
18 {{< /highlight >}}
19 {{< /bs/toggle-item >}}
20
21{{< /bs/toggle >}}结果
1console.log('hello world');1echo 'hello world';1fmt.Println("hello world")带下划线样式的非全宽、居中示例
源码
1{{< bs/toggle name=underline style=underline fill=false alignment=center >}}
2 {{< bs/toggle-item Foo >}}Foo{{< /bs/toggle-item >}}
3 {{< bs/toggle-item Bar >}}Bar{{< /bs/toggle-item >}}
4{{< /bs/toggle >}}结果
Foo
Bar