本博客完美的支持移動端

前幾天搞了個Bootstrap的皮膚，因爲時間的問題，隨意寫了下，瞬間被封殺。

博客主頁太複雜園友也不會去看，還不如簡單一點。

這幾天就改進了移動端顯示的問題，除了在4G加載的時候有點忙，（不知道怎麼改進）顯示方面已經很好的。

首先我主頁上只留下了文章列表，別的元素基本remove，或者hide了。導航欄是徹底自定義的，靜態的。

Bootstrap的導航欄對移動端支持的很是好，用Bootstrap的緣由是方便，不用去寫一大堆來支持各類客戶端。

我這裏用的百度的cdn。這裏應用jquery是由於博客園的jquery太老了，對Bootstrap支持很差。

1.導航欄

引用了 Bootstrap 就可用他的各類Css和字體圖標了。

就是純Bootstrap的導航欄，它的類是navbar，以前改的時候用的博客園默認的導航欄而後加上類，主要在移動端顯示的很差。因此隱藏了，手寫個靜態的。

手機上顯示如圖:

Bootstrap的導航欄就是這麼方便。

2. 博客標題

博客標題和簽名用的是Bootstrap的巨幕

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

 3.文章列表

文章列表隱藏了，訪問量和評論量，而後給沒個.day加了col-md-4(柵格)，而且把標題的a標籤隱藏，弄成了<h3>元素。

$(".postTitle").html(function () {
        return "<h3>" + $(this).find("a").hide().text() + "</h3>" });

還有閱讀全文的a標籤改爲了按鈕只須要給它添加一個類btn btn-default就能夠。

4.標籤頁

好比標籤JavaScript，首先window.location.pathname裏面肯定是否在個人標籤頁。

給標籤添加了列表的類list-group，經過正則表達式得到閱讀量，變成了列表的徽章。都是Bootstrap的類。

5.文章具體內容

主要溜改了代碼塊，Bootstrap對代碼塊支持的我以爲已經能夠了，我就把原來的類刪了。

評論列表是用的早期就作好的。

這裏主要是吧頭像顯示出來，若是沒上傳頭像的園友，顯示一個默認的。

     $(".feedbackCon").prepend('<img class="userImg" src="" />');
     $(".feedbackItem .feedbackCon span").each(function () { var userimgUrl = $(this).text(); userimgUrl = userimgUrl ? userimgUrl : "http://images.cnblogs.com/cnblogs_com/cyclone77/682571/o_sample_face.gif"; $(this).parent().find("img").attr("src", userimgUrl); })

還有就是評論框，和提交按鈕添加的Bootstrap的表單的類form-control， btn btn-default。

這裏有不少細節和Css樣式就不具體說了，有喜歡朋友我能夠分享出來。

手機測試（掃碼）：