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

前言

昨天文章提到今天要来讲 Grid + Media Query = 轻松达成 RWD！
(PS. 不太知道 Media Query 的人可以参考之前大大在铁人赛写的这篇文章 → Day22：小事之 Media Query )

讲今日主题之前还是想让大家回想一下，
以往纯 HTML/CSS 写 RWD 我们会怎麽写？

一样拿简单例子举例一下，
原本长这样：

[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;
}

如果现在我想写成手机版每一栏宽度就变成 48%，
该怎麽写？

这时候在 CSS 多加这一段：

@media(max-width: 375px){
	.block {
		width: 48%;
	}
}

我们会在 CSS 写 @media(max-width: ...px){} 像这样的语法，
这个意思是说，
画面宽度最大顶到 375 px，比 375 px 小的话就吃这边的样式。
(PS. 375 px 是 iPhone 5 的宽度)

(当然也有 @media(min-width: ...px){} 这样的写法，
意思就相反，意思是最小到 375 px，比 375 px 大的话就吃这边的样式。)

所以当我故意把画面缩小至比 375 px 小的时候，
.block 宽度就变为 48%，就从一列 4 个排成一列 2 个。

本日正文

但你知道，Bootstrap Grid 也有语法支援各装置断点，而且写法非常简单吗？

拿上面例子来用 Bootstrap Grid 改写，
一开始在 HTML 这样写：

[HTML]

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

如果现在平板、电脑我都想让它们一列 4 个，
手机版才要变为一列 2 个，
要在 class 的地方将 col 改成 col-6 col-md-3，
像这样：

<div class="row">
  <div class="col-6 col-md-3 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 bg-info border py-2">4</div>
</div>

这个意思是，一般情况宽度都要占 6 格，
当画面宽度比 md 大的时候宽度就变成占 3 格。

那你可能会问说 md 是什麽，
意思是画面宽度的装置缩写，
Bootstrap Grid 语法中有 .col- .col-sm- .col-md- .col-lg- .col-xl-
而画面宽度跟 class 的对照表可以参考这里 Grid options

这边我当初也花很多时间才理解，
因此再多给几个情境题练习看看好了。

现在把栏位从 4 个变成 6 个，

<div class="row">
  <div class="col-6 col-md-3 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 bg-info border py-2">4</div>
  <div class="col-6 col-md-3 bg-info border py-2">5</div>
  <div class="col-6 col-md-3 bg-info border py-2">6</div>
</div>

如果现在我想要大萤幕(lg)时，
让这个 6 栏可以并成一列，
在平板/电脑版 (md) 一列 4 个，
在手机版 一列 2 个，
该怎麽做？

Bootstrap Grid 的语法是比 XXX px 大才会进行变化，
所以先想比较大的语法怎麽写，
12/6=2，所以在 lg 的时候每一栏占 2 格，
12/4=3，所以在 md 的时候每一栏占 3 格，
其他情况就是 12/2=6，这样就可以达到在 md 以下每一栏占 6 格。

所以只要在刚刚 col-6 col-md-3 的後面加上 col-lg-2 即可，
像这样：

<div class="row">
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">1</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">2</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">3</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">4</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">5</div>
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2">6</div>
</div>

示范：746 px

746 px < 768 px，所以不吃 md, lg 的设定，吃 col-6 的设定

示范：771 px

771 px > 768 px，所以吃 col-md-3 的设定

示范：993 px

993 px > 992 px，所以吃 col-lg-2 的设定

因为现在大家用手机的需求很高，
甚至比电脑多，
因此在设计网页或 APP 时一定要考虑 RWD，
Bootstrap Grid 使用 col-xx-? 就这样轻松达成 RWD 的要求，
是不是很方便呢？

这边光用看的可能还是不太好懂，
多练习应该就会比较了解了~
今天的文章就到这边，
预计明天会将 Bootstrap 的部份告一段落，
进入 Reactstrap 罗~
那我们明天再见啦！

附上本日 CodePen 连结：
Day7 - HTML/CSS
Day7 - Bootstrap

後记

好不容易才跟 Bootstrap, Reactstrap 作朋友(?)的我，
今天收到前辈的消息说要改用 Chakra 这个套件=口=
没关系，我觉得还是还是从 Bootstrap, Reactstrap 这样学会比较好上手，
之後我相信要改什麽套件就不会是太大的问题了！
(PS. 去年队友到今天依然没发现我今年偷偷报名的事XD)