[Day4] 学 Bootstrap 是为了走更长远的路 ~ 基本篇

前言

昨天的文章有提到接下来会介绍几个 Bootstrap 我到现在还是很常用的语法,
但你可能会说,
「题目不是订 React 吗XD 说好的 React 呢?」

大家先不要心急(?),
其实不会离题哦,
先前有提到 Next.js 是以 React 为基底的套件,
Next.js 里面会用到 React, Reactstrap 的语法,
而 Reactstrap 是将 Bootstrap 一些语法用标签的方式包装起来,
但 Reactstrap 的本质上还是 Bootstrap 来的,
所以从一开始不懂这些,一路摸索到现在的我认为,
在使用 Reactstrap 如果可以先把 Bootstrap 的基底打起来,
那麽之後理解及使用 Reactstrap 也就不会太困难了。
(PS. 不过当然不用到 Bootstrap 的语法全都认识的程度,
其实只要会用,之後就是把 Bootstrap 当字典查就好XD)

今天会先从最简单也是最常用到的语法介绍起~


本日正文

Colors

文字、背景颜色相信在用前端的人绝对是最经常使用到的设定之一,
Bootstrap 在文字及背景颜色的设定上有提供几组供大家直接使用。
而这些颜色并非只是用顺眼用开心就好,
其实每一组颜色都有其代表的涵义,
就是普遍使用框架的人会认同这样的颜色代表怎样的状况,
因此什麽情况经常使用这个颜色。
(有点普世价值的味道)

https://ithelp.ithome.com.tw/upload/images/20210906/201298739FRjtPrn8m.png

例如,如果用到 success 表示这个动作执行成功的时候使用,
而 danger 代表有操作有错或提醒 user 这个动作较危险的时候使用,
其他的大家也许可以直接参考其 class name 就不难想像。

text- bg- 两个系列几乎都会有一样的颜色设定,
不过 text- 有别於 bg- 系列还有一个 text-muted 的 class,
相信大家不难想像,
就是常用在这段文字只是说明或非主要用途上。

这边用几个简单的小例子来示范一下:

<div class="my-2 p-1 bg-primary text-white">我是主要的颜色</div>
<div class="my-2 p-1 py-2 bg-success text-white">我是成功的颜色</div>
<div class="my-2 p-1 bg-danger text-white">我是危险的颜色</div>

<p class="mt-4 p-1 text-muted">这边通常是代表说明文字,或较不重要的文字</p>

https://ithelp.ithome.com.tw/upload/images/20210906/20129873yHmk3IYbEv.png

这样大家应该就可以知道从 class name 知道上面都是用白色文字搭配不同底色,
最後那段就使用了 text-muted 来代表这段文字比较没那麽重要。

不过当然有些时候只是用以上这些颜色不能满足前端介面的需求,
还是有需要客制的时候,
这时候你也只能乖乖写 CSS 了,
不过如果是网站主色系颜色,
会经常使用到的话,
可以在 global.css 设定即可方便重复使用。
(之後的文章会再说明这块)

更多设定及说明,有兴趣可参阅 Bootstrap 的说明文件 → Colors


Button

https://ithelp.ithome.com.tw/upload/images/20210906/20129873GnCvHpPqMd.png

这个也是常用排行榜上有名的,
一个前端介面一定都需要有按钮。
经过上面颜色的说明後,
相信你对这些按钮搭配颜色一定很容易理解其意义了吧!

这边一样用个小例子示范一下:

<div class="ml-2">
  <div class="my-2 p-2 btn btn-primary">确认</div>
  <div class="my-2 p-2 btn btn-danger">删除</div>
  <div class="my-2 p-2 btn btn-light">返回</div>
</div>

直接使用 Bootstrap 的 Button class,
除了会把颜色样式弄好以外,
也会套上 Button 会有的预设动作。
(像是 hover 过去会有手指 icon、颜色变化......等)
https://ithelp.ithome.com.tw/upload/images/20210906/20129873oPfKePh2Ee.png

然後按钮也有纯边框系列可供使用,还有调整大小等,这些设定都可以搭配混用。

<div class="ml-2">
  <div class="my-2 p-2 btn btn-outline-primary">确认</div>
  <div class="my-2 p-2 btn btn-outline-danger">删除</div>
  <div class="my-2 p-2 btn btn-outline-light">返回</div>
</div>

<div class="ml-2">
  <div class="my-2 p-2 btn btn-lg btn-secondary">确认</div>
  <div class="my-2 p-2 btn btn-sm btn-outline-secondary">取消</div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210906/201298734p72gWa2nX.png

更多设定及说明,有兴趣可参阅 Bootstrap 的说明文件 → Buttons


Spacing

如果说 Colors 是最常使用的设定第一名的话,
那麽 Spacing 绝对是第二名!
但这段在昨天的文章有介绍到,
这边不再花篇幅解释,
因此这边只是为大家再示范一次各种 margin, padding 的设定。

<p class="mx-2 px-4 py-2 bg-dark text-white">这边示范 mx px py 的用法</p>
<p class="mx-2 mt-3 p-4 bg-info text-white">这边示范 p-? 的用法</p>

https://ithelp.ithome.com.tw/upload/images/20210906/2012987303fHr4Tjbd.png

这边再为大家说明一下,
第二段所使用的 p-4,其实就是代表 px-4 + py-4 的意思,
也可以分开写成 px-4 py-4
但是简写成 p-4 就好。

更多设定及说明,有兴趣可参阅 Bootstrap 的说明文件 → Spacing


後记

以上几个就是我到现在还很常使用的设定,
其实也都非常容易理解,
大家也都可以自行玩玩看哦!

一样附上今日 CodePen → Day4

明天文章预计会讲解 Bootstrap 的 Flex 如何使用,
感谢大家今天的收看,
那麽我们明天再见罗!

( PS. 这边一样罗嗦再提醒一下~
在 CodePen 要使用 Bootstrap 框架语法记得在 设定 > CSS 加入以下网址:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css )


<<:  Day 6 - Kotlin变数var与val和型态

>>:  Day 04-选择MongoDB

【Day17-音讯】浅谈声音资料的基本分析方式——时间域与频率域

如同我们在Day14的时候提到的最常出现的四种资料类型,而前两天我们稍微谈了一下文字资料的基本处理,...

30天轻松学会unity自制游戏-结语

最一开始接触到Unity,只是想说试试看能不能制作个游戏看看,下载完Unity,就按照Unity教学...

[30天 Vue学好学满 DAY13] 组件

组件 可重复使用的实例,有自己的名子,引入後当元素使用。 Data 透过 return 定义为函数 ...

Day3:进入新手村前先让我复习一下QQ-CSS-box-sizing

box-sizing这个语法可以让设计师或是写程序的人不用去加加减减的计算区块 (比如说线条宽度或是...

[Pytorch] torchvision.transforms()

torchvision.transforms() Transforms are common im...