[Day6] 学 Bootstrap 是为了走更长远的路 ～ Grid 篇 (1)

前言

今天终於来到本系列文第一个重头戏，
也是 Bootstrap 非常实用的~~~~~ Grid System (网格系统)
Bootstrap Grid 的特点是用在 RWD (响应式网页设计) 非常好用！
不过并不是用了 Grid 就不需要用到 Flex，
学了之後发现它们是相辅相成的关系吧，
那就让我们进入正文吧！
(PS. 後来发现 CSS 也有个叫 Grid 的属性，
这边厘清一下，这篇文章讲的是 Bootstrap 的 Grid 哦！

本日正文

Grid system - Bootstrap

首先 Grid 有 Container, Row, Column 这三种元素，
Container 顾名思义就是容器，
你可以先把 Container 想像成像一个 <div> 框住的区块。

Container 里面由 Row, Column 组成，
Row 就是列，因此一列里面会有很多栏，就是 Column。

在 Grid 世界里，
把一个空间分成 12 个区块，
因此 Row 一列中最多可以含有 12 个格子。
(PS. 这边指的不是 Column，不要搞混，看下面例子可能会比较清楚 )

概念讲到这边可能大家还是会觉得有点模糊吧，
没关系当初的我也是，
还是直接看例子大家应该就知道怎麽回事了~
例如把昨天的例子用 Grid 的方式改写一下：

<div class="container">
  <div class="row bg-primary">
    <div class="col border">1</div>
  </div>
  <div class="row bg-info">
    <div class="col border">2-1</div>
    <div class="col border">2-2</div>
    <div class="col border">2-3</div>
  </div>
  <div class="row bg-warning">
    <div class="col border">3</div>
  </div>
</div>

你可能已经看出一些端倪了，
这边简单说明一下，
首先最外面用 container 这个 class，
里面包三列 row，
再来第一列跟第三列因为都只有 1 栏 col，
所以宽度占满整个 container，
但第二列有 3 栏，
上面有提到一列中最多可以含有 12 个格子，
Grid default 会平均分配，
因此 12/3 = 4，
所以每一个 Column 各别会占 4 个格子的宽度。

进阶题来了，
如果现在想要 2-2 比 2-1, 2-3 宽，
2-2 是 2-1, 2-3 的两倍宽，
这样该怎麽做？
先让我们思考一下，
总共 12 格，所以 1:2:1
12/4 = 3，
2-1, 2-3 分别拿到 3 格，
2-2 拿到 6 格，
Bootstrap Grid 有提供 col-3,col-6 这样的写法，
如果没有写指定数字就会用 12 去平均分配这样。

所以我们可以改写成这样：

<div class="container">
  <div class="row bg-primary">
    <div class="col border">1</div>
  </div>
  <div class="row bg-info">
    <div class="col-3 border">2-1</div>
    <div class="col-6 border">2-2</div>
    <div class="col-3 border">2-3</div>
  </div>
  <div class="row bg-warning">
    <div class="col border">3</div>
  </div>
</div>

以上只是把 col 改成 col-3,col-6 就有这样的变化，
是不是很有趣呢？

那你可能会说，万一我算数不好，
算超过 12 个格子的话怎麽办？
放心，那就算是超出那列空间，
会自动被换到下一行去。
例如我把上面 2-2 的 col-6 故意改成 col-9，
就会变成这样：

...
...
  <div class="row bg-info">
    <div class="col-3 border">2-1</div>
    <div class="col-9 border">2-2</div>
    <div class="col-3 border">2-3</div>
  </div>
...
...

Grid 好像跟什麽似曾相识？

其实到这边你会发现 Grid 好像跟之前传统 HTML/CSS 在写 % 有点异曲同工之妙，
例如以下例子 <ul> 有 4 个 <li>，
然後你就会计算每个 <li> 扣掉 margin 1%，可被分配到 23%，
像这样：

[HTML]

<ul class="ul">
  <li class="li">1</li>
  <li class="li">2</li>
  <li class="li">3</li>
  <li class="li">4</li>
</ul>

[CSS]

.ul {
  display: flex;
  list-style: none;
}

.li {
  width: 23%;
  margin: 1%;
  background-color: pink;
  padding: 10px;
}

Grid 简化这样的计算方式，
将空间用 12 格去计算就好，
而且 Grid 好处当然不只这样，
更重要的是 Bootstrap 有提供不同的 Media Queries(装置) 可以进行不同设定，
(不太知道 Media Queries 是什麽的人可以参考之前大大在铁人赛写的这篇文章 →
Day22：小事之 Media Query )
可以让你很方便的做到 RWD，
例如电脑版画面够宽，我想要让每一个格子平均分配就好，所以只用 col-md，
但在手机版我可能想要突显某一块，我就多加一个设定 col-xs-8，
让它在手机版时占 8 个格子的宽度。

这样讲可能还是有点不清楚，
所以明天文章会详细说明这一块，
那今天文章就到这边啦，
那我们明天再见罗！

这边也附上我之前很常参考的文章 → 利用 Bootstrap Grid System 排版的学习笔记

还有附上本日 CodePen 连结：
Day6 - Bootstrap Grid
Day6 - HTML/CSS