小狐狸事務所: Bootstrap 4 學習筆記 (二) : 網格與容器

2019年11月19日星期二

Bootstrap 4 學習筆記 (二) : 網格與容器

因為最近要重寫金資系統, 打算用 jQuery UI 與 Bootstrap 作為前端框架, 所以提前推進 Bootstrap 的測試, 本篇主要測試網格與容器, 這是 Bootstrap 自適應或響應式網頁設計 (responsive) 最常用的樣式類別.

本系列之前的測試文章參考 :

# Bootstrap 4 學習筆記 (一) : 環境配置

Bootstrap 教學文件參考 :

# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇

一. 網格 (grid) :

Bootstrap 透過其網格系統 (grid system) 架構, 讓前端設計師開發在各種裝置 (手機, 平板, 桌機) 均可方便瀏覽的網頁, 即所謂自適應 (responsive) 網頁設計, 不需要來回拉動卷軸. 網格系統在橫向上將網頁寬度分割成固定 12 個欄位 (column), 可合併儲存格; 在縱向上則分成若干列 (row), 列數則由設計者自行堆疊.

網格結構由兩層 div 元素組成, 第一層的樣式類別 "row" 宣告列, 第二層以 "col-" 開頭的樣式類別則宣告欄, 例如下面的 2*12 網格有兩列 :

<div class="rows">
<div class="col-md-4">Grid1-1</div>
<div class="col-md-8">Grid1-2</div>
</div>
<div class="rows">
<div class="col-md-6">Grid2-1</div>
<div class="col-md-6">Grid2-2</div>
</div>

此例第一列第一格為 4 欄合併儲存格; 第一列第二格為 8 欄合併儲存格; 第二列第一格與第二格均為 6 欄合併儲存格.

欄的樣式類別格式為 col-size-columns, 最後面的數字 columns 表示合併儲存格之欄數, 即要占用 12 欄位中的連續幾欄. 中間的 size 表示螢幕尺寸, 有如下五種 :

xs : 超小型螢幕
sm : 小型螢幕
md : 中型螢幕
lg : 大型螢幕
xl : 超大型螢幕

Bootstrap 為這五種螢幕尺寸定義了以 col 開頭的 5 種樣式類別來格式化網格中每列的欄位合併配置情形, 可用來規劃整個網頁版面, 透過適當的樣式類別組合可達成自適應網頁的要求, 五種尺寸所對應之樣式類別如下表 :

螢幕大小	超小螢幕 (xs)	小型螢幕 (sm)	中型螢幕 (md)	大型螢幕 (lg)	超大型螢幕 (xl)
螢幕尺寸	< 544px	544px ~ 768px	768px ~ 900px	900px ~ 1200px	>1200px
樣式類別	col-xs-*	col-sm-*	col-md-*	col-lg-*	col-xl-*
容器寬度	自動	544px	750px	970px	1170px
欄位寬度	自動	~44px	~62px	~81px	~97px
網格行為	一律水平	小於寬度時反折	小於寬度時反折	小於寬度時反折	小於寬度時反折
適用裝置	手機	平板	桌機	桌機	桌機

例如 col-sm-4 表示此欄占用 4 欄, 即接近 4/12 的螢幕寬度; 而 col-sm-1 表示占用 1 欄, 即接近 4/12 的螢幕寬度, 例如 :

範例 1 : 網格測試 12 個欄位配置 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-1">B1</div>
<div class="col-md-1">B2</div>
<div class="col-md-1">B3</div>
<div class="col-md-1">B4</div>
<div class="col-md-1">B5</div>
<div class="col-md-1">B6</div>
<div class="col-md-1">B7</div>
<div class="col-md-1">B8</div>
<div class="col-md-1">B9</div>
<div class="col-md-1">B10</div>
<div class="col-md-1">B11</div>
<div class="col-md-1">B12</div>
</div>
</body>
</html>

此例為了顯示網格結構而用 div|="col" 搜尋以 col 開頭之 div 元素, 定義了背景色彩與邊框樣式. 網頁由一列 (row) 12 個中型螢幕網格組成, 每一格樣式類別為 col-md-1, 當瀏覽器寬度大於 768px 時會顯示 1 列 10 行的網格 :

如果瀏覽器寬度小於 768px 時, 網格會自適應地往下折, 變成 12 列 1 行 :

如果要製作 2:1 的網格, 則可用 8:4 格配置, 例如 :

範例 2 : 網格測試 2:1 欄寬配置 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="rows">
<div class="col-sm-8">B1</div>
<div class="col-sm-4">B2</div>
</div>
</body>
</html>

此例有兩個網格, 第一個佔據 8 個欄位, 第二個佔據 4 個欄位, 因此寬度比為 2:1, 在瀏覽器寬度大於 544px 時顯示結果如下 :

Bootstrap 網格一列最多只能有 12 欄, 超過的部分會自動流動成為第二列, 如下列範例所示 :

範例 3 : 網格測試 : 超出 12 個欄位 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-5">B1</div>
<div class="col-md-5">B2</div>
<div class="col-md-5">B2</div>
</div>
</body>
</html>

此例網格雖然只有一列, 但因三個各占 5 欄的五格總共有 15 欄位, 超出系統最多 12 欄限制, 因此第三網格被拆到第二列去了, 在 15 吋螢幕下顯示結果如下 :

另外, Bootstrap 提供了格式為 col-size-offset-columns 的偏移欄樣式類別, 這是空的欄位, 用來套在欄位樣式類別的前後作為填塞留白之用. 注意, 網頁中每一個欄位的 size 必須一致 (包含 offset 欄位), 如果選定裝置螢幕為 sm, 則網頁中的網格都是 col-sm-* 的, 例如 :

範例 4 : 網格測試 : 偏移欄 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-offset-4 col-md-4">B1</div>
<div class="col-md-4">B2</div>
</div>
</body>
</html>

此欄位看似配置 4:4 欄位, 但若加上第一欄前置 4 欄的偏移, 總共還是 12 欄, 亦即第一欄會先跳過 4 欄再配置, 顯示結果如下, 注意, B1 欄位前面有與其等長的空欄 :

下面範例是較複雜的網格設計 :

範例 5 : 網格測試 : 多列配置 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-12">B1</div>
</div>
<div class="rows">
<div class="col-md-offset-4 col-md-4">B2</div>
<div class="col-md-4">B3</div>
</div>
<div class="rows">
<div class="col-md-4">B4</div>
<div class="col-md-8">B5</div>
</div>
<div class="rows">
<div class="col-md-3">B6</div>
<div class="col-md-6">B7</div>
<div class="col-md-3">B8</div>
</div>
</body>
</html>

結果如下 :

二. 容器 (container) :

上面的範例中, 每一個網格都是緊貼瀏覽器邊框, 如果要讓網格與瀏覽器之間有留白, 則應將網格放在容器樣式類別 container 中, 亦即在網格外再套一個樣式類別為 container 的 div 元素. Bootstrap 提供兩種容器樣式類別 :

container 容器 (左右有留白)
container-fluid 容器 (左右無留白)

兩者的差別是當瀏覽器寬度夠大時, container 會在瀏覽器兩邊留白, 而 container-fluid 則無 (實際上有小小的留白); 但是當瀏覽器寬度不夠大時, 兩種容器內的網格都會往下流動產生新列.

範例 6 : 容器測試 : container 容器 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="container">
<div class="rows">
<div class="col-md-4">B1</div>
<div class="col-md-8">B2</div>
</div>
</div>
</body>
</html>

此例將 1*12 的網格放入 container 容器中, 在中型螢幕以瀏覽結果如下, 可見容器左右都有留白 :

若將瀏覽器縮小, 類似在小螢幕上瀏覽時, 第二欄會自動往下流動變成第二列, 但左右仍有留白 :

如果將網格放進流動式容器中, 左右就沒有留白了 (有一點), 例如 :

範例 7 : 容器測試 : container-fluid 容器 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="container-fluid">
<div class="rows">
<div class="col-md-4">B1</div>
<div class="col-md-8">B2</div>
</div>
</div>
</body>
</html>

瀏覽結果如下, 可見容器左右兩側無留白 (實際上有少許) :

瀏覽器縮小後, 超出的部分會往下流動 :

三. . 自適應 (responsive) 網頁 :

網格欄位可以設定一個以上的樣式, Bootstrap 會依據裝置螢幕大小先後套用適合之樣式類別, 因此可利用樣式類別的組合來製作自適應網頁, 各種裝置與螢幕大小之對應為 :

xs : 手機
sm : 平板
md, lg, xl : 桌機

要設計給手機與桌機通用之自適應網頁可用 col-xs 與 col-md 樣式類別組合, 例如 :

範例 8 : 手機與桌機自適應網頁 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="container-fluid">
<div class="rows">
<div class="col-md-4 col-xs-6">B1</div>
<div class="col-md-8 col-xs-6">B2</div>
</div>
</div>
</body>
</html>

此例中的第一個欄位樣式指定了 col-md-4 與 col-xs-6 兩個類別, 第二個欄位樣式指定了 col-md-8 與 col-xs-6 兩個類別, 表示當瀏覽器是中型 (桌機) 寬度時, 第一欄位會合併 4 個儲存格, 第二欄位會合併 8 個儲存格; 當瀏覽器是超小型 (手機) 寬度時, 第一欄位會合併 6 個儲存格, 第二欄位會合併 6 個儲存格, 因此能達成自適應效果. 在桌機瀏覽結果是 4:8 欄位寬度 :

縮小瀏覽器模擬在手機的瀏覽結果是 6:6 欄位寬度 :

下面範例則是可在桌機, 平板, 手機自適應的網頁設計 :

範例 9 : 手機, 平板與桌機自適應網頁 [看原始碼]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style>
div[class|="col"] {background-color:cyan; border: 1px solid black}
</style>
</head>
<body>
<div class="container">
<div class="rows">
<div class="col-md-4 col-sm-6 col-xs-12">B1</div>
<div class="col-md-4 col-sm-6 col-xs-12">B2</div>
<div class="col-md-4 col-sm-12 col-xs-12">B3</div>
</div>
</div>
</body>
</html>

此例每一欄位都有三個樣式類別, 在桌機瀏覽時會套用 col-md-4, col-md-4, col-md-4, 在平板瀏覽時套用 col-sm-6, col-sm-6, col-sm-12, 而在手機瀏覽時則套用 col-xs-12, col-xs-12, col-xs-12 樣式, 瀏覽結果如下 :