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

時間 2019-11-18

原文原文鏈接

1、示例

一、主頁

二、博客詳情頁

三、在線地址

在線地址：入口javascript

Addition：這裏使用github-page將本身的靜態項目免費部署到線上。
若是你只是作一些簡單的靜態項目作展現，付出這麼大的時間和經濟成本去專門購買一臺雲服務器顯然是得不償失的。github提供了github-page讓用戶能夠免費部署本身的靜態站點。更多參考：github-page
在本項目的靜態站點部署時與其餘的代碼倉庫，提交同步沒有太大的區別（言外之意：仍是有點不一樣的）：css

第一點：須要將項目目錄名設置爲 」github用戶名.github.io」
第二點：做爲一個靜態博客站點，須要設置一個index.html或者default.html，做爲默認的站點首頁。

Explanation：既然想利用免費的github-page就要根據別人的規則。html

解釋一：一旦將你的項目名稱設置爲 」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：
前端圖標不顯示：
以前在使用github-page搭建靜態站點的時候，出現小圖標不顯示的問題。可能github這個站點因爲安全問題等服務器不支持的緣由吧。上次阿里雲上部署Django項目的時候，後臺xadmin（bootstrap）管理系統，也有相似小圖標的問題，修改nginx配置文件以後，問題解決。參考連接：入口前端

廢話說多了，下面步入正題。java

四、響應後首頁

在點擊menu菜單以後，導航欄垂直排列顯示python

2、項目目錄結構

目錄簡介：nginx

index.html：首頁
blog.html：博客詳情頁
img：圖片存儲目錄
css/bootstrap.min.css：目錄下的樣式表文件 bootstrap.min.css ，裏面定義了大量的 CSS 規則
css/main.css：自定義css樣式，覆蓋bootstrap源文件

3、引入文件

Bootstrap 是一個前端開發框架。其實說白了就是一個樣式表文件（bootstrap.min.css）和一個 javascript 文件（bootstrap.min.js），簡單的博客頁面，未使用JavaScript插件，在頁面裏把它們引入進來後，就能夠直接使用裏面的 CSS 規則和各類組件了。
這裏採用本地引入，也可使用遠程CDN引入，有節省本地網絡資源的做用。
BootCDN：連接git

創建文件，以及引入樣式表和自定義樣式表文件github

<!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
注意樣式表文件的先後順序，若是不對，會致使頁面沒法正常運行。web

先引入 bootstrap.min.css （Bootstrap的樣式表文件）
而後引入本身寫的 css 文件（main.css）
這樣才能起到自定義樣式覆蓋bootsrap樣式的做用。

addition
另外若是在前端中須要引入大量javaScirpt文件的時候，通常將js文件置於html文件的尾部，這樣作的目的是：
在網絡不順暢的時候會先加載出頁面的主體結構，樣式佈局，這樣會給用戶一個頁面的大概感覺，而js文件在總體頁面加載出來以後纔會加載，使用戶瀏覽此頁面的體驗儘量最好。

4、佈局結構

佈局分爲幾大部分：
導航欄，左側菜單欄，中間主體博客列表，右側推薦位，頁尾。

5、導航欄

一、做用

導航條位於頁面最頂部，提供整個網站全部頁面的連接

二、自定義樣式

在鼠標懸停的時候，導航欄列表的選項，有背景色樣式，爲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;
}

三、代碼

<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。

四、效果示例

6、左側菜單

一、前言：柵格結構

若是是本身寫 CSS ，實現這個均等排列的效果？例以下面經過設置固定寬度/百分比來處理：

.item { float:left, width: 300px; /*或者 width: 33%*/ }

其實不用關心每一份的寬度是多少像素/百分比，只關心能不能自動地平均劃分紅多少份，也就是說頁面的劃分是不是成比例的， Bootstrap 的柵格系統佈局就是爲了實現自動計算每一份的寬度而誕生的。柵格能夠理解爲一個安全門，它的總長度能夠拉長，能夠縮短，可是總的間隔數量是不變的，而且全部間隔的寬度都同樣。** Bootstrap 的柵格系統規定了每一個頁面的寬度被平均劃分爲 12 等份，無論整個頁面的寬度是 1000像素，仍是500像素，都會自動計算每一份（1/12）的寬度是多少。經過給柵格佈局內部的元素指定 class** 爲 col-md-份數，來告訴它的寬度佔據這12份裏面的幾份。

更多請參考：Bootstrap中文文檔：柵格結構

二、代碼

<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。

三、自定義樣式

爲菜單選項去除默認邊框，加圓角，加間距，在選中狀態下增長背景色。
在main.css中自定義樣式

.side-bar .list-group-item {
    border: 0;
    margin-bottom: 5px;
    border-radius: 5px;
}

.side-bar .list-group-item .active {
    background-color: #337ab7;
}

四、效果示例

7、博客列表

一、前言

博客列表頁，一般做爲博客詳情頁的導航，根據每一條列表佔據的大小，一頁有多少可列表項。列表中包括博客頁的連接，標題，簡介，做者，熱度，發佈時間等。

二、代碼

<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中文文檔：字體圖標

三、自定義樣式

默認的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;
}

四、效果示例

8、右側欄

一、效果示例

二、前言

能夠看出整個右側推薦位共分爲三部分：

全局搜索框
廣告位
推薦欄

三、代碼

<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中文文檔：表單

四、自定義樣式

爲右側廣告位和推薦閱讀增長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;
}

9、頁尾

一、前言

這部分沒什麼特別的內容，使用 HTML5 的新增標籤 <footer> ,使之更「語義化」，也可使用Bootstrap的頁尾類。

二、代碼

這部分代碼，不像左側菜單，博客列表以及右側欄那樣須要包含container中

<div class="modal-footer">
    <address class="text-center">
        <p>關於博客園 | 聯繫咱們 | 廣告服務 | ©2004-2018博客</p>
        <div href="#">first.last@example.com</div>
    </address>
</div>