Bootstrap 圖標網格短代碼
用於生成帶有圖標、標題和描述的圖標網格。
贊助
成為我們的資助者或贊助商，以支持我們的工作。
本頁內容
贊助商
語法
1{{< bs/icon-grid [data] >}}
參數
data
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | data | string | ✓ | - | - | - |
數據文件名。
linkText
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | linkText | string | - | Learn more | - | - |
鏈接文本，為空時整個卡片變為可點擊狀態。
alignment
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | alignment | string | - | start | - | - |
對齊方式：start、center 或 end。
gap
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | gap | number | - | 4 | - | - |
條目間隔，最大為 5。
border
| 索引 | 名稱 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
| - | border | boolean | - | true | - | - |
為 false 時，去除邊框。
數據
數據文件需要存放於 /data 文件夾。
數據條目屬性
title
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
title | - | string | ✓ | - | - | - |
標題。
url
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
url | - | string | - | - | - | - |
詳情頁 URL。
description
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
description | - | string | - | - | - | - |
描述，支持 Markdown。
weight
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
weight | - | number | - | - | - | - |
權重。
icon
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
icon | - | object | - | - | - | - |
圖標。
icon.name
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
icon.name | - | string | ✓ | - | - | - |
圖標名稱。
icon.vendor
| 名稱 | 上下文 | 類型 | 必填 | 默認值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
icon.vendor | - | string | - | bootstrap | - | - |
圖標供應商。
當 linkText 為空時，請確保 description 不包含鏈接。
示例
示例數據文件
data/features.yaml
1- title: Fast
2 description: "Google PageSpeed Insights scored perfect \U0001F4AF of four metrics on mobile and desktop."
3 icon:
4 name: speedometer
5 color: green
6
7- title: Responsive
8 url: bootstrap
9 description: 'Mobile first, built on top of the Bootstrap v5.3.'
10 icon:
11 name: bootstrap
12 color: '#7952B3'
13
14- title: FOSS
15 url: 'https://github.com/hugomods'
16 description: 'Free and open source software, code licensed **MIT**.'
17 icon:
18 name: code
19 vendor: fas
20 color: green
默認鏈接文本
源碼
1{{< bs/icon-grid "features" >}}結果
自定義鏈接文本
源碼
1{{< bs/icon-grid data=features linkText="Read more" >}}結果
空鏈接文本
源碼
1{{< bs/icon-grid data=features linkText="" >}}結果
居中顯示
源碼
1{{< bs/icon-grid data="features" alignment="center" >}}結果
更小的間隔
源碼
1{{< bs/icon-grid data="features" gap=2 >}}結果
無邊框
源碼
1{{< bs/icon-grid data="features" border=false >}}結果