響應式頁面只能用Bootstrap 3製作嗎？ 不，但它最方便！
響應式頁面(Responsive)框架百花齊放，但依情況其實並不真的有那麼多的選擇。
在這手機的當道的時代，讓你的網站外觀同時符合桌機、筆電、平板以及手機已經是基本常識。
Mobile Friendly(手機友好)已經是各大搜尋網站，尤其是Google，永遠的SEO重點項目。
當然影響SEO的原因還有很多，而且各家一直偷偷改變不完全公開透明，但就目前來看，除非VR虛擬實境眼鏡與AR混合實境大量普及並使用到網站。不然Mobile Friendly永遠都會是在SEO中佔不少的份量。
順便附上Google的測試網址。
(SEO = Search Engine Optimization = 搜尋引擎優化，當SEO越高，網站搜尋結果會越前面，曝光度越高。Wiki)
那什麼是同時符合各裝置呢？
這要怎麼實現？
這兩個可能會是我們比較在意的問題。
以前的話，為了多個不同的裝置，可能會建立完全不同的網站。
而現在不流行這樣做，這幾年的做法都是透過CSS手法，讓網頁的編排在不同的裝置大小呈現不同的樣式。通常就算利用桌機的網頁視窗放大縮小就可以看得到成果。各位不妨直接使用進度條的網站來試試看。
不過這邊要跟大家說，很可惜的，進度條並不是使用Bootstrap 3，而是使用Material Design Lite。
但如果小編這邊建議，如果對JavaScript、CSS與響應式頁面沒有一定的熟悉度。最好不要直接在專案上使用Material Design Lite，絕對會後悔。
(進度條是有評估過後才做決定的，當然評估時也已經了解到一定的程度。)
再繼續下去之前，這裡要先提到一個概念。一般來說，如果想要做到類似動畫的行為，有兩種方式：
一種是用JavaScript 動態的去變更CSS的值。
第二種是用CSS以及CSS3的一些參數去產生類似的功能。
最簡單的比較就是，如果滑鼠滑上去按鈕要會變色的話，可以使用JavaScript的 onmouseover 與 onmouseover, onmouseout
像是這個按鈕 (手機無法顯示效果)
這邊範例JS按鈕其實我偷用了jQuery, 還請大家原諒我。
$("#jsButton").mouseover(function(){
$(this).css('background-color', 'red');
}).mouseout(function(){
$(this).css('background-color', '');
})
</script>
或是使用CSS的hover
#cssButton:hover{
background-color: red;
}
</style>
光就程式碼的複雜度，很明顯的就可以看出來CSS比較單純。而執行效率的話更不用說，CSS大勝。
但這跟瀏覽器的行為有關，這邊先不詳細敘述，使用CSS的效果至少可以有效地避免JavaScript一次只能做一件事的阻塞問題。因此如果效果一樣的話，通常用CSS會是比較好的選擇。
回到我們的函式庫介紹，
一般來說，在大家看過大量使用的Bootstrap 3製作的網站後，都會想要來點不一樣的。所以在看到Material Design Lite後就有可能驚為天人，覺得Google就是不一樣。(前面忘了說，Material Design Lite是Google的作品)。
用下去後，一開始很好，一切都好棒棒，很多有趣的動作連寫都不用寫。直到開始與其他JavaScript函式庫互動，以及客製化UI時痛苦就開始了...
Material Design Lite的元件之所以有很多很炫的動作，是在於他會幫你上大量的JavaScript以及在初始化後增長其他的Element。所以當你要客製化的時候，相當的麻煩，因為很多原件都是在Document ready以後才長出來。加上Google把文件藏的很隱密，在其官網getmdl.io是找不到初始化的函數的描述，只有在網路上搜尋片段片段的可以看到而已。因此小編個人如果碰到需要完全客製化UI的網站。一般是不會考慮Material Design Lite的。
所以這裡就回到我們的Bootstrap 3。
用Bootstrap 3的理由其實很簡單，因為他Open Source，而且同時有Less 與 Sass的原始碼，程式碼不多，熟悉CSS的話短時間可以完全看完。加上他有完善的文件，以及大部分的功能都是完全使用CSS實現。有用到JavaScript的元件也都有分開說明，並且大多也是使用大家都很熟悉的jQuery來實現。技術上面也沒有用很奇怪的技巧。加上對於響應式最重要的Grid System是使用 CSS 的 Float來實現。比起CSS的Display flex要來得容易了解。
(Bootstrap 4 是使用Display flex 來實現 Grid System，因此很多網站是無法直接從Bootstrap 3升上4的，整個系統完全不一樣)
還有一個很重要的是：會Bootstrap 3的人多，而且上手容易，
社群資源豐富，以公司的角度來說比較安全。
很多人現在不推崇Bootstrap是因為他的UI大家已經看膩了。
但依小編的經驗，很多商業案的UI本來就是需要重新製作。
因此使用Bootstrap 3(Grid System) + 客製化UI ＋ 其他動畫JavaScript函式庫會是一個最單純的組合。
即使搭配上最近很潮的React.js 或是 Vue.js 也幾乎不會有相容性問題。
(Material Design Lite 會有很嚴重的問題，但是可以解決。)
當然，除了Bootstrap 3, Bootstrap 4, Material Design Lite 以外，
小編目前想得到的還有Materializecss 與 Foundation
這些也都是人氣相當高的響應式框架函式庫。
如果各位有興趣的話也可以試試喔！!
最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!!
進度條編輯群