Bootstrap 實戰之響應式我的博客 （二）

閱讀本博文前請參考：Bootstrap 實戰之響應式我的博客 （一）

1、博客

一、結構

總體博客詳情頁的結構共包括四部分：

• 導航欄
• 博客主體內容
• 右側欄：全局搜索框，廣告位，推薦閱讀
• 頁尾

其中導航欄，右側欄，頁尾都是能夠複用博客列表頁（index.html）的元素以及樣式表的，須要補充的只有博客主體內容了，全部工做量大大減小了。

二、簡介

博客主頁應該有一個對博客主體內容的簡介，還有直觀的就是技術標籤，好比Java，Python或者Bootstrap這些技術相關，能夠用一個醒目的lable元素外加着色。
還有博客的做者，熱度，發佈時間等，另外Bootstrap對blockquote定義的樣式比較好看，能夠作博客的簡語。

三、代碼

不像在主頁那樣有左側欄，博客詳情頁就須要從新修改柵欄結構，博客內容爲col-sm-8，右側推薦欄爲col-sm-4。
因爲在主頁的時候，許多元素的css樣式都已經定義好了，這裏直接複用便可。例如這裏的做者的頭像img

<div class="container">
    <div class="col-sm-8">
        <h1 class="blog-title">記錄點滴，記錄成長。用博客記錄技術與經驗的積累，在這裏找到志同道合的朋友，編程的樂趣。</h1>
        <div class="blog-info">
            <span class="avatar"><img src="image/v2-2d45613b0fb8cdd36f53c3b31d0c6ee8_hd.jpg" alt="avatar"></span>
            <span>散人</span> |
            <span>2.8K熱度</span> |
            <span>5分鐘前</span>
            <label class="label label-info">編程</label>
            <label class="label label-warning">博客</label>
            <label class="label label-success">Java</label>
        </div>
        <div class="blog-content">
            <blockquote>
                <p>博客生活，記錄點滴</p>
            </blockquote>
            <img src="image/blog.png">
            若是你有大量的設置爲 inline 屬性的標籤所有放在一個較窄的容器元素內，在頁面上展現這些標籤就會出現問題，每一個標籤就會有本身的一個 inline-block 元素（就像圖標同樣）。
            解決的辦法是爲每一個標籤都設置爲 display: inline-block; 屬性。
            若是你有大量的設置爲 inline 屬性的標籤所有放在一個較窄的容器元素內，在頁面上展現這些標籤就會出現問題，每一個標籤就會有本身的一個 inline-block 元素（就像圖標同樣）。
            解決的辦法是爲每一個標籤都設置爲 display: inline-block; 屬性。
        </div>
    </div>
    <div class="col-sm-4">
        <div class="search-bar">
            <form role="form">
                <div class="form-group has-feedback">
                    <label class="sr-only" for="Search">Search：</label>
                    <input type="search" class="form-control" placeholder="搜索" id="Search">
                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </div>
            </form>
        </div>
        <div class="side-bar-card clearfix">
            <div class="col-sm-5">
                <img src="image/adver.png">
            </div>
            <div class="col-sm-7 side-bar-introduction">
                <div class="">代碼改變世界</div>
                <div class="side-bar-phone">聯繫電話：XXXX</div>
            </div>
        </div>
        <div class="side-bar-card side-bar-recommend clearfix">
            <div class="side-bar-title">推薦閱讀</div>
            <div class="side-bar-body">
                <div class="side-bar-list">
                    <div class="side-bar-item">
                        <a href="#" class="side-item-title">淺析Django項目優化</a>
                        <div class="side-item-info">10.4k閱讀 | 五天前</div>
                    </div>
                    <div class="side-bar-item">
                        <a href="#" class="side-item-title">python解釋器</a>
                        <div class="side-item-info">0.4k閱讀 | 一小時前</div>
                    </div>
                    <div class="side-bar-item">
                        <a href="#" class="side-item-title">web前段優化策略</a>
                        <div class="side-item-info">2.9k閱讀 | 一週前</div>
                    </div>
                    <div class="side-bar-item">
                        <a href="#" class="side-item-title">淺析Django項目優化</a>
                        <div class="side-item-info">1.4k閱讀 | 兩小時前</div>
                    </div>
                    <div class="side-bar-item">
                        <a href="#" class="side-item-title">淺析Django項目優化</a>
                        <div class="side-item-info">4.1k閱讀 | 兩天前</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

四、自定義樣式

修改博客題目字體樣式。
修改博客內容字體內容。
使博客主體圖片水平居中，而且與博客文字內容邊距增大。

在main.css中自定義樣式

/*博客補充css*/
.blog-title{
    font-size: 30px;
    line-height: 1.5;
    font-weight: bold;
}

.blog-info{
    line-height: 1.8;
    color: #9d9d9d;
    font-size: 15px;
}

.blog-info .label{
    opacity: 0.8;
}

.blog-content{
    padding-top: 15px;
    font-size: 15px;
    line-height: 1.5;
}

.blog-content img{
    margin: 15px auto;
}

2、響應式佈局

一、簡介

Bootstrap 是移動設備優先的，在四種設備中

• 超小屏幕 手機 (<768px) .col-xs-
• 小屏幕 平板 (≥768px) .col-sm-
• 中等屏幕 桌面顯示器 (≥992px) .col-md-
• 大屏幕 大桌面顯示器 (≥1200px) .col-lg-

在整個響應式博客中要作的就是，在頁面由桌面或者平板縮小爲手機大小的時候，將總體頁面的左右側欄變爲不顯示，導航欄經過按鈕（MENU）點擊將導航欄的菜單列表由水平排列變爲垂直排列。

二、示例

縮放網頁，未點擊MENU，導航欄菜單隱藏

點擊右上角MENU以後，菜單垂直顯示

三、修改導航欄

在上面的示例中能夠看出來，主要須要找出一個元素來存儲點擊MENU和未點擊MENU的兩種狀態，來控制導航欄列表的隱藏與垂直顯示。
這裏可使用input選中checkbox類型做爲複選框。一般label與input連用，經過點擊label元素能夠選中input元素。這裏能夠將input使用hidden類將其隱藏，而直接使用label做爲checkbox複選框狀態的替代品。

利用visible-xs-inline-block使得MENU在縮放的時候才顯示。而導航欄菜單在超小屏幕的時候默認爲隱藏，將菜單欄用hidden-xs類修飾。

修改後的導航欄代碼：

<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">My Blog</a>
        </div>
        <label class="toggle-label visible-xs-inline-block" for="toggle-checkbox">MENU</label>
        <input class="hidden" id="toggle-checkbox" type="checkbox">
        <div class="hidden-xs">
            <div class="col-sm-offset-2">
                <ul class="nav navbar-nav navbar-list">
                    <li><a href="#">所有分類</a></li>
                    <li><a href="#">語言</a></li>
                    <li><a href="#">數據結構</a></li>
                    <li><a href="#">網絡</a></li>
                    <li><a href="#">操做系統</a></li>
                    <li><a href="#">算法</a></li>
                    <li><a href="#">實戰</a></li>
                </ul>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登錄</a></li>
                <li><a href="#">註冊</a></li>
            </ul>
        </div>
    </div>
</div>

四、修改樣式

在添加上面的幾個css類以後仍是不夠的，由於checkbox框只能保存狀態尚未真正做用於下面的div，當checkbox爲選中狀態的時候，爲checkbox底下的div指定規則。纔會正常達到效果
使label元素變爲內聯標籤，並添加樣式。

在main.css中添加手機端自適應樣式：

#toggle-checkbox:checked ~ div{
    display: block !important;
}

.toggle-label{
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 15px;
    font-weight: normal;
    color: #777;
}

.toggle-label:hover{
    color: #333;
}

五、左右側欄自適應

Bootstrap自己就是響應式友好，因此對於主頁的左側菜單欄，以及主頁和詳情頁的右側推薦欄，在作自適應的時候只須要hidden-xs隱藏便可。

登陸頁面請參考前端學習 之 Bootstrap（二）的第5小節：登陸頁面

經過以上幾步一個簡單的響應式我的博客界面就搭建好了。

3、源碼

上述部分若有整理不全請參照源碼。
完整源碼地址：https://github.com/weilanhanf/weilanhanf.github.io

4、工具介紹之利用Github在Markdown中插入圖片

在使用markdown的時候，一般會遇到插入圖片和其餘多媒體文件的時候，好比在博文的撰寫的時候常須要插入圖片，經常使用的有兩種方式：

• 插入本地圖片
• 插入網絡圖片

可是插入本地圖片的時候不靈活很差分享，本地圖片的路徑更改或丟失都會形成markdown文件調不出圖。
在博客撰寫的時候，這裏使用插入網絡圖片，雖然會至關依賴網絡，可是通常不會有問題。只需插入簡單連接便可。

而能夠在github上創建倉庫，利用免費的存儲空間存儲圖片，而後再引入圖片連接便可插入網絡圖片。
例如在Github中專門建立一個存儲圖片以及多媒體文件的倉庫，如「 https://github.com/weilanhanf/Photos 」，每一次須要引入圖片以前只需向倉庫上傳圖片，或關聯本地倉以後在本地倉提交，而後再在markdown中插入圖片連接便可，如博客的詳情頁連接「 https://github.com/weilanhanf/Photos/blob/master/Blog/blog.png?raw=true 」。
就可正常顯示以下。