目的
上一篇很簡單講了如何在Django中使用bootstrap丐谋。這一次闸婴，大概會(huì)說說自己使用bootstrap做Body的框架飞醉。
分析
一般的頁面分為頂部的導(dǎo)航條，內(nèi)容和尾部鏈接遭商、版權(quán)等信息固灵。對(duì)于每個(gè)頁面來講，這三部分框架是基本相同的（內(nèi)容有可能不同）株婴。所以最基本的body就包括navbar（導(dǎo)航條）怎虫、content（正文）和footer（尾注）暑认。
使用
接下來困介，依次看下上述三部分是如何搭建出來的。
**ps：bootstrap使用的是V3.3.5 **
1 navbar
在bootstrap網(wǎng)站導(dǎo)航條的組件里蘸际，在右側(cè)選擇導(dǎo)航條座哩。將默認(rèn)格式的導(dǎo)航條COPY到你的項(xiàng)目中，你就可以看到如官網(wǎng)的效果了（這就是開源讓我們站著巨人的肩膀上）粮彤。
幾點(diǎn)說明：
- 使用的標(biāo)簽名是nav根穷。當(dāng)然你也可以使用div，不過官網(wǎng)已經(jīng)告訴：如果想用div做導(dǎo)航條导坟，需要加一個(gè)role屬性-navigation屿良。
務(wù)必使用 <nav>
元素，或者惫周，如果使用的是通用的 <div>
元素的話尘惧，務(wù)必為導(dǎo)航條設(shè)置 role="navigation"
屬性，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個(gè)導(dǎo)航區(qū)域递递。
- 就拿nav來講（其他也一樣）喷橙，第一層子元素通常需要一個(gè)div（基礎(chǔ)知識(shí)：div通常沒有什么含義啥么，常作為邏輯劃分。div屬于塊狀元素贰逾。塊狀元素特別是每個(gè)都重起一行悬荣，可設(shè)置寬度高度）。在bootstrap中這個(gè)元素可用
container或者container-fluid疙剑，被稱為布局容器氯迂。區(qū)別在于：
container: 類用于固定寬度并支持響應(yīng)式布局的容器。
container-fluid 類用于 100% 寬度核芽，占據(jù)全部視口（viewport）的容器囚戚。
- 導(dǎo)航欄中如果直接用a標(biāo)簽，會(huì)發(fā)現(xiàn)便簽貼得很近轧简，
ul的class設(shè)置為nav navbar-nav驰坊。然后再在下一層使用li和a標(biāo)簽。
*導(dǎo)航欄的左右可以設(shè)置navbar-left或者navbar-right來居左或者居右哮独。
*導(dǎo)航欄的響應(yīng)式效果：注意如果想比如設(shè)置下拉拳芙，如果按照bootstrap起步里講的，是沒有效果的皮璧。原因是沒有加jquery在bootstrap的前面舟扎，如果想用響應(yīng)式效果需要在head中：
<script src="{% static 'js/jquery-2.2.3.min.js' %} "></script>
<script src="{% static 'js/bootstrap.min.js' %} "></script>
- 在很多網(wǎng)站可以看到：向下翻，導(dǎo)航條一直在頂部悴务，這個(gè)是因?yàn)閷?duì)
nav標(biāo)簽采用了.navbar-fixed-top的樣式睹限。但這樣也會(huì)造成一個(gè)問題，就是導(dǎo)航條和正文重疊讯檐。這個(gè)問題困擾了我好久羡疗，search的解決方案是，需要給body設(shè)定margin-top(** 基礎(chǔ)：盒子模型中重要的概念內(nèi)填充是內(nèi)容和標(biāo)簽的距離别洪； **)：
body {
margin-top: 70px;
}
*著色叨恨，一般來講，如果沒有美感（我是屬于完全沒有美感的童鞋）挖垛，所以我使用navbar-inverse修飾nav標(biāo)簽就好痒钝。
2 content正文
正文我做的比較簡單，左邊是side-bar（左邊欄）痢毒，內(nèi)容送矩。
這部分很基本來講，就是用到bootstrap的柵欄哪替，那就是div設(shè)置row栋荸，然后再里面再分塊（即再使用row修飾div）：
bootstrap中是分12格，所以看你的情況，做分割蒸其。
3 尾注
尾注一樣可以用nav敏释，只不過nav修飾的類是navbar-fixed-bottom，同樣摸袁，就需要設(shè)置body的margin-bottom钥顽。
結(jié)語
大致的框架就這樣出來了，雖然簡單靠汁，但是麻雀雖小蜂大，五藏俱全。
