摘要:現(xiàn)在我們打算實(shí)現(xiàn)一個(gè)在網(wǎng)頁上方的導(dǎo)航條,并在所有的頁面中繼承這個(gè)導(dǎo)航條。導(dǎo)航條的建立,我們直接使用提供的如下導(dǎo)航條的樣式。之后我們把上述導(dǎo)航條的代碼復(fù)制到的中,及引用復(fù)制到中,瀏覽器就能顯示和圖中一樣的導(dǎo)航條了。
在建設(shè)一個(gè)網(wǎng)站的時(shí)候,不同的頁面有很多元素是一樣的,比如導(dǎo)航條、側(cè)邊欄等,我們可以使用模板的繼承,避免重復(fù)編寫html代碼。現(xiàn)在我們打算實(shí)現(xiàn)一個(gè)在網(wǎng)頁上方的導(dǎo)航條,并在所有的頁面中繼承這個(gè)導(dǎo)航條。導(dǎo)航條的建立,我們直接使用Bootstrap提供的如下導(dǎo)航條的樣式。
但在使用Bootstrap的導(dǎo)航條樣式之前,需要先引用Bootstrap所需要的css和js文件以及jQuery,我們?cè)?b>html的header中插入以下代碼完成引用:
這里都是通過鏈接引用網(wǎng)絡(luò)上的css和js文件,而不是將其下載下來并從本地引用。之后我們把上述導(dǎo)航條的代碼復(fù)制到html的body中,js及css引用復(fù)制到header中,瀏覽器就能顯示和圖中一樣的導(dǎo)航條了。我們?cè)僮鲆恍┖?jiǎn)單的修改和優(yōu)化,最終我們的導(dǎo)航條是這樣的:
具體修改的點(diǎn)是,我把原始的Brand替換成了一個(gè)圖片作為logo,第一個(gè)下拉控件Dropdown刪掉了,最右側(cè)的下拉控件增加了一個(gè)選項(xiàng),并把文字都替換成了我們想要的。然后建立了一個(gè)base.css文件來調(diào)整圖片大小、控件位置、背景色等等,這一部分都是基礎(chǔ)的html/css知識(shí),也就不多說。后續(xù)所有的網(wǎng)頁都要使用這個(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并訪問,我們可以看到這樣的結(jié)果:
因此我們不難理解,在home.html中,{% extends "base.html" %}表示繼承自base.html,home.html中block和endblock區(qū)間的代碼塊會(huì)自動(dòng)替換到base.html同樣名為body_part的block區(qū)域。block可以使用多個(gè),例如在
最終base.html代碼如下:
{% block page_name %}{% endblock %}-HarpQA {% block body_part %} {% endblock %}
請(qǐng)注意一下base.css和logo圖片的引用,我們也使用了url_for函數(shù),第一個(gè)參數(shù)是static,代表項(xiàng)目文件夾下static文件夾,第二個(gè)參數(shù)是以static文件夾為基準(zhǔn)靜態(tài)文件的相對(duì)路徑,我們把js文件/css文件/圖片文件等都放在這個(gè)文件夾下,所以這個(gè)用法以后會(huì)經(jīng)常使用。我們?cè)谑詹鼐W(wǎng)頁的時(shí)候,網(wǎng)頁都有一個(gè)小圖標(biāo),我們也可以在header中使用這行html代碼來實(shí)現(xiàn):
把favicon.ico文件放在static/images文件夾即可,我們使用了Flask的圖標(biāo),效果如下圖:
base.css代碼如下:
body{ background: #F3F3F3; } .navbar-brand{ padding: 0 5px; padding-right: 10px; } .logo{ height: 50px; }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/41238.html
摘要:控制結(jié)構(gòu)條件控制語句循環(huán)還支持宏。宏類似于代碼中的函數(shù)。在指令之后,基模板中的個(gè)塊被重新定義,模板引擎會(huì)將其插入適當(dāng)?shù)奈恢谩3跏蓟螅涂梢栽诔绦蛑惺褂靡粋€(gè)包含所有文件的基模板。之前版本的模板中的歡迎信息,現(xiàn)在就放在這個(gè)頁面頭部。 四、模板 FMTV F:form表單 M:Model模型(數(shù)據(jù)庫) T:Template模板 V:view視圖(路由) 1、渲染模板 模板是一個(gè)包含響應(yīng)...
摘要:示例使用的模板的指令通過從引用來實(shí)現(xiàn)模板的繼承。上面的模板定義了三個(gè),分別命名為和。同時(shí)返回相應(yīng)錯(cuò)誤的數(shù)字狀態(tài)碼。示例帶有導(dǎo)航欄的基礎(chǔ)應(yīng)用程序模板這個(gè)模板中的塊中只是一個(gè)名為的元素,它包含了在派生模板中定義的名為的空。 2、集成Twitter Bootstrap的Flask-Bootstrap Bootstrap是Twitter的一個(gè)開源框架,提供用戶交互組件來創(chuàng)建一個(gè)清新且有吸引力...
閱讀 1446·2021-09-22 15:43
閱讀 2161·2019-08-30 15:54
閱讀 1162·2019-08-30 10:51
閱讀 2087·2019-08-29 18:35
閱讀 433·2019-08-26 11:58
閱讀 2481·2019-08-26 11:38
閱讀 2439·2019-08-23 18:35
閱讀 3633·2019-08-23 18:33