進度條

響應式頁面只能用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, 還請大家原諒我。

<script>
 $("#jsButton").mouseover(function(){
    $(this).css('background-color', 'red');
 }).mouseout(function(){
    $(this).css('background-color', '');
 })
</script>

 

或是使用CSS的hover

<style>
#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粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊