Bootstrap 實戰(zhàn)之響應(yīng)式個人博客（一）

一升酣、示例

1叽唱、主頁

博客首頁

2狸膏、博客詳情頁

博客詳情頁

3雨效、在線地址

在線地址：入口

Addition：這里使用github-page將自己的靜態(tài)項目免費部署到線上迅涮。

如果你只是做一些簡單的靜態(tài)項目做展示，付出這么大的時間和經(jīng)濟成本去專門購買一臺云服務(wù)器顯然是得不償失的徽龟。github提供了github-page讓用戶可以免費部署自己的靜態(tài)站點叮姑。更多參考：github-page

在本項目的靜態(tài)站點部署時與其他的代碼倉庫，提交同步?jīng)]有太大的區(qū)別（言外之意：還是有點不同的）：

第一點：需要將項目目錄名設(shè)置為 ”github用戶名.github.io”
第二點：作為一個靜態(tài)博客站點据悔，需要設(shè)置一個index.html或者default.html传透，作為默認的站點首頁。

Explanation：既然想利用免費的github-page就要根據(jù)別人的規(guī)則极颓。

解釋一：一旦將你的項目名稱設(shè)置為 ”github用戶名.github.io” 之后朱盐，那么github就會自動為你根據(jù)你的醒目名稱轉(zhuǎn)換分配一個域名，也就是“github用戶名.github.io”菠隆，比如該靜態(tài)站點的地址：https://weilanhanf.github.io/兵琳。
解釋二：通常我們在訪問一個url的時候狂秘，如果只有web服務(wù)器的域名，省略了文件名的形式躯肌，比如 “https://weilanhanf.github.io/” 者春，那么服務(wù)器怎么知道要訪問那個文件呢？這個url是以/結(jié)尾的清女，那么說明他就要訪問一個名叫“/”的目錄碧查，由于省略掉了文件名，就直接訪問index.html或者default.html這樣的文件了校仑，這個設(shè)置根據(jù)服務(wù)器的不同而不同忠售，大多數(shù)情況是這樣。那么下面呢迄沫？ ”https://weilanhanf.github.io” 稻扬，直接省略掉“/”，這種寫法也是允許的羊瘩，當(dāng)沒有路徑名的時候泰佳，就代表訪問根目錄下事先設(shè)置的默認文件。

Problems：unsolved

我在使用github-page搭建靜態(tài)站點的時候尘吗，出現(xiàn)小圖標(biāo)不顯示的問題逝她。可能是服務(wù)器沒配置的原因吧（-_-!!!）睬捶，還望大家?guī)兔鉀Q黔宛。

上次阿里云上部署Django項目的時候，后臺xadmin（bootstrap）管理系統(tǒng)擒贸，也有類似小圖標(biāo)的問題臀晃，修改nginx配置文件之后，問題解決介劫。參考鏈接：入口

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

4座韵、響應(yīng)后首頁

響應(yīng)后首頁

在點擊menu菜單之后险绘，導(dǎo)航欄垂直排列顯示

二、項目目錄結(jié)構(gòu)

目錄簡介：

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

項目目錄結(jié)構(gòu)

三、引入文件

Bootstrap 是一個前端開發(fā)框架翔烁。其實說白了就是一個樣式表文件（bootstrap.min.css）和一個 javascript 文件（bootstrap.min.js）渺氧，簡單的博客頁面，未使用JavaScript插件蹬屹，在頁面里把它們引入進來后侣背，就可以直接使用里面的 CSS 規(guī)則和各種組件了白华。

這里采用本地引入，也可以使用遠程CDN引入贩耐，有節(jié)省本地網(wǎng)絡(luò)資源的作用弧腥。

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

注意樣式表文件的前后順序潮太，如果不對管搪，會導(dǎo)致頁面無法正常運行。

先引入 bootstrap.min.css （Bootstrap的樣式表文件）
然后引入自己寫的 css 文件（main.css）

這樣才能起到自定義樣式覆蓋bootsrap樣式的作用铡买。

addition

另外如果在前端中需要引入大量javaScirpt文件的時候更鲁，一般將js文件置于html文件的尾部，這樣做的目的是：

在網(wǎng)絡(luò)不暢的時候會先加載出頁面的主體結(jié)構(gòu)奇钞，樣式布局澡为，這樣會給用戶一個頁面的大概感受，而js文件在整體頁面加載出來之后才會加載景埃，使用戶瀏覽此頁面的體驗盡可能最好媒至。

四、布局結(jié)構(gòu)

布局分為幾大部分：

導(dǎo)航欄谷徙，左側(cè)菜單欄拒啰，中間主體博客列表，右側(cè)推薦位完慧，頁尾谋旦。

首頁布局結(jié)構(gòu)

五、導(dǎo)航欄

1骗随、作用

導(dǎo)航條位于頁面最頂部蛤织，提供整個網(wǎng)站所有頁面的鏈接

2、自定義樣式

在鼠標(biāo)懸停的時候鸿染，導(dǎo)航欄列表的選項，有背景色樣式乞巧，為ul列表下的列表項添加navbar-list屬性涨椒，并在main.css中自定義樣式


.navbar-list li:hover{

    color: #555;

    background-color: #e7e7e7;

}

在鼠標(biāo)點擊頁面跳轉(zhuǎn)登錄和注冊頁的時候，有背景色樣式绽媒，為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="#">數(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="#">實戰(zhàn)</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：這里使用默認的導(dǎo)航欄樣式nav-default是辕，導(dǎo)航欄內(nèi)容包含在container中囤热，nav-header中為頁面的logo或者頁面的名稱。為了滿足強迫癥获三，使導(dǎo)航欄菜單列表與頁面博客列表對齊旁蔼，向右推進兩個柵格col-sm-offset-2锨苏。

4、效果示例

導(dǎo)航欄

六棺聊、左側(cè)菜單

1伞租、前言：柵格結(jié)構(gòu)

如果是自己寫 CSS ，實現(xiàn)這個均等排列的效果限佩？例如下面通過設(shè)置固定寬度/百分比來處理：


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

其實不用關(guān)心每一份的寬度是多少像素/百分比葵诈，只關(guān)心能不能自動地平均劃分成多少份，也就是說頁面的劃分是否是成比例的祟同， Bootstrap 的柵格系統(tǒng)布局就是為了實現(xiàn)自動計算每一份的寬度而誕生的作喘。柵格可以理解為一個安全門，它的總長度可以拉長晕城，可以縮短徊都，但是總的間隔數(shù)量是不變的，并且所有間隔的寬度都一樣广辰。** Bootstrap 的柵格系統(tǒng)規(guī)定了每個頁面的寬度被平均劃分為 12 等份**暇矫，不管整個頁面的寬度是 1000像素，還是500像素择吊，都會自動計算每一份（1/12）的寬度是多少李根。通過給柵格布局內(nèi)部的元素指定 class 為 col-md-份數(shù) ，來告訴它的寬度占據(jù)這12份里面的幾份几睛。

更多請參考：Bootstrap中文文檔：柵格結(jié)構(gòu)

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：使頁面內(nèi)容包含在container中，使用柵格結(jié)構(gòu)需要row所森，左側(cè)菜單欄占用兩個柵格col-sm-2囱持。

3、自定義樣式

為菜單選項去除默認邊框焕济，加圓角纷妆，加間距，在選中狀態(tài)下增加背景色晴弃。

在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掩幢、效果示例

導(dǎo)航欄

七上鞠、博客列表

1、前言

博客列表頁世曾，通常作為博客詳情頁的導(dǎo)航，根據(jù)每一條列表占據(jù)的大小谴咸，一頁有多少可列表項轮听。列表中包括博客頁的鏈接蕊程，標(biāo)題椒袍，簡介，作者藻茂，熱度，發(fā)布時間等优俘。

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

                            記錄點滴不恭，記錄成長。用博客記錄技術(shù)與經(jīng)驗的積累换吧，在這里找到志同道合的朋友沾瓦，編程的樂趣。

                        </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清除浮動魂莫，使列表項正常垂直排列撕蔼。

在博客項每一個列表鲸沮，又使用柵格系統(tǒng)將博客圖片和其他介紹內(nèi)容分開，分別占用col-xs-5 5和col-xs-7 7個位置讼溺，（共5+7=12個怒坯，夠了）。

這里使用Bootstrap的組件视译，一個向上豎起大拇指的手作為熱度圖標(biāo)归敬。

更多請參考：Bootstrap中文文檔：字體圖標(biāo)

3汪茧、自定義樣式

默認的a標(biāo)簽也就是超鏈接，在鼠標(biāo)懸停的時候會出現(xiàn)一條下劃線呀舔，把他設(shè)置為 text-decoration: none;媚赖，并在后邊設(shè)置為懸停時顏色變淺惧磺。

img元素width默認是auto丧失，設(shè)置max-width相當(dāng)于沒設(shè)置width布讹，max-width是控制溢出寬度、保證寬度不溢出白嘁。為avatar下的img元素設(shè)置為內(nèi)聯(lián)絮缅，寬高呼股，邊距彭谁。

因此對于，博客圖片和博客作者頭像则奥，是使用不同的圖片設(shè)置方式读处。

為列表項，設(shè)置內(nèi)邊距井辜，下邊框添加樣式增加美觀度抑胎。第一個元素渐北，和最后一個元素區(qū)別對待赃蛛。

博客簡介需要設(shè)置為塊元素，改變樣式破托，字體大小土砂，字重谜洽，懸停變色等阐虚。

在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实束、效果示例

導(dǎo)航欄

八咸灿、右側(cè)欄

1避矢、效果示例

導(dǎo)航欄

2谷异、前言

可以看出整個右側(cè)推薦位共分為三部分：

全局搜索框
廣告位
推薦欄

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">聯(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項目優(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閱讀 | 一小時前</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項目優(yōu)化</a>

                            <div class="side-item-info">1.4k閱讀 | 兩小時前</div>

                        </div>

                        <div class="side-bar-item">

                            <a href="#" class="side-item-title">淺析Django項目優(yōu)化</a>

                            <div class="side-item-info">4.1k閱讀 | 兩天前</div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

addition：在左側(cè)菜單欄與中間博客列表分別使用柵格結(jié)構(gòu)col-sm-2和col-sm-7尺上，因測12-2-7=3，右側(cè)欄的大小占柵格結(jié)構(gòu)的col-sm-3卑吭，整個柵格系統(tǒng)才算完整豆赏。

同樣的掷邦，我們也需要為右側(cè)欄添加clearfix屬性椭赋，清除浮動哪怔。

全局搜索框添加小圖標(biāo)增加美觀和指示作用，label的作用：label標(biāo)簽是用來定義表單控制間的關(guān)系胚委，當(dāng)用戶選擇該標(biāo)簽時篷扩，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上茉盏。

雖然label內(nèi)部沒有介紹信息鸠姨，但是label元素卻是不可缺少的，這是因為：如果你沒有為每個輸入控件設(shè)置 label 標(biāo)簽连茧，屏幕閱讀器將無法正確識別啸驯。對于內(nèi)聯(lián)表單，可以通過為label 設(shè)置 .sr-only 類將其隱藏徙鱼，但卻不可缺少袱吆。

在廣告位的位置同樣再次使用柵格系統(tǒng)距淫，使得廣告照片col-xs-5和廣告其他簡介信息col-xs-7分開榕暇。

更多請參考：Bootstrap中文文檔：表單

4拐揭、自定義樣式

為右側(cè)廣告位和推薦閱讀增加backgound，修圓角家肯。調(diào)整邊距位置讨衣。

當(dāng)鼠標(biāo)懸停推薦列表項時式镐，背景色加深與整體推薦列表形成對比娘汞，層次分明你弦，更加美觀。

在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烹俗、前言

這部分沒什么特別的內(nèi)容，使用 HTML5 的新增標(biāo)簽 <footer> ,使之更“語義化”兔仰，也可以使用Bootstrap的頁尾類斋陪。

2、代碼

這部分代碼缔赠，不像左側(cè)菜單嗤堰，博客列表以及右側(cè)欄那樣需要包含container中


<div class="modal-footer">

    <address class="text-center">

        <p>關(guān)于博客園 | 聯(lián)系我們 | 廣告服務(wù) | ?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

十一疏唾、鏈接

博客詳情頁及響應(yīng)式設(shè)計鏈接：Bootstrap 實戰(zhàn)之響應(yīng)式個人博客（二）

最后編輯于：2019.06.08 20:52:44

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末荸实，一起剝皮案震驚了整個濱河市准给，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌祖灰，老刑警劉巖局扶，帶你破解...
沈念sama閱讀 219,270評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件三妈，死亡現(xiàn)場離奇詭異畴蒲，居然都是意外死亡对室，警方通過查閱死者的電腦和手機掩宜，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,489評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門牺汤，熙熙樓的掌柜王于貴愁眉苦臉地迎上來慧瘤，“玉大人，你說我怎么就攤上這事糖儡∥樟” “怎么了金闽？”我有些...
開封第一講書人閱讀 165,630評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵代芜，是天一觀的道長挤庇。經(jīng)常有香客問我，道長渴语，這世上最難降的妖魔是什么驾凶？我笑而不...
開封第一講書人閱讀 58,906評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任调违，我火速辦了婚禮翰萨，結(jié)果婚禮上糕殉，老公的妹妹穿的比我還像新娘阿蝶。我一直安慰自己羡洁，他們只是感情好爽丹，可當(dāng)我...
茶點故事閱讀 67,928評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布真仲。她就那樣靜靜地躺著秸应，像睡著了一般碑宴。火紅的嫁衣襯著肌膚如雪延柠。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,718評論 1贊 305
城市分裂傳說
那天雹仿，我揣著相機與錄音闪唆，去河邊找鬼悄蕾。笑死帆调，一個胖子當(dāng)著我的面吹牛番刊，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播蝉绷，決...
沈念sama閱讀 40,442評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼枣抱！你這毒婦竟也來了熔吗？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,345評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤佳晶，失蹤者是張志新（化名）和其女友劉穎桅狠，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體轿秧，經(jīng)...
沈念sama閱讀 45,802評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡中跌，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,984評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年菇篡，在試婚紗的時候發(fā)現(xiàn)自己被綠了漩符。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,117評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡逸贾，死狀恐怖陨仅，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情铝侵，我是刑警寧澤灼伤，帶...
沈念sama閱讀 35,810評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站咪鲜，受9級特大地震影響狐赡，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜疟丙，卻給世界環(huán)境...
茶點故事閱讀 41,462評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一颖侄、第九天我趴在偏房一處隱蔽的房頂上張望鸟雏。院中可真熱鬧，春花似錦览祖、人聲如沸孝鹊。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,011評論 0贊 22
一樁弒父案展蒂，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽又活。三九已至，卻和暖如春锰悼，著一層夾襖步出監(jiān)牢的瞬間柳骄，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,139評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工箕般，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耐薯，地道東北人。一個月前我還...
沈念sama閱讀 48,377評論 3贊 373
代替公主和親
正文我出身青樓丝里，卻偏偏與公主長得像曲初，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子杯聚，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,060評論 2贊 355

Bootstrap 實戰(zhàn)之響應(yīng)式個人博客 （一）

一升酣、示例

1叽唱、主頁

2狸膏、博客詳情頁

3雨效、在線地址

4座韵、響應(yīng)后首頁

二、項目目錄結(jié)構(gòu)

三、引入文件

四、布局結(jié)構(gòu)

五、導(dǎo)航欄

1骗随、作用

2、自定義樣式

3、代碼

4、效果示例

六棺聊、左側(cè)菜單

1伞租、前言：柵格結(jié)構(gòu)

2房轿、代碼

3、自定義樣式

4掩幢、效果示例

七上鞠、博客列表

1、前言

2掀序、代碼

3汪茧、自定義樣式

4实束、效果示例

八咸灿、右側(cè)欄

1避矢、效果示例

2谷异、前言

3、代碼

4拐揭、自定義樣式

九、頁尾

1烹俗、前言

2、代碼

3踢匣、自定義樣式

4戚哎、效果示例

十型凳、源碼

十一疏唾、鏈接

推薦閱讀更多精彩內(nèi)容

Bootstrap 實戰(zhàn)之響應(yīng)式個人博客（一）