分類
❄網站新玩意 (New Stuffs) 雲端印刷電商修練

網站升級 Bootstrap 4 筆記

四年前網站開始採用熱門的 Bootstrap 3 來設計網頁,趁這農曆年後空檔期間,將網站升級到新版 Bootstrap 4。Bootstrap 現已成為網頁設計師必備的技能條件之一,被認為是最好的響應式 CSS 框架,它採用了模組化設計,只要懂得如何套用 CSS Class,就可以快速開發出具有美感的響應式 (RWD) 網頁,輕鬆地就能做出漂亮的網頁。 Bootstrap 專為前端開發而設計,尤其手機優先 (mobile first) 的設計理念,讓手機螢幕也能夠輕鬆瀏覽網頁最為關鍵。

易普印官方網站在2016年中開始採用 Bootstrap 3,今年 (2020) 升級到 Bootstrap 4。新版本因採用 flexbox 技術,無法支援 IE 8/9 過時瀏覽器,據說 Bootstrap v5 將連 IE 10 也不會支援了!而為了少數還在使用 IE 8/9 的用戶,只能夠 加入額外元件(Bootstrap 4 for IE8/9) 來儘量支援它。有些網頁可能還會有問題,只好說聲抱歉了。

原本以為升級為 Bootstrap 4 應該會很快修改完畢,看過 Bootstrap Migrating to v4 的說明之後,才知道這個版本的改動幅度並不小,刪除和新增了好幾個元件,最加上也升級至 jQuery 3 , 最終大約花費一個月多才完成。

新版 Bootstrap 4 增加許多網頁排版的功能,可以很容易微調內距、外距 (Spacing),有點類似 Word、InDesgin 的樣式設定。以往是透過自行定義樣式 (CSS style),現在只要套用 Class 就可以輕鬆做到非常方便。

整個 Bootstrap 版本轉移過程,選單 (navbar) 的改寫是最麻煩的部分,因為有兩行選單及固定的上下邊,花費最多時間調整。上圖是使用 iPad 的畫面,注意看選單部分,會發現跟桌機長得不一哦!還順便測試微軟新版的 Edge 瀏覽器,感覺與 Chrome 相似,並不需要為它微調網頁。

分享