Bootstrap 實戰之響應式個人部落格 （一）
一、示例
1、主頁
2、部落格詳情頁
3、線上地址
線上地址： 入口
Addition：這裡使用github-page將自己的靜態專案免費部署到線上。
如果你只是做一些簡單的靜態專案做展示，付出這麼大的時間和經濟成本去專門購買一臺雲伺服器顯然是得不償失的。github提供了github-page讓使用者可以免費部署自己的靜態站點。更多參考： github-page
在本專案的靜態站點部署時與其他的程式碼倉庫，提交同步沒有太大的區別（ 言外之意 ：還是有點不同的）：
- 第一點：需要將專案目錄名設定為 ”github使用者名稱.github.io”
- 第二點：作為一個靜態部落格站點，需要設定一個 index.html 或者 default.html ，作為預設的站點首頁。
Explanation：既然想利用免費的github-page就要根據別人的規則。
- 解釋一：一旦將你的專案名稱設定為 ”github使用者名稱.github.io” 之後，那麼github就會自動為你根據你的醒目名稱轉換分配一個域名，也就是“github使用者名稱.github.io”，比如該靜態站點的地址： https://weilanhanf.github.io/ 。
- 解釋二：通常我們在訪問一個url的時候，如果只有web伺服器的域名，省略了檔名的形式，比如 “https://weilanhanf.github.io/” ，那麼伺服器怎麼知道要訪問那個檔案呢？這個url是以 / 結尾的，那麼說明他就要訪問一個名叫 “/” 的目錄，由於省略掉了檔名，就 直接訪問 index.html 或者 default.html 這樣的檔案了，這個設定根據伺服器的不同而不同，大多數情況是這樣。那麼下面呢？ ”https://weilanhanf.github.io” ，直接省略掉“/”，這種寫法也是允許的，當沒有路徑名的時候，就代表訪問根目錄下事先設定的預設檔案。
Problems：unsolved
我在使用github-page搭建靜態站點的時候，出現小圖示不顯示的問題。可能是伺服器沒配置的原因吧（-_-!!!），還望大家幫忙解決。
上次阿里雲上部署Django專案的時候，後臺xadmin（bootstrap）管理系統，也有類似小圖示的問題，修改 nginx 配置檔案之後，問題解決。參考連結： 入口
廢話說多了，下面步入正題。
4、響應後首頁
在點選menu選單之後，導航欄垂直排列顯示
二、專案目錄結構
目錄簡介：
- index.html：首頁
- blog.html：部落格詳情頁
- img：圖片儲存目錄
- css/bootstrap.min.css：目錄下的樣式表文件 bootstrap.min.css ，裡面定義了大量的 CSS 規則
- css/main.css：自定義css樣式，覆蓋bootstrap原始檔
三、引入檔案
Bootstrap 是一個前端開發框架。其實說白了就是一個樣式表文件（bootstrap.min.css）和一個 javascript 檔案（bootstrap.min.js），簡單的部落格頁面，未使用JavaScript外掛，在頁面裡把它們引入進來後，就可以直接使用裡面的 CSS 規則和各種元件了。
這裡採用本地引入，也可以使用 遠端CDN引入 ，有節省本地網路資源的作用。
BootCDN： 連結
建立檔案，以及引入樣式表和自定義樣式表文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/main.css"> </head> <body> </body> </html>
attention
注意樣式表文件的前後順序，如果不對，會導致頁面無法正常執行。
- 先引入 bootstrap.min.css （Bootstrap的樣式表文件）
- 然後引入自己寫的 css 檔案（main.css）
這樣才能起到自定義樣式覆蓋bootsrap樣式的作用。
addition
另外如果在前端中需要引入大量javaScirpt檔案的時候，一般將js檔案置於html檔案的尾部，這樣做的目的是：
在網路不暢的時候會先加載出頁面的主體結構，樣式佈局，這樣會給使用者一個頁面的大概感受，而js檔案在整體頁面加載出來之後才會載入，使使用者瀏覽此頁面的體驗儘可能最好。
四、佈局結構
佈局分為幾大部分：
導航欄，左側選單欄，中間主體部落格列表，右側推薦位，頁尾。
五、導航欄
1、作用
導航條位於頁面最頂部，提供整個網站所有頁面的連結
2、自定義樣式
在滑鼠懸停的時候，導航欄列表的選項，有背景色樣式，為 ul 列表下的列表項新增 navbar-list 屬性，並在 main.css 中自定義樣式
.navbar-list li:hover{
color: #555;
background-color: #e7e7e7;
}
在滑鼠點選頁面跳轉登入和註冊頁的時候，有背景色樣式，為 ul 列表下的列表項新增 navbar-right 屬性，並在 main.css 中自定義樣式
.navbar-right li:active{
color: #555;
background-color: #e7e7e7;
}
3、程式碼
<div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">My Blog</a> </div> <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>
addition：這裡使用預設的導航欄樣式 nav-default ，導航欄內容包含在 container 中， nav-header 中為頁面的logo或者頁面的名稱。為了滿足強迫症，使導航欄選單列表與頁面部落格列表對齊，向右推進兩個柵格 col-sm-offset-2 。
4、效果示例
六、左側選單
1、前言：柵格結構
如果是自己寫 CSS ，實現這個均等排列的效果？例如下面通過設定固定寬度/百分比來處理：
.item { float:left, width: 300px; /*或者 width: 33%*/ }
其實不用關心每一份的寬度是多少畫素/百分比，只關心能不能自動地平均劃分成多少份，也就是說 頁面的劃分是否是成比例的 ， Bootstrap 的柵格系統佈局就是為了實現 自動計算每一份的寬度 而誕生的。柵格可以理解為一個安全門，它的總長度可以拉長，可以縮短，但是總的間隔數量是不變的，並且所有間隔的寬度都一樣。** Bootstrap 的柵格系統規定了每個頁面的寬度被平均劃分為 12 等份 ，不管整個頁面的寬度是 1000畫素，還是500畫素，都會自動計算每一份（1/12）的寬度是多少。通過給柵格佈局內部的元素指定 class** 為 col-md- 份數 ，來告訴它的寬度佔據這12份裡面的幾份。
更多請參考： Bootstrap中文文件：柵格結構
2、程式碼
<div class="container"> <div class="row"> <div class="col-sm-2"> <div class="list-group side-bar"> <a class="list-group-item active" role="button">隨筆</a> <a class="list-group-item" role="button">隨筆</a> <a class="list-group-item" role="button">隨筆</a> <a class="list-group-item" role="button">隨筆</a> <a class="list-group-item" role="button">隨筆</a> <a class="list-group-item" role="button">隨筆</a> </div> </div> </div> </div>
addition：使頁面內容包含在 container 中，使用柵格結構需要 row ，左側選單欄佔用兩個柵格 col-sm-2 。
3、自定義樣式
為選單選項去除預設邊框，加圓角，加間距，在選中狀態下增加背景色。
在 main.css 中自定義樣式
.side-bar .list-group-item {
border: 0;
margin-bottom: 5px;
border-radius: 5px;
}
.side-bar .list-group-item .active {
background-color: #337ab7;
}
4、效果示例
七、部落格列表
1、前言
部落格列表頁，通常作為部落格詳情頁的導航，根據每一條列表佔據的大小，一頁有多少可列表項。列表中包括部落格頁的 連結，標題，簡介，作者，熱度，釋出時間 等。
2、程式碼
<div class="col-sm-7"> <div class="blog-list"> <div class="blog-list-item clearfix"> <div class="col-xs-5"> <img src="image/blog.png"> </div> <div class=""> <a href="#" class="title"> 記錄點滴，記錄成長。用部落格記錄技術與經驗的積累，在這裡找到志同道合的朋友，程式設計的樂趣。 </a> <div class="info"> <span class="avatar"><img src="image/v2-2d45613b0fb8cdd36f53c3b31d0c6ee8_hd.jpg" alt="avatar"></span> <span>散人</span> | <span>2.8K</span> <span class="glyphicon glyphicon-thumbs-up blog-hot" aria-hidden="true"></span> | <span>5分鐘前</span> </div> </div> </div> </div>
addition：中間部落格列表佔用七個柵格 col-sm-7 ，增加 clearfix 清除浮動，使列表項正常垂直排列。
在部落格項每一個列表，又使用柵格系統將部落格圖片和其他介紹內容分開，分別佔用 col-xs-5 5和 col-xs-7 7個位置，（共5+7=12個，夠了）。
這裡使用Bootstrap的元件，一個向上豎起大拇指的手作為熱度圖示。
更多請參考： Bootstrap中文文件：字型圖示
3、自定義樣式
預設的 a 標籤也就是超連結，在滑鼠懸停的時候會出現一條下劃線，把他設定為 text-decoration: none; ，並在後邊設定為懸停時顏色變淺。
img元素width預設是auto，設定max-width相當於沒設定width，max-width是控制溢位寬度、保證寬度不溢位。為 avatar 下的 img 元素設定為內聯，寬高，邊距。
因此對於，部落格圖片和部落格作者頭像，是使用不同的圖片設定方式。
為列表項，設定內邊距，下邊框新增樣式增加美觀度。第一個元素，和最後一個元素區別對待。
部落格簡介需要設定為塊元素，改變樣式，字型大小，字重，懸停變色等。
在 main.css 中自定義樣式
a:hover{
text-decoration: none;
}
img{
display: block;
max-width: 100%;
border-radius: 5px;
}
.avatar img{
display: inline-block;
width: 18px;
height: 18px;
margin-right: 3px;
}
.blog-list-item{
padding-bottom: 15px;
padding-top: 15px;
border-bottom: 1px solid #adadad;
}
.blog-list-item:last-child{
border-bottom: 0;
}
.blog-list-item:first-child{
padding-top: 0;
}
.blog-list-item .title{
display: block;
font-size: 18px;
font-weight: bold;
line-height: 2;
margin-bottom: 15px;
color: black;
}
.blog-list-item .title:hover {
color: #9d9d9d;
}
.blog-list-item .info{
color: #9d9d9d;
}
4、效果示例
八、右側欄
1、效果示例
2、前言
可以看出整個右側推薦位共分為三部分：
- 全域性搜尋框
- 廣告位
- 推薦欄
3、程式碼
<div class="col-sm-3"> <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-xs-5"> <img src="image/adver.png"> </div> <div class="col-xs-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>
addition：在左側選單欄與中間部落格列表分別使用柵格結構 col-sm-2 和 col-sm-7 ，因測 12-2-7=3 ，右側欄的大小佔柵格結構的 col-sm-3 ，整個柵格系統才算完整。
同樣的，我們也需要為右側欄新增 clearfix 屬性，清除浮動。
全域性搜尋框新增小圖示增加美觀和指示作用， label的作用：label標籤是用來定義表單控制間的關係，當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。
雖然label內部沒有介紹資訊，但是label元素卻是不可缺少的，這是因為： 如果你沒有為每個輸入控制元件設定 label 標籤，螢幕閱讀器將無法正確識別。對於內聯表單，可以通過為label 設定 .sr-only 類將其隱藏，但卻不可缺少。
在廣告位的位置同樣再次使用柵格系統，使得廣告照片 col-xs-5 和廣告其他簡介資訊 col-xs-7 分開。
更多請參考： Bootstrap中文文件：表單
4、自定義樣式
為右側廣告位和推薦閱讀增加 backgound ，修圓角。調整邊距位置。
當滑鼠懸停推薦列表項時，背景色加深與整體推薦列表形成對比，層次分明，更加美觀。
在 main.css 中自定義樣式
.side-bar-card{
background: rgba(0,0,0,.06);
padding: 15px 0;
border-radius: 5px;
}
.side-bar-card .side-bar-introduction{
padding-left: 5px;
line-height: 1.8;
color: #9d9d9d;
font-size: 15px;
}
.side-bar-card .side-bar-phone{
line-height: 1.5;
font-size: 13px;
}
.side-bar-recommend{
margin-top: 10px;
}
.side-bar-card .side-bar-title{
padding-left: 15px;
padding-bottom: 15px;
}
.side-bar-recommend .side-bar-list .side-bar-item{
padding: 15px 15px;
}
.side-bar-recommend .side-bar-list .side-bar-item:hover{
padding: 15px 15px;
background-color: rgba(0,0,0, .09);
}
.side-bar-recommend .side-bar-list .side-item-title{
color: black;
}
.side-bar-recommend .side-bar-list .side-item-title:hover{
color: #9d9d9d;
}
.side-bar-recommend .side-bar-list .side-item-info{
color: #9d9d9d;
font-size: 12px;
}
九、頁尾
1、前言
這部分沒什麼特別的內容，使用 HTML5 的新增標籤 <footer> ,使之更“語義化”，也可以使用Bootstrap的頁尾類。
2、程式碼
這部分程式碼，不像左側選單，部落格列表以及右側欄那樣需要包含 container 中
<div class="modal-footer"> <address class="text-center"> <p>關於部落格園 | 聯絡我們 | 廣告服務 | ©2004-2018部落格</p> <div href="#">[email protected]</div> </address> </div>
3、自定義樣式
讓部落格列表的最後一個元素與頁尾離得跟遠一些，增加一點外邊距。
在 main.css 中自定義樣式
.modal-footer{
margin-top: 30px;
}
4、效果示例
十、原始碼
上述部分如有整理不全請參照原始碼。