Bootstrap5 容器

在上一章節(jié)中我們了解到 Bootstrap 需要一個容器元素來包裹網(wǎng)站的內(nèi)容。

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出贛州免費做網(wǎng)站回饋大家。

我們可以使用以下兩個容器類：

• .container 類用于固定寬度并支持響應(yīng)式布局的容器。
• .container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

固定寬度

.container 類用于創(chuàng)建固定寬度的響應(yīng)式頁面。

注意：寬度 (max-width) 會根據(jù)屏幕寬度同比例放大或縮小。

	超級小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px	超級大屏幕 ≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

以下實例中，我們可以嘗試調(diào)整瀏覽器窗口的大小來查看容器寬度在不同屏幕中等變化：

Bootstrap5 .container 實例

<
div

class
=
"
container
"
>

<
h1
>
我的第一個 Bootstrap 頁面
h1
>

<
p
>
這是一些文本。
p
>

div
>

嘗試一下 ?

注意：超級大屏幕 (≥1400px) 是 Bootstrap 5 新增加的， Bootstrap 4 最大的是特大屏幕 (≥1200px)。

100% 寬度

.container-fluid 類用于創(chuàng)建一個全屏幕尺寸的容器，容器始終跨越整個屏幕寬度（width 始終為 100%）：

Bootstrap5 .container-fluid 實例

<
div

class
=
"
container-fluid
"
>

<
h1
>
我的第一個 Bootstrap 頁面
h1
>

<
p
>
使用了 .container-fluid，100% 寬度，占據(jù)全部視口（viewport）的容器。
p
>

div
>

嘗試一下 ?

容器內(nèi)邊距

默認(rèn)情況下，容器都有填充左右內(nèi)邊距，頂部和底部沒有填充內(nèi)邊距。 Bootstrap 提供了一些間距類用于填充邊距。 比如 .pt-5 就是用于填充頂部內(nèi)邊距：

Bootstrap5 實例

<
div

class
=
"
container pt-5
"
>
div
>

嘗試一下 ?

容器的邊框和顏色

Bootstrap 也提供了一些邊框（border）和顏色（bg-dark、bg-primary等）類用于設(shè)置容器的樣式：

Bootstrap5 實例

<
div

class
=
"
container p-5 my-5 border
"
>
div
>

<
div

class
=
"
container p-5 my-5 bg-dark text-white
"
>
div
>

<
div

class
=
"
container p-5 my-5 bg-primary text-white
"
>
div
>

嘗試一下 ?

后面章節(jié)我們會詳細(xì)說明這些樣式。

響應(yīng)式容器

你可以使用 .container-sm|md|lg|xl 類來創(chuàng)建響應(yīng)式容器。

容器的 max-width 屬性值會根據(jù)屏幕的大小來改變。

Class	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px	超級大屏幕 ≥1400px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px

Bootstrap5 實例

<
div

class
=
"
container-sm
"
>
.container-sm
div
>

<
div

class
=
"
container-md
"
>
.container-md
div
>

<
div

class
=
"
container-lg
"
>
.container-lg
div
>

<
div

class
=
"
container-xl
"
>
.container-xl
div
>

<
div

class
=
"
container-xxl
"
>
.container-xxl
div
>

嘗試一下 ?

分享名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5容器
瀏覽地址：http://www.5511xx.com/article/djchoeh.html