Bootstrap 實戰之響應式個人博客（一）

本文轉載自查看原文 2019-01-29 14:38 943 前端學習筆記

一、示例

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：
前端圖標不顯示：
之前在使用github-page搭建靜態站點的時候，出現小圖標不顯示的問題。可能github這個站點由於安全問題等服務器不支持的原因吧。上次阿里雲上部署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="#">first.last@example.com</div>
    </address>
</div>

3、自定義樣式

讓博客列表的最后一個元素與頁尾離得跟遠一些，增加一點外邊距。

在main.css中自定義樣式

.modal-footer{
    margin-top: 30px;
}

4、效果示例

導航欄

十、源碼

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

十一、鏈接

博客詳情頁及響應式設計鏈接：Bootstrap 實戰之響應式個人博客（二）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於ASP.NET MVC和Bootstrap搭建響應式個人博客站（一） bootstrap響應式表格響應式布局及bootstrap（實例）響應式布局與bootstrap框架 Bootstrap頁面響應式設計 Bootstrap4響應式布局之柵格系統 Bootstrap的響應式后台管理模板推薦 Bootstrap輪播代碼（響應式輪播）響應式布局和BootStrap 全局CSS樣式 bootstrap 響應式導航條（navigation）