摘要：現(xiàn)在我們打算實(shí)現(xiàn)一個(gè)在網(wǎng)頁(yè)上方的導(dǎo)航條，并在所有的頁(yè)面中繼承這個(gè)導(dǎo)航條。導(dǎo)航條的建立，我們直接使用提供的如下導(dǎo)航條的樣式。之后我們把上述導(dǎo)航條的代碼復(fù)制到的中，及引用復(fù)制到中，瀏覽器就能顯示和圖中一樣的導(dǎo)航條了。

在建設(shè)一個(gè)網(wǎng)站的時(shí)候，不同的頁(yè)面有很多元素是一樣的，比如導(dǎo)航條、側(cè)邊欄等，我們可以使用模板的繼承，避免重復(fù)編寫(xiě)html代碼?，F(xiàn)在我們打算實(shí)現(xiàn)一個(gè)在網(wǎng)頁(yè)上方的導(dǎo)航條，并在所有的頁(yè)面中繼承這個(gè)導(dǎo)航條。導(dǎo)航條的建立，我們直接使用Bootstrap提供的如下導(dǎo)航條的樣式。

但在使用Bootstrap的導(dǎo)航條樣式之前，需要先引用Bootstrap所需要的css和js文件以及jQuery，我們?cè)?b>html的header中插入以下代碼完成引用：

具體修改的點(diǎn)是，我把原始的Brand替換成了一個(gè)圖片作為logo，第一個(gè)下拉控件Dropdown刪掉了，最右側(cè)的下拉控件增加了一個(gè)選項(xiàng)，并把文字都替換成了我們想要的。然后建立了一個(gè)base.css文件來(lái)調(diào)整圖片大小、控件位置、背景色等等，這一部分都是基礎(chǔ)的html/css知識(shí)，也就不多說(shuō)。后續(xù)所有的網(wǎng)頁(yè)都要使用這個(gè)導(dǎo)航條，我們將含有導(dǎo)航條這個(gè)html命名為base.html，并在其body中，導(dǎo)航條代碼的下方增加以下代碼：
{% block body_part %}
{% endblock %}
然后新建一個(gè)home.html，輸入以下內(nèi)容：
{% extends "base.html" %}
{% block body_part %}
This is body content under nav-bar
{% endblock %}
渲染home.html并訪問(wèn)，我們可以看到這樣的結(jié)果：

因此我們不難理解，在home.html中，{% extends "base.html" %}表示繼承自base.html，home.html中block和endblock區(qū)間的代碼塊會(huì)自動(dòng)替換到base.html同樣名為body_part的block區(qū)域。block可以使用多個(gè)，例如在



{% block body_part %}
{% endblock %}

body{
    background: #F3F3F3;
}

.navbar-brand{
    padding: 0 5px;
    padding-right: 10px;
}

.logo{
    height: 50px;
}