閱讀本博文前請(qǐng)參考：Bootstrap 實(shí)戰(zhàn)之響應(yīng)式個(gè)人博客 （一）
一、博客
1、結(jié)構(gòu)
整體博客詳情頁(yè)的結(jié)構(gòu)共包括四部分：
- 導(dǎo)航欄
- 博客主體內(nèi)容
- 右側(cè)欄：全局搜索框，廣告位，推薦閱讀
- 頁(yè)尾
其中導(dǎo)航欄沼沈，右側(cè)欄，頁(yè)尾都是可以復(fù)用博客列表頁(yè)（index.html）的元素以及樣式表的币厕，需要補(bǔ)充的只有博客主體內(nèi)容了列另，所有工作量大大減少了。
2旦装、簡(jiǎn)介
博客主頁(yè)應(yīng)該有一個(gè)對(duì)博客主體內(nèi)容的簡(jiǎn)介页衙，還有直觀的就是技術(shù)標(biāo)簽，比如Java阴绢，Python或者Bootstrap這些技術(shù)相關(guān)店乐，可以用一個(gè)醒目的lable元素外加著色。
還有博客的作者呻袭，熱度眨八，發(fā)布時(shí)間等，另外Bootstrap對(duì)blockquote定義的樣式比較好看左电，可以做博客的簡(jiǎn)語(yǔ)廉侧。
3页响、代碼
不像在主頁(yè)那樣有左側(cè)欄，博客詳情頁(yè)就需要重新修改柵欄結(jié)構(gòu)段誊，博客內(nèi)容為col-sm-8闰蚕，右側(cè)推薦欄為col-sm-4。
由于在主頁(yè)的時(shí)候连舍，許多元素的css樣式都已經(jīng)定義好了没陡，這里直接復(fù)用即可。例如這里的作者的頭像img
<div class="container">
<div class="col-sm-8">
<h1 class="blog-title">記錄點(diǎn)滴索赏，記錄成長(zhǎng)盼玄。用博客記錄技術(shù)與經(jīng)驗(yàn)的積累，在這里找到志同道合的朋友参滴，編程的樂(lè)趣强岸。</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>博客生活锻弓，記錄點(diǎn)滴</p>
</blockquote>
<img src="image/blog.png">
如果你有大量的設(shè)置為 inline 屬性的標(biāo)簽全部放在一個(gè)較窄的容器元素內(nèi)砾赔，在頁(yè)面上展示這些標(biāo)簽就會(huì)出現(xiàn)問(wèn)題，每個(gè)標(biāo)簽就會(huì)有自己的一個(gè) inline-block 元素（就像圖標(biāo)一樣）青灼。
解決的辦法是為每個(gè)標(biāo)簽都設(shè)置為 display: inline-block; 屬性暴心。
如果你有大量的設(shè)置為 inline 屬性的標(biāo)簽全部放在一個(gè)較窄的容器元素內(nèi)，在頁(yè)面上展示這些標(biāo)簽就會(huì)出現(xiàn)問(wèn)題杂拨，每個(gè)標(biāo)簽就會(huì)有自己的一個(gè) inline-block 元素（就像圖標(biāo)一樣）专普。
解決的辦法是為每個(gè)標(biāo)簽都設(shè)置為 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">聯(lián)系電話：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項(xiàng)目?jī)?yōu)化</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閱讀 | 一小時(shí)前</div>
</div>
<div class="side-bar-item">
<a href="#" class="side-item-title">web前段優(yōu)化策略</a>
<div class="side-item-info">2.9k閱讀 | 一周前</div>
</div>
<div class="side-bar-item">
<a href="#" class="side-item-title">淺析Django項(xiàng)目?jī)?yōu)化</a>
<div class="side-item-info">1.4k閱讀 | 兩小時(shí)前</div>
</div>
<div class="side-bar-item">
<a href="#" class="side-item-title">淺析Django項(xiàng)目?jī)?yōu)化</a>
<div class="side-item-info">4.1k閱讀 | 兩天前</div>
</div>
</div>
</div>
</div>
</div>
</div>
4弹沽、自定義樣式
修改博客題目字體樣式檀夹。
修改博客內(nèi)容字體內(nèi)容。
使博客主體圖片水平居中策橘，并且與博客文字內(nèi)容邊距增大炸渡。
在main.css中自定義樣式
/*博客補(bǔ)充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;
}
二、響應(yīng)式布局
1丽已、簡(jiǎn)介
Bootstrap 是移動(dòng)設(shè)備優(yōu)先的蚌堵，在四種設(shè)備中
- 超小屏幕 手機(jī) (<768px) .col-xs-
- 小屏幕 平板 (≥768px) .col-sm-
- 中等屏幕 桌面顯示器 (≥992px) .col-md-
- 大屏幕 大桌面顯示器 (≥1200px) .col-lg-
在整個(gè)響應(yīng)式博客中要做的就是，在頁(yè)面由桌面或者平板縮小為手機(jī)大小的時(shí)候沛婴，將整體頁(yè)面的左右側(cè)欄變?yōu)椴伙@示吼畏，導(dǎo)航欄通過(guò)按鈕（MENU）點(diǎn)擊將導(dǎo)航欄的菜單列表由水平排列變?yōu)榇怪迸帕小?/p>
2、示例
縮放網(wǎng)頁(yè)嘁灯，未點(diǎn)擊MENU泻蚊，導(dǎo)航欄菜單隱藏
點(diǎn)擊右上角MENU之后，菜單垂直顯示
[圖片上傳失敗...(image-561e64-1559997941106)]
3丑婿、修改導(dǎo)航欄
在上面的示例中可以看出來(lái)藕夫，主要需要找出一個(gè)元素來(lái)存儲(chǔ)點(diǎn)擊MENU和未點(diǎn)擊MENU的兩種狀態(tài)孽糖，來(lái)控制導(dǎo)航欄列表的隱藏與垂直顯示。
這里可以使用input選中checkbox類型作為復(fù)選框毅贮。通常label與input連用办悟，通過(guò)點(diǎn)擊label元素可以選中input元素。這里可以將input使用hidden類將其隱藏滩褥，而直接使用label作為checkbox復(fù)選框狀態(tài)的替代品病蛉。
利用visible-xs-inline-block使得MENU在縮放的時(shí)候才顯示。而導(dǎo)航欄菜單在超小屏幕的時(shí)候默認(rèn)為隱藏瑰煎，將菜單欄用hidden-xs類修飾铺然。
修改后的導(dǎo)航欄代碼：
<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="#">語(yǔ)言</a></li>
<li><a href="#">數(shù)據(jù)結(jié)構(gòu)</a></li>
<li><a href="#">網(wǎng)絡(luò)</a></li>
<li><a href="#">操作系統(tǒng)</a></li>
<li><a href="#">算法</a></li>
<li><a href="#">實(shí)戰(zhàn)</a></li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登陸</a></li>
<li><a href="#">注冊(cè)</a></li>
</ul>
</div>
</div>
</div>
4、修改樣式
在添加上面的幾個(gè)css類之后還是不夠的酒甸，因?yàn)?strong>checkbox框只能保存狀態(tài)還沒(méi)有真正作用于下面的div魄健，當(dāng)checkbox為選中狀態(tài)的時(shí)候，為checkbox底下的div指定規(guī)則插勤。才會(huì)正常達(dá)到效果
使label元素變?yōu)閮?nèi)聯(lián)標(biāo)簽沽瘦，并添加樣式。
在main.css中添加手機(jī)端自適應(yīng)樣式：
#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;
}
5农尖、左右側(cè)欄自適應(yīng)
Bootstrap本身就是響應(yīng)式友好析恋，所以對(duì)于主頁(yè)的左側(cè)菜單欄，以及主頁(yè)和詳情頁(yè)的右側(cè)推薦欄盛卡，在做自適應(yīng)的時(shí)候只需要hidden-xs隱藏即可助隧。
通過(guò)以上幾步一個(gè)簡(jiǎn)單的響應(yīng)式個(gè)人博客界面就搭建好了。
三滑沧、源碼
上述部分如有整理不全請(qǐng)參照源碼并村。
完整源碼地址：https://github.com/weilanhanf/weilanhanf.github.io
四、工具介紹之利用Github在Markdown中插入圖片
在使用markdown的時(shí)候滓技，通常會(huì)遇到插入圖片和其他多媒體文件的時(shí)候哩牍，比如在博文的撰寫的時(shí)候常需要插入圖片，常用的有兩種方式：
- 插入本地圖片
- 插入網(wǎng)絡(luò)圖片
但是插入本地圖片的時(shí)候不靈活不好分享殖属，本地圖片的路徑更改或丟失都會(huì)造成markdown文件調(diào)不出圖姐叁。
在博客撰寫的時(shí)候，這里使用插入網(wǎng)絡(luò)圖片洗显，雖然會(huì)相當(dāng)依賴網(wǎng)絡(luò)外潜，但是一般不會(huì)有問(wèn)題。只需插入簡(jiǎn)單鏈接即可挠唆。
而可以在github上建立倉(cāng)庫(kù)处窥，利用免費(fèi)的存儲(chǔ)空間存儲(chǔ)圖片，然后再引入圖片鏈接即可插入網(wǎng)絡(luò)圖片玄组。
例如在Github中專門創(chuàng)建一個(gè)存儲(chǔ)圖片以及多媒體文件的倉(cāng)庫(kù)滔驾，如“ https://github.com/weilanhanf/Photos ”谒麦，每一次需要引入圖片之前只需向倉(cāng)庫(kù)上傳圖片，或關(guān)聯(lián)本地倉(cāng)之后在本地倉(cāng)提交哆致，然后再在markdown中插入圖片鏈接即可绕德，如博客的詳情頁(yè)鏈接“ https://github.com/weilanhanf/Photos/blob/master/Blog/blog.png?raw=true ”。
就可正常顯示如下摊阀。
