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 樣式, 瀏覽結果如下 :


桌機


平板


手機


我以前都用無邊框的表格為網頁排版, 需要使用一堆 CSS 樣式微調才能接近理想中的版面, 覺得很彆扭, 現在透過容器與網格就可以快速簡潔地規劃網頁的版面了.

沒有留言:

張貼留言