前言

在 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

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