iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
自我挑戰組

Re: 從 Next.js 開始的 React 生活系列 第 7

[Day7] 學 Bootstrap 是為了走更長遠的路 ~ Grid 篇 (2)

  • 分享至 

  • xImage
  •  

前言

昨天文章提到今天要來講 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;
}

https://ithelp.ithome.com.tw/upload/images/20210909/201298735ddfhjnlLc.png

如果現在我想寫成手機版每一欄寬度就變成 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 個。

https://ithelp.ithome.com.tw/upload/images/20210909/201298733xEsMg4TD2.png

本日正文

但你知道,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>

https://ithelp.ithome.com.tw/upload/images/20210909/20129873EESpJhcXyU.png

如果現在平板、電腦我都想讓它們一列 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
https://ithelp.ithome.com.tw/upload/images/20210909/20129873PfYmmLCGYi.png

這邊我當初也花很多時間才理解,
因此再多給幾個情境題練習看看好了。

現在把欄位從 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>

https://ithelp.ithome.com.tw/upload/images/20210909/201298738pIIKB0uaf.png

如果現在我想要大螢幕(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 的設定
https://ithelp.ithome.com.tw/upload/images/20210909/201298731a6IE6XZyS.png

示範:771 px

771 px > 768 px,所以吃 col-md-3 的設定
https://ithelp.ithome.com.tw/upload/images/20210909/20129873lQiqZnMKSM.png

示範:993 px

993 px > 992 px,所以吃 col-lg-2 的設定
https://ithelp.ithome.com.tw/upload/images/20210909/20129873moGhjCb5GE.png

因為現在大家用手機的需求很高,
甚至比電腦多,
因此在設計網頁或 APP 時一定要考慮 RWD,
Bootstrap Grid 使用 col-xx-? 就這樣輕鬆達成 RWD 的要求,
是不是很方便呢?

這邊光用看的可能還是不太好懂,
多練習應該就會比較了解了~
今天的文章就到這邊,
預計明天會將 Bootstrap 的部份告一段落,
進入 Reactstrap 囉~
那我們明天再見啦!

附上本日 CodePen 連結:
Day7 - HTML/CSS
Day7 - Bootstrap

後記

好不容易才跟 Bootstrap, Reactstrap 作朋友(?)的我,
今天收到前輩的消息說要改用 Chakra 這個套件=口=
沒關係,我覺得還是還是從 Bootstrap, Reactstrap 這樣學會比較好上手,
之後我相信要改什麼套件就不會是太大的問題了!
(PS. 去年隊友到今天依然沒發現我今年偷偷報名的事XD)


上一篇
[Day6] 學 Bootstrap 是為了走更長遠的路 ~ Grid 篇 (1)
下一篇
[Day8] 學 Bootstrap 是為了走更長遠的路 ~ 下一站 ‧ Reactstrap
系列文
Re: 從 Next.js 開始的 React 生活31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言