簡介

當我在做網站套版時,常會遇到的麻煩是,因為搭配的不同的設計師,或是抓不同網路上 template 來使用,不同的設計師,對版面的佈局 (layout),往往有不同的切入方式,佈局與命名也有不同的風格。

我們可以到 CSS layout 網站來逛逛,就可以發現,光常見的基本版型就有單欄、雙欄、三欄,不同版型依據不同的需求,還有不同的變形。以常見的單欄式網站來舉例,簡單條列就可以分為︰

光版面佈局就有各種不同的做法,再加上版面上的元素,像是清單 (list)、表格 (table)、表單 (form) 等元素排版,到後來整個 CSS 的樣式會非常龐大與複雜。這時候,如果設計師寫的 CSS 又不夠結構化的話,在開發與維護上會更造成麻煩。

甚至很多時候我只是想做一個小網站,展示一下想法。但往往會卡在,自己要去搞定整個版面佈局的部份,雖然也不是做不出來,但往往要做出一個我自己滿意 (或更慘,只是可以接受) 的網站版型,一個下午就不見了,非常沒有效率。

後來我看到了 Jedi 大師 寫的 Mollio Framework 介紹文,從中我才知道不只是我才有這樣的困擾。所以已經有許多專案,將常用的網站元素和 layout 的 CSS ,打包成了 Framework,以方便設計師和程序員,可以快速進行使用和套版。這部份比較有名的有︰BootstrapMollioBlueprintYUI Grid CSS 等等,各有其特色,但在使用各家的 Framework 後,我發現還是 Bootstrap 最得我心。

Bootstrap 介紹

Bootstrap 是由 Twitter 所 open source 出來的 CSS/Template Framework,由其官網對自身的描述,你就可以了解 Bootstrap 對自己的定位為何︰


Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

也就是說,Bootstrap 試圖對常見的網站元素 (user interface components, 如表單表格等),與互動模式 (interactions, 如對話框tab 分層 等) 等開發,提供簡單與彈性的 HTML、CSS 與 Javascript 基底,以幫助使用者提高其生產力。

而因為 Bootstrap 是自精粹自 Twitter 工程團隊在網站設定的過程,所以在整個 Framework 的設計上,你常常會感受到相當的實務與貼心,使用上相當容易上手與具生產力。並且預設的樣式就已經滿漂亮,很多時候也不需要再請設計師幫忙做調整。

另外在跨瀏覽器的支援上,也不用擔心。Bootstrap 支援市面上大部份的主流瀏覽器,可以閱讀官網上的 Browser Compatibility 一文,可以看到Bootstrap 對 IE (7 以上,IE6 must DIE!!)、Firefox、Chrome、Opera 等瀏覽器都有支援,請放心使用。

我自己曾經使用它,只花了一個下午加晚上,就將我預計要做的網站 prototype 給撰寫出來。並且整個 Javascript 效果一應俱全,完全都是使用 Bootstrap,我完全不需要再去 google 其他的 jQuery plugin 等外掛,過程相當舒服,可以享受一人純手工打造的快感。

介紹了這麼多,大家應該心動了吧,真的很推薦大家去抓來玩玩,過程中應該會很有趣的。

下篇文章,我將介紹 Bootstrap 的使用方式,和整理 Bootstrap 的相關資源。