免費(fèi)AI編程助手
Bootstrap5 容器
2023-06-19 16:38 更新
在上一章節(jié)中我們了解到 Bootstrap 需要一個(gè)容器元素來(lái)包裹網(wǎng)站的內(nèi)容。
我們可以使用以下兩個(gè)容器類：
- .container 類用于固定寬度并支持響應(yīng)式布局的容器。
- .container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
固定寬度
?.container?類用于創(chuàng)建固定寬度的響應(yīng)式頁(yè)面。
注意：寬度 (max-width) 會(huì)根據(jù)屏幕寬度同比例放大或縮小。
| 超級(jí)小屏幕
<576px |
小屏幕
≥576px |
中等屏幕
≥768px |
大屏幕
≥992px |
特大屏幕
≥1200px |
超級(jí)大屏幕
≥1400px |
|
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
以下實(shí)例中，我們可以嘗試調(diào)整瀏覽器窗口的大小來(lái)查看容器寬度在不同屏幕中等變化：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>這是一些文本。</p>
</div>
</body>
</html>注意：超級(jí)大屏幕 (≥1400px) 是 Bootstrap 5 新增加的， Bootstrap 4 最大的是特大屏幕 (≥1200px)。
100% 寬度
?.container-fluid? 類用于創(chuàng)建一個(gè)全屏幕尺寸的容器，容器始終跨越整個(gè)屏幕寬度（width 始終為 100%）：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>使用了 .container-fluid，100% 寬度，占據(jù)全部視口（viewport）的容器。</p>
</div>
</body>
</html>容器內(nèi)邊距
默認(rèn)情況下，容器都有填充左右內(nèi)邊距，頂部和底部沒(méi)有填充內(nèi)邊距。 Bootstrap 提供了一些間距類用于填充邊距。 比如 .pt-5 就是用于填充頂部?jī)?nèi)邊距：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container pt-5">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>這是一些文本。</p>
</div>
</body>
</html>容器的邊框和顏色
Bootstrap 也提供了一些邊框（border）和顏色（bg-dark、bg-primary等）類用于設(shè)置容器的樣式：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container p-5 my-5 border">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>這個(gè)容器有一個(gè)邊框和一些邊距。</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>這個(gè)容器具有深色背景色和白色文本，以及一些額外的邊距。</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<h1>我的第一個(gè) Bootstrap 頁(yè)面</h1>
<p>這個(gè)容器具有藍(lán)色背景色和白色文本，以及一些額外的邊距。</p>
</div>
</body>
</html>后面章節(jié)我們會(huì)詳細(xì)說(shuō)明這些樣式。
響應(yīng)式容器
你可以使用? .container-sm|md|lg|xl? 類來(lái)創(chuàng)建響應(yīng)式容器。
容器的 ?max-width? 屬性值會(huì)根據(jù)屏幕的大小來(lái)改變。
| Class | 超小屏幕
<576px |
小屏幕
≥576px |
中等屏幕
≥768px |
大屏幕
≥992px |
特大屏幕
≥1200px |
超級(jí)大屏幕
≥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 |
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container pt-3">
<h1>響應(yīng)式容器</h1>
<p>重置瀏覽器大小查看效果.</p>
</div>
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：