此篇会简单介绍格线系统原理以及使用技巧。

Bootstrap5 格线系统是基於 flex，想活用格线系统可以先多加了解 flexbox 盒模型，刚好上一集有稍微讲解。

在介绍格线系统之前，想先来分享 魔术数字（magic number）是什麽？

魔术数字（magic number）

白话文：写死大小（宽高）样式。

STAR Method：

情境：假设今天拿到设计稿後。

任务：某个元素开出以下规格。

• 左200px
• 右800px

行动：工程师就直接写死宽高。

• width:300px; width:680px;

结果：当写死样式过多後，就容易造成以下问题。

• 可读性不高
• 难以维护

当维护到这种 code...

使用格线系统就可以大幅降低 magic number 的问题。

格线系统（Gird System）

格线系统的出现，解决了传统无法解决的问题（例如上方的 magic number）

容器与内容的概念：格线表示为容器，而网页所呈现的资讯就称为内容。

• 格线所代表的容器将会决定定位、宽度大小，内容不会有自己的宽度，都是由容器决定。

早期电脑萤幕解析度多数是 1024x768，960 则是多数值的最小公倍数，所以将 960px 为最大宽度，960 Grid System 就诞生了。

960 Grid System

去除左右两边各 10px 的空间，留下中间 940px 的区块以 20px 作为间隔，并加入了容器与内容的概念。

关键字

• column（栏）：类似於 Excel 栏位的概念，从左至右。

  • 常见总栏数是 12：因为它容易整除，可用 2 3 4 6 整除。（其他常见的还有十六栏、二十四栏，但大宗还是 十二栏）

• gutter（间距）：column 彼此之间的距离。

  • 通常使用 padding 或 margin 来推，960 Grid System 是使用 margin。
  • Bootstrap 则使用 padding，预设宽度为 1.5rem （24px）。
    • .gx-* ：控制水平 gutter 的宽度。
    • .gy-* ：控制垂直 gutter 的宽度。
    • .g-* ：控制水平、垂直 gutter 的宽度。
    • g-0：取消预设水平 gutter 的宽度，这将会移除 .row 的负值 margin 以及所有直属子列的水平 padding 。

Bootstrap 5 格线系统

格线系统中的排版三剑客： .container 、 .row、 .col 1~12

.container

是一个容器，可以把内容物居中。

有两种宽度写法：

• .container ：固定宽度
• .container-fluid ：满版

重要观念：

• 在使用格线系统时最外层至少一定要有一个 .container。
• .container 下第一层不一定要是 .row 。

.row

列，用来包住 column。

设置不要间距语法：

• no-gutters ：让栏位彼此连在一起。

重要观念：

• .row 内层只能是 .col 。

.col 1~12

将内容放置在 col 中。

col 数值计算：每一列需要的栏数 / 12。

• ex：每一列三栏 12/3 = 4 ，则一个 row 里设置三个 .col-4 即可。

重要观念：

• .col 上一层只能是 .row 。

  • 不要更改宽度（margin、padding），容易造成跑版，有需要则在 row 使用 gutters 即可，但可以加上下的 margin 与 padding。

• col 後面不接数字，则会照内容去做宽度分配自适应。

  • ex：<div class="col">1</div>

实作格线系统 4 步骤

使用顺序：

container > 其他元素，可有可无（ex：h2） > row > col > 内容

步骤 1、要写在 container 容器里面。（因此最外层一定要有一个 container）

• .container 固定宽度
• .container-fluid 满版

步骤 2、.row（row 里面第一层只能是 col）

步骤 3、在 row 里 .col 总数加起来 12。（col 外层第一层只能是 row）

步骤 4：网页内容与元件请放在 .col-* 里面。

• 眼尖的朋友有发现上方范例是有 3 个 col-6，因为格线系统使用 flex，达到自适应的效果。（col 加起来 > 12 就会跳到下一列）

• 假设今天是 col-8、col-6，那 col-6 还是会跳到下一行因为加起来超过 12。

使用守则

1. 外层一定要有 container，container 内第一层不一定要是 row。
2. row 里层只能放 col。
3. col 外层只能放 row。
4. 其他元素、元件放置在 col。
5. flex-wrap:wrap; 代表 col 超过 100% 会往下掉（超过 12 时）。

常见错误：千万千万不要使用以下方法

1. 在 col 更改宽度 width → 会导致跑版（更改上下可以）。
2. 在格线系统调整左右 margin、padding → 会导致跑版。
   • 可以加上下 的 margin 与 padding（border 是往内推的所以不会影响，因为 border-box 特性）。
3. 通常选单不做 col 因为选单是不规则的（内容、数量）→ 会改用 navbar 导览列。