瀏覽文檔

Bootstrap 容器短代碼

Hugo Modules Authors 2023年6月29日 2 分鐘閱讀 短代碼 文檔 Container 容器

容器是 Bootstrap 中最基本的佈局元素，使用默認網格系統時必須使用容器。容器用於容納、填充和（有時）居中放置其中的內容。雖然容器可以嵌套，但大多數佈局並不需要嵌套容器。

贊助

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

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

語法

1{{% bs/container %}}
2BODY
3{{% /bs/container %}}

參數

breakpoint

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

容器的 breakpoint：sm、md、lg、xl、xxl、fluid。

class

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

額外的 CSS 類名。

bg

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

背景圖片，支持圖片資源、公共圖片和外部圖片。

bgColor

索引名稱類型必填默認值版本示例
-bgColorstring--v0.19.0-

背景顏色。

示例

源碼
 1{{% bs/container class="text-bg-primary text-center py-3 mb-2" %}}
 2Default container
 3{.mb-0}
 4{{% /bs/container %}}
 5
 6{{% bs/container breakpoint="sm" class="text-bg-primary text-center py-3 mb-2" %}}
 7100% wide until small breakpoint
 8{.mb-0}
 9{{% /bs/container %}}
10
11{{% bs/container breakpoint="md" class="text-bg-primary text-center py-3 mb-2" %}}
12100% wide until medium breakpoint
13{.mb-0}
14{{% /bs/container %}}
15
16{{% bs/container breakpoint="lg" class="text-bg-primary text-center py-3 mb-2" %}}
17100% wide until large breakpoint
18{.mb-0}
19{{% /bs/container %}}
20
21{{% bs/container breakpoint="xl" class="text-bg-primary text-center py-3 mb-2" %}}
22100% wide until extra large breakpoint
23{.mb-0}
24{{% /bs/container %}}
25
26{{% bs/container breakpoint="xxl" class="text-bg-primary text-center py-3 mb-2" %}}
27100% wide until extra extra large breakpoint
28{.mb-0}
29{{% /bs/container %}}
30
31{{% bs/container breakpoint="fluid" class="text-bg-primary text-center py-3 mb-2" %}}
32100% wide at all breakpoints
33{.mb-0}
34{{% /bs/container %}}
結果

Default container

100% wide until small breakpoint

100% wide until medium breakpoint

100% wide until large breakpoint

100% wide until extra large breakpoint

100% wide until extra extra large breakpoint

100% wide at all breakpoints

行