本系列之前的測試文章參考 :
# 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 : 超大型螢幕
| 螢幕大小 | 超小螢幕 (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 容器 (左右無留白)
範例 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 : 桌機
範例 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 樣式, 瀏覽結果如下 :
桌機
平板
手機
我以前都用無邊框的表格為網頁排版, 需要使用一堆 CSS 樣式微調才能接近理想中的版面, 覺得很彆扭, 現在透過容器與網格就可以快速簡潔地規劃網頁的版面了.
沒有留言:
張貼留言