[Day8] 学 Bootstrap 是为了走更长远的路 ～ 下一站 ‧ Reactstrap

前言

今天的文章会再对 Bootstrap 做个 recap，
然後就会稍微对接下来的里程碑 ─ Reactstrap 进行引言介绍。

本日正文

Bootstrap review

其实这几天已经把 Bootstrap 比较重要的观念都带过了，
像是 Flex, Grid 等，
这边再来综合复习一下吧！

拿昨天的例子将中间 3 的区块加上 2 个 <div> block，
像这样：

<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">
    <div class="bg-warning p-1">我是说明1</div>
    <div class="bg-success p-1">我是说明2</div>
  </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>

如果今天我要让中间的 2 个 <div> block 水平排列，
且水平置中、垂直置中该怎麽做？

在 2 个 <div> block 的母容器 class 加上 d-flex justify-content-center align-items-center，
这样即可，像这样：

<div class="row">
  ...
  <div class="col-6 col-md-3 col-lg-2 bg-info border py-2 d-flex justify-content-center align-items-center">
    <div class="bg-warning p-1">我是说明1</div>
    <div class="bg-success p-1">我是说明2</div>
  </div>
  ...
</div>

把 Bootstrap 当字典查就好

不过 Bootstrap 能用的 class 设定应该不只这样对吧？
但我们通通都要记得吗？

其实不用，只要大概有印象就可以了，
就可以把 Bootstrap 当字典查，
我都会用 Bootstrap + 关键字 去 google 看看 Bootstrap 有没有支援跟 CSS 一样的设定。

例如，在 CSS 我们也很常会用到的 display: none，
Bootstrap 有没有呢？答案是有的。
我用 Bootstrap + display 当关键字查到了这个：
Display property

甚至在 Bootstrap 还支援 breakpoint 的写法，
事不宜迟，我们来试试看吧！
例如我刚刚的 code 下方增加了一个区块，

...
<div class="mt-4 p-5 bg-primary text-white">
  我是 md 才会出现的区块
</div>
...

我现在想要让它在 md 以上才显示，
其他情况就隐藏，该怎麽做呢？

答案是在 class 增加 d-none d-md-block 的语法，
昨天的文章有提到 Bootstrap 关於 breakpoint 的语法都是大於 XX 才会显示，
所以 d-md-block 这段语法意思是 md 才显示(block)，其他时候是吃 d-none。

像这样：

...
<div class="mt-4 p-5 bg-primary text-white d-none d-md-block">
  我是 md 才会出现的区块
</div>
...

示范：794 px

794 px > 768 px，所以吃 d-md-block 的设定，显示该区块

示范：763 px

763 px < 768 px，所以不吃 的设定，吃 d-none 的设定，该区块隐藏

其他的我也是先想想原本 CSS 我会用到什麽设定，
再下关键字去搜寻，
例如 text-align 系列，一样用 Bootstrap + text-align 当关键字搜寻找到这个：
Text Alignment
而且在 Bootstrap 一样有支援不同 breakpoint 可以进行不同设定，
例如我可以这样写 text-md-center，
因此 1 的区块会在 md 以上才文字置中。

其他族繁不及备载，
像是 overflow-hidden, position 这些 Bootstrap 都有，
要用到时再去 Bootstrap 字典查查语法要怎麽用就好罗~
(PS. 有一个也是满常用到的 opacity CSS 属性，
可惜在 Bootstrap 5 版以上才支援，4 还不支援)

从 Bootstrap 到 Reactstrap

终於来到 Reactstrap，
前面讲了 Bootstrap 都是为了 Reactstrap 的铺陈XD

Reactstrap 是一个套件，帮助你快速的把 Bootstrap 的东西放到 React 里面（前辈，2020）

所以像我们之前在 Bootstrap 写 Grid 时我们都会这样写：

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

但 Reactstrap 把这些语法直接包成标签，就不用每次再写 <div class="">...</div> 这样的语法，
例如上面 Bootstrap 的例子，用 Reactstrap 改写会是这样的：

<Container>
  <Row>
    <Col className="bg-info">1</Col>
    <Col className="bg-primary">2</Col>
    <Col className="bg-secondary">3</Col>
  </Row>
</Container>

(可参考→ Layout Components (Container, Row, Col))

<div class="container"> 变成→ <Container>
<div class="row"> 变成→ <Row>
<div class="col"> 变成→ <Col>
这样是不是简单易懂又方便呢？

今天稍微带一点从 Bootstrap 转换到 Reactstrap 的开头，
从明天开始进入 Reactstrap 篇，
会再从 Grid 开始着手切入，
那我们明天再见啦！

附上本日 CodePen:
Day8 - Bootstrap

Reactstrap 放在 CodeSandbox 上~

(说明：因为在 Github 上写 Reactstrap 好像语法会有点差异，
这边我还没有详细研究过为何有那样的差异，
发现在 CodeSandbox 写的 Reactstrap 比较贴近教学文件跟我现在写的语法，
因此把 Reactstrap 的 code 放在 CodeSandbox 上。

这边先稍微说明一下，
CodeSandbox 打开最左边是档案目录，中间是程序码，最右边是预览画面。
在档案目录中有 3 个档案，index.js 引入 App 的 coomponent，
主程序都写在 App.js 中，
因此只要看 App.js 即可。

後记

今天发现 xs, md, lg 这样的 class 设定，
比起 Media Query，称为 breakpoint (断点) 会更加适合，
不过都是指要根据各装置宽度(浏览器宽度)不同而要有相应的介面设计(RWD)，
而各装置宽度的概念就是 Media Query / breakpoint。

然後今天终於来到第 8 天，
但是我好像越来越没有信心可以把 30 天写完了orz

然後意外发现大大们写的系列文好有趣哦XD
例如这个XD
[Day5] 另一半疑似劈腿?! 教你用Python科技抓奸!
还看到有人准备要写 RPG Maker 的教学文！好怀念XD 好期待XD

为了看大大们的文章我会继续努力更新下去的！(?)