前言

Hello Pelican + GitHub Pages 介紹部落格的時候有提到,現在使用的 Pelican 樣式是 Jenny 設計的 pelican-fresh ,其設計是架構在 Bootstrap v2.x 的版本之上。因為我想要重新設計選單的樣式,使其可以支援使用行動裝置瀏覽的時候,選單會自動轉換成較好操作,而且又不會佔用閱讀空間的設計樣式,剛好我發現 Bootstrap v3.x 內建就有這樣的樣式風格,就決定把部落格使用的 Bootstrap 從 v2 轉換到 v3。

轉換

轉換的部份其實蠻簡單的,主要可以參考官方的轉換文件,將 v2 對應的 class 改變成 v3 的版本,並針對部分 default 的 CSS 做微調即可。而且 Bootstrap v3 內建的設計風格因應業界趨勢,朝向扁平化發展,搭配許多新的 Glyphicons,可以很快速的完成一個簡單的樣式,看起來還不錯。

官方轉換文件 - http://getbootstrap.com/migration/

不過要注意的是,在跨瀏覽器方面,Bootstrap v3 不支援 IE7 和 Firefox 3.6,有跨瀏覽器需求的人要注意一下是否要使用 Bootstrap v3。

選單

使用 Bootstrap v3 重新設計選單的樣式,我是直接參考 twitter bootstrap tutorial 有關設計選單的教學。

Creating a Simple Navbar with Twitter Bootstrap - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-navbar.php

照著做就可以有支援行動裝置的選單樣式了。