Bootstrap 4 的 Grid 應用介紹
Bootstrap 4 從去年釋出 BETA 版後,到現在幾乎所有功能都齊全了,官方也釋出了詳細的 BETA 網站與文件,感覺 Bootstrap 4 距離正式定案的時間也不久遠啦 😀
為什麼 Bootstrap 4 的出現如此引人注目呢?因為之前 V2 到 V3 只是「增強」,但 V3 到 V4 卻是「改革」,Bootstrap 4 用的技巧與 CSS 語法都有大幅度的革新,所以用慣 Bootstrap 3 的朋友勢必要重新學習(就像我XDDD)。以我為例,我自己比較常用 Bootstrap 的 Grid System (網格系統),因此這次的筆記也會以 Grid System 為主,介紹一下 V3 與 V4 之間的差異。
1. Bootstrap 4 的一個重大改變,就是使用了 CSS 的 Flexbox 重新排版定義 Grid,關於 Flexbox 的介紹,可以參考我之前的文章:CSS Flexbox 介紹與解析。
2. 承上,因為 IE9 並不支援 Flexbox,所以如有需要使用 IE9,就請繼續使用 Bootstrap V3 版本。
斷點(Breakpoint)的調整
Bootstrap 3 的斷點與前綴詞
Extra Small | Small | Medium | Large | |
---|---|---|---|---|
斷點範圍 | 0 ~ 767 px | 768 ~ 991 px | 992 ~ 1199 px | 1200 px 以上 |
前綴詞 | col-xs | col-sm | col-md | col-lg |
Bootstrap 4 修改如下
Extra Small | Small | Medium | Large | Extra Large | |
---|---|---|---|---|---|
斷點範圍 | 0 ~ 575 px | 576 ~ 767 px | 768 ~ 991 px | 992 ~ 1199 px | 1200 px 以上 |
前綴詞 | col- | col-sm | col-md | col-lg | col-xl |
☞ 差異
- 新增了一個
576px
作為最小的斷點 - Extra Small 由
col-xs-*
改為col-*
- 新增了 Extra Large,前綴詞為
col-xl-*
可以自動的平均分配欄寬
以往使用 Bootstrap 3 時,每一個col-md-*
後面一定要帶數字,數字表示欄寬。但 Bootstrap 4 因為使用了 CSS Flexbox,所以不輸入數字 = 平均分配欄寬。
以下來個簡易範例:
▼ Bootstrap 3
需要輸入「數字」才能知道寬度
▼ Bootstrap 4
不需輸入數字就能根據 col 的數量分配欄寬
▼ Bootstrap 4
也可以只設定其中一個欄寬,剩下的平均分配
☞ 範例
See the Pen rzGjNE by MUKi (@mukiwu) on CodePen.
動態調整欄寬
除了能平均分配欄寬外,還能根據文字寬度,動態的調整欄寬。這是 Bootstrap 4 的新語法,使用的是col-md-auto
。
也可以把我們之前熟悉的各種斷點給加進來,做出更多的螢幕寬度變化:
☞ 範例
See the Pen MvEJJd by MUKi (@mukiwu) on CodePen.
讓 Column 換行
安插一個空的 DIV,CLASS 名稱為w-100
,就可以讓 Column 強制換行唷~
☞ 範例
See the Pen prWRaX by MUKi (@mukiwu) on CodePen.
垂直對齊
前面跟大家提過 Bootstrap 4 有使用 Flexbox 語法,所以我們可以利用 Flexbox 的特性,輕易的將 Column 置頂、置中,與置底對齊。
align-items-start
:置頂align-items-center
:置中align-items-end
:置底
▼ 直接在row
裡面寫上align-items-*
的 CLASS 即可。
▼ 另外我們也可以改用align-self-*
在col
裡面單獨針對 Column 做對齊的動作
align-self-start
:置頂align-self-center
:置中align-self-end
:置底
透過範例可以發現 A, B, C 三個 column 不會相互影響,A 的欄位如果有多行文字不會影響到 B 跟 C。另外以置中為例,輸入多行文字後,他真的就是從中間平均的往上下展開唷!
☞ 範例
See the Pen NvadMo by MUKi (@mukiwu) on CodePen.
水平對齊
有垂直對齊就一定會有水平對齊(廢話XD),所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。
justify-content-start
:靠左對齊justify-content-center
:置中對齊justify-content-end
:靠右對齊justify-content-around
:分散對齊(含左右)justify-content-between
:分散對齊(不含左右)
☞ 範例
See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.
移除 gutter
Bootstrap 的row
跟column
分別有使用margin
以及padding
當作 gutter,讓每個 column 之間有呼吸的空間。
但有時候因為版面的設計需求,我們希望 column 是緊密黏在一起的,所以 V4 新增了no-gutters
這個 class,可以讓我們移除 gutter
直接將no-gutters
放在row
就可以囉,因為語法跟效果很直覺,所以就不上 codepen 範例惹(絕對不是因為懶)
Column 排序
以前如果要將排序會用pull
跟push
在那邊推來推去的,現在一樣因為使用了 Flexbox 的關係,在使用上也更方便了!
flex-unordered
:不排序flex-first
:第一個flex-last
:最後一個
☞ 範例
See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.
這邊要特別注意的是,如果使用 flex 排序,寬度縮小時也會持續這個排序模式,column 的寬度不會變回 100%。
如果你希望縮小到特定寬度可以變回 100%,還是可以使用 V3 的push
以及pull
,不過在 V4 的寫法有一點調整,將前綴位置放到後面(原本是col-md-push-*
):
☞ 補充
offset
也一樣將前綴往後放。
Bootstrap 4 的 Grid 介紹就到此告一段落囉,有一些功能我沒有特別提到,例如 Wrapping、Nested,是因為跟 V3 相比沒有太大的改變,就不額外寫出來了。
Bootstrap 的功能非常強大,是一個堪稱超完整的 Framework,但我自己只有使用它的 Grid System,所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。以後如果再開 RWD 課程,也會以 V4 為主要規劃設計新的範例與課程,也請大家敬請期待 😀
那麼對文章有任何不懂的地方,也歡迎留言告訴我唷,謝謝 ^_^
CSS Flexbox 介紹與解析
老實說我到現在都還沒開始用 flex
做網站,最大的原因就是 IE 相容問題,不過這也不能當作不學習的原因,畢竟這行就是要不斷的學習新知識😂,而且剛好在某次前端課程中有同學問我能否介紹 flex
,所以想想,乾脆就寫一篇文章吧!不僅是幫自己做個筆記,以後也可以當作課堂上的補充講義~。
▼ flex 相容一覽圖 / caniuse.com

什麼是 Flexbox
簡單來說,Flexbox 是一種 CSS 的排版語法,就跟我們以往用的 position
, float
, display
…一樣,只是 Flexbox 是 CSS3 的新語法,所以才有瀏覽器相容的問題。
Flexbox 相關屬性與值
我覺得 Flexbox 較難上手的原因,就是他的屬性跟值太多了,不像 float
很單純的只有 left
, right
, none
這三種,但當然好處就是彈性非常大,幾乎很多複雜的排版都可以靠 Flexbox 輕鬆解決。
在這邊也參考了 W3C 的網站,列出所有 flexbox 的屬性跟值給大家參考,至於詳細的介紹還是可以看 W3C 關於 Flexbox 的文件喔!
屬性 | 屬性介紹 | 可用的值 | 預設值 | 影響 |
---|---|---|---|---|
flex-flow | 將 flex-direction 以及 flex-wrap 合併寫在一起 | flex-direction |flex-wrap | flex containers | |
flex-direction | 排列方向 | row | row | flex containers |
row-reverse | ||||
column | ||||
column-reverse | ||||
flex-wrap | 換行 | nowrap | nowrap | flex containers |
wrap | ||||
wrap-resverse | ||||
order | 調整元素排列的順序 | <整數> | 0 | |
flex | 將 flex-grow、flex-shrink 以及 flex-basis 合併寫在一起 | flex-grow|flex-shrink|flex-basis | flex items | |
flex-grow | <數字> | 0 | flex items | |
flex-shrink | <數字> | 1 | flex items | |
flex-basis | <寬度> | auto | flex items | |
justify-content | 水平對齊設定 | flex-start | flex-start | flex containers |
flex-end | ||||
center | ||||
space-between | ||||
space-around | ||||
align-items | 垂直對齊 (元素單行排列) | flex-start | stretch | flex containers |
flex-end | ||||
center | ||||
baseline | ||||
stretch | ||||
align-self | flex-start | auto | flex items | |
flex-end | ||||
center | ||||
baseline | ||||
strech | ||||
align-content | 垂直對齊 (元素排列超過兩行以上) | flex-start | stretch | 多行 flex containers |
flex-end | ||||
center | ||||
space-between | ||||
space-around | ||||
stretch |
常用的 Flexbox 排版語法
要使用 flex 前,必須先在該容器指定:
而特別有趣的是,就連行內元素都可以用 flex 唷:
接下來,我們用一小段 HTML 語法表示 Flexbox 的架構:
承上,這個很常見的巢狀排版恰恰能表達flex
的兩大主角:flex-container
以及flex-item
,前者表示的是一個巨大的容器(container),後者則是各個獨立的項目(item)。
flex
的屬性,有的會影響的是容器,有的則影響項目。如果不太清楚屬性影響的是哪一塊,可以回到前一頁看表格的「影響」欄位做參考。
基本的 Flexbox 排版
flex-direction
我們先介紹最簡單的左右版面,以往直接用float: left
解決,那麼換成flex
的話可以這麼寫:
- Flexbox 是 Box Model 的一種表現形式,以前我們用
display
去改變每個元素的 Box Model,在此也是一樣,我們要在flex-container
先設定display: flex
,確保自己以及裡面的子元素 Box Model 都會轉成flex
的設定。 flex-direction
表示 flex 的水平排列方向,第一頁的 Flexbox 屬性表上有提到,flex-direction
必須放在 flex container 的父層架構下,而不是 flex item 這個子層,所以這句話寫在.flex-container
裡,如果你把它放在.flex-item
會發現沒作用。(再次提醒:對照屬性表會更加清楚該放在哪裡喔。)
最後我們來把flex-direction
所有的值都寫一遍吧!
See the Pen QEGbMm by MUKi (@mukiwu) on CodePen.
在值裡面,用到的row
跟column
,一個是水平排列、一個是垂直排列;而reverse
是反轉的意思,稍微對照一下上面的範例應該不難了解唷!
flex-wrap
接下來再加一個新的語法flex-wrap
,這個同樣要放在.flex-container
裡面,wrap
是斷行的意思,可以利用這個語法決定是否要換行。
設定nowrap
表示即使有多少區塊,也必須都放在同一行內(會自動分配寬度)。設定wrap
則是會依照內容或寬度自動換行。
See the Pen oLYjqG by MUKi (@mukiwu) on CodePen.
flex
是三個屬性的合併縮寫:flex-grow
, flex-shrink
, flex-basis
,可以看作是 FLexbox 的核心設定。 註:flex 的這些屬性影響的是 flex items。
flex-grow
我們都知道,區塊預設的寬度是元素內容的寬度,如下圖所示 ▼

如果想要調整寬度,一般可以用width
設定,但也能用flex-grow
唷!flex-grow
的預設值為 0,表示寬度就是元素內容的寬。而從 1
開始,數字愈大,占的寬度比例也會愈大。
範例圖如下所示 ▼
flex-shrink
flex-shrink
跟flex-grow
相反,是表示當父元素寬度空間不足時,子元素壓縮的比例。預設值為 1,但設為 0 同樣表示不壓縮,數字愈大,被壓縮的幅度就愈大。
範例圖如下所示 ▼
flex-basis
可以在flex-basis
設定寬度或高度,設定好後會自動分配該區塊的寬度或高度。
假設父元素寬度是500px
,我在裡面設了兩個子元素分別為200px
以及600px
,他會依照比例分別給予子元素寬度,如圖所示 ▼
以上這三個語法因為有比較多的彈性,所以可以用在製作 RWD 網站上。
flex
最後,再次提到flex
這個語法,是用來合併以上三個屬性,規格為:
flex 還有兩個更簡短的縮寫:
以上關於flex
的範例程式碼,請參考:http://codepen.io/mukiwu/pen/qNRJPv
Flexbox 還有一些屬性沒有提到,因為我有點累了,所以暫時解說到這邊。但我覺得剩下的都是比較簡單而且很容易上手的語法,所以等待以後有空補完 XDD。
Flex 版面實例介紹
版面垂直置中
幾千萬年以來傷透腦筋的垂直置中,超級適合用flex
解的喔!在這邊我們會用到兩個屬性:
justify-content
align-items
而這兩個屬性我前面通通都、沒、說(炸),但真的很簡單,所以直接上程式碼啦!
範例請參考 codepen:
動態三欄式
除了用flex-grow
動態調整他們的大小外,還用了order
調整版面的順序
不同的圖片 / 區塊排列
這種排版變化比較多一點,但不知道怎麼稱呼它,所以直接看範例比較清楚 XDDD。
一樣是大量運用到flex
屬性做調整,在這個例子中,flex-basis
尤其為最重要,當然還有一些對齊的語法也不能少。以下是有用到的語法:
flex-wrap
flex-basis
justify-content
以上三種排版,是我目前想到可能比較有趣,或是比較實際的例子 XD,如果有特別想要了解某些版面換成flex
該怎麼寫的話,也可以留言給我唷!
讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果
Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果,如果希望小工具也可以用 RWD 效果的話,可以在 CSS 加入以下程式碼:
語法來源:http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive
CSS Media Queries 介紹與基礎應用
「Responsive Web Design」這個觀念與技術已經發展一段時間了,但這一年幾乎荒廢了我的 Html/CSS 學習之路,所以對於 Responsive web design 的觀念仍是懵懵懂懂,但 Google 是萬能的,所以根據強大的 wikipedia 幫我們簡單的定義了何謂 Responsive Web Design:
A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
Responsive web design – Wikipedia, the free encyclopedia
(網站使用 CSS3 media queries (使用方法為 @media +各種規則),調整我們設計的版面。讓版面更加彈性,可以在不同的設備上瀏覽網站。)
也就是說,如果做出一個 Responsive web design (以下簡稱 RWD) 非常良好的網站,我們要先會運用 @media
這個新的 CSS3 的屬性。因此我花了一些時間,想先了解 @media
可以怎麼用? 會有怎樣的效果? 假使你跟我一樣,對 @media
懵懵懂懂還摸不著邊際,歡迎跟我一起學習;假使你已經是 RWD 大師,也歡迎幫我看看,我這樣的學習筆記認知,在觀念或是應用上有甚麼需要改進的地方 😀
Media Queries 介紹與基礎應用
Media 跟 Queries,我們可以先把它拆成兩塊來看:
基本呼叫 Media 的方法
@media 是 CSS 擴充元件的寫法之一,我們可以把它當成是 CSS 的類別,可能會比較好懂。 @media 呼叫方法有三種,範例如下:
1. HTML 在呼叫 CSS 的時候,將 media 的條件加入:
哈,是不是很有 IE Conditional Comments 的 FU。扯遠了,拉回~
2.直接寫在 css 檔案裡:
3.使用 @import:
Queries 基本使用方法
Query 顧名思義就是「查詢」的意思,我們如果要非常熟練的運用 media,各種條件跟條件之間的查詢是不可或缺的。
像是前面範例運用的 (min-width: 400px) and (max-width: 700px)
,那個「and」就是 Query 的一種。
Query 的語法只有三大項:not
, and
, only
。我們最常用的是「and
」,不難記,中文解釋也很簡單,比較困難的是,要怎麼加你心中設想的條件,用成語法呈現出來,所以要有一點邏輯概念會比較好上手。而這三種查詢條件可以獨立存在,也可以同時存在,只要用「,
」隔開條件串即可。
1. and
使用方法:
- 單一條件:
- 同時符合兩種條件:
- 兩種條件,符合一種即可
2. only
使用方法:
有的瀏覽器並不支援 Media Queries,但支援 Media Type,所以我們可以用only
來阻擋這些瀏覽器。
以上這段語法的意思為:
- 支援 Media Queries & Media Type 的瀏覽器:如果是彩色螢幕,就會讀取 test.css。
- 不支援 Media Queries,但支援 Media Type 的瀏覽器:因為有寫 only 條件,所以不會往下讀「彩色螢幕」,所以不會呼叫 test.css
- 不支援 Media Queries & Media Type 的瀏覽器:不管有沒有 only,都不會呼叫 test.css
3. not
使用方法:
not
是用來排除某些設備的樣式,假設你希望這個樣式只在 A 設備有作用, B 設備完全沒用,就可以使用 not 囉。
舉例如下:
我們也可以換個寫法,用數學運算子的括號先決,應該會比較清楚:@media (not (screen and (color))), print and (color)
Media 支援 type 與 features (值)
Media Type
Media 常見的支援裝置有: all, screen, print ,以下列出所有支援的裝置類型(by @W3C):
- all :所有可適用的裝置。
- braille :盲人點字器。
- embossed :盲人點字印表機。
- handheld : 手機/ PDA裝置。
- print :印表機列印輸出。
- projection :全螢幕投影輸出。
- screen :一般電腦螢幕 (含iphone, ipad)。
- speech :朗讀式裝置。
- tty :由文字長度決定大小的終端機裝置。
- tv :電視。
Media Feature
- width | min-width | max-width
(寬度 | 最小寬度 | 最大寬度) - height | min-height | max-height
(高度 | 最小高度 | 最大高度) - device-width | min-device-width | max-device-width
(裝置寬度 | 裝置最小寬度 | 裝置最大寬度) - device-height | min-device-height | max-device-height
(裝置高度 | 裝置最小高度 | 裝置最大高度) - orientation (value: portrait | landscape)
(裝置旋轉方向 值:直立 | 橫向) - aspect-ratio | min-aspect-ratio | max-aspect-ratio
(螢幕顯示比例 | 螢幕顯示最小比例 | 螢幕顯示最大比例) - device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
(裝置顯示比例 | 裝置顯示最小比例 | 裝置顯示最大比例) - color | min-color | max-color
(彩色 | 最小顏色bit數 | 最大顏色bit數)
color:0 表示該裝置為黑白(單色) - color-index | min-color-index | max-color-index
- monochrome | min-monochrome | max-monochrome
(單色 | 最小單色bit數 | 最大單色bit數)
monochrome :0 表示該裝置不是黑白(單色) - resolution | min-resolution | max-resolution
(解析度 | 最小解析度 | 最大解析度) - scan (value:progressive | interlace)
(TV 專用掃描) - grid
寫到這覺得篇幅好像過長,而且大家消化也需要一點時間,關於 Media Queries 更進階的運用,以及權重說明,等我更加瞭解後,再整理一份給大家參考吧!!
其實如同我開頭所言,RWD 的技術已經蠻成熟了,也許我這篇教學已經來的有點晚,網路上已經有很多相關應用與例子,不過還是希望經過我這樣的說明,大家可以更瞭解 Media Queries 的使用方法 😀
Media Queries 參考資料
1. [CSS] Media Query 小撇步 // HINA::工程幼稚園
2. Mobile Web 前端技術筆記(二): Media Queries 與 CSS // 烏托比亞
3. CSS3 Media Queries 詳解 // 池水間
4. CSS media queries // CSS | MDN
5. Media Queries // W3C