專案開發技巧篇(二) : Bootstrap 開發響應式網頁

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day24 ，今天分享的是 以 Boostrap 為核心寫 RWD (響應式網站) 的實作技巧，我們在Day 16 有分享 RWD 的概念跟基本寫法，可以先看前一篇將基礎先學會，在這邊在進一步學習運用 bootstrap 寫出響應式網站 RWD，開始今天的主題吧 !

在看此篇，你必須先了解 ...

重要知識 !!　很重要!! 很重要 !! 很重要 !! (講三遍　

• 斷點 (Breakpoints) 的概念
• max-width 跟 min-width 差異

這兩個是 RWD 的 基本寫法核心，一定要熟悉原理跟寫法，在進一步學習才不會混淆，在 Day 16 我們會清楚知道 min-width 是以手機為主、會從小寫到大，跟 max-width 以 pc為主、從大寫到小，兩者寫法及思考方式會有點不太一樣，斷點設計是會讓你更清楚知道在何時我應該切換我的版型跟我應該如何去寫，這是非常重要的 rwd 知識

max-width
更多考慮調整、覆蓋樣式
例如:寬度變化，字體縮小，排版衝突問題

min-width
更多考慮隱藏區塊、寬度變化、pc版靈活度
例如: 手機顯示，ipad、pc內容以新增方式寫上去不太需要考慮覆蓋，ipad、pc內容在手機板隱藏 (display:none)

範例 - 個人專案 Rwd

當你上面 RWD 基礎觀念都清楚後，就可以開始往下來看 Bootstrap Rwd 教學了 !!

行動優先設計 Mobile First

Bootstrap的斷點是以min-width 為主，所以寫法要從小寫到大

在響應式開發中，主要會以行動版為優先。 Bootstrap 的 CSS 旨在使用最少的樣式來使佈局在最小的斷點處工作，然後在樣式上分層以針對較大的設備調整該設計。這樣可以優化CSS，縮短渲染時間，並為訪問者提供出色的體驗。(來自六角翻譯 Bootstrap)

Bootstrap 斷點

• Bootstrap 的預設斷點有六個，基礎、sm、md、lg、xl、xxl
  

在寫時我們會先寫手機樣式，再依序由小寫到大，並運用斷點適當切換版型

Bootstrap Rwd運用

• 在Bootstrap 中間加入斷點，在對應斷點就會依照你寫的改變樣式
  

是不是超級簡單超方便呢 !　試看看吧　！

utilities　開啟響應式

其實 bootstrap 原生樣式都有支援響應式，但是不是每個都預設有開啟，需要在 utilities 開啟 ，如果發現響應式寫無效，這時候可以去查看是否有開啟Rwd，或是bootstrap class有寫錯

utilities 開啟Rwd

• 開啟 utilities (copy出來的檔案，不會請看前篇)
• 找到相關 class
• 新增 rwd 、更改為true/false
  
  

Bootstrap 響應式就教學到這邊，其實不會很複雜、很難，只是需要多熟悉他的斷點寫法，跟如何新增響應式，試著練習看看吧 !