目錄

• 結(jié)構：
• 1. 視圖函數(shù)
• 2. 模板
• 3. 登陸
• 4. 怎樣發(fā)生的
  • 添加模板
  • 基礎模板提供的block
  • 定制基礎模板

結(jié)構：

$ tree -I "__pycache*|*.pyc|*.xlsx" -FCL 3 . |-- templates/ | `-- h1.html `-- test-boostracp.py

1. 視圖函數(shù)

test-boostracp.py

from flask import Flask, render_template from flask_bootstrap import Bootstrapapp = Flask(__name__)bootstrap = Bootstrap(app)@app.route('/') def index():return render_template('h1.html')if __name__ == '__main__':app.run()

2. 模板

h1.html

{% extends 'bootstrap/base.html' %} ? {% block title %}博客中心{% endblock %} ? {# 導航條 #} {% block navbar %}<nav class="navbar navbar-inverse" style="border-radius: 0px;"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target=".navbar-collapse" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首頁</a></div> ?<!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="#">板塊一</a></li><li><a href="#">板塊二</a></li></ul> ?<ul class="nav navbar-nav navbar-right"><li><a href="#">登錄</a></li><li><a href="#">注冊</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container --></nav> {% endblock %} ? {% block content %}<div class="container">{% block page_content %}{% endblock %}</div> {% endblock %}

3. 登陸

命令：

python test-boostracp.py

瀏覽器：

http://localhost:5000/

4. 怎樣發(fā)生的

添加模板

{# 繼承自bootstrap的基礎模板 #} {% extends 'bootstrap/base.html' %} ? {% block title %}用戶登錄{% endblock %} ? {% block content %}<div class="container">歡迎您的到來</div> {% endblock %}

基礎模板提供的block

block說明

doc	整個HTML文檔
html	html標簽
head	head標簽
title	title標簽
styles	引入層疊樣式表
metas	一組meta標簽
body	body標簽
navbar	用戶定義的導航條
content	用戶定義的內(nèi)容
scripts	用戶定義的JS聲明

在使用時，若重寫了某個block，原來的顯示就消失了，八成是因為沒有調(diào)用super

定制基礎模板

定制一個基礎模板base.html繼承自bootstrap，其他模板繼承base.html

一般步驟：

從bootcss.com粘貼一個導航條模板內(nèi)容

將container-fluid改為container

刪除不需要的內(nèi)容(form)，改為自己想要的效果

改為反色導航條navbar-default => navbar-inverse

將圓角改為直角：style="border-radius: 0px;"

修改折疊標簽的選擇方式：data-target=".navbar-collapse"

轉(zhuǎn)載于:https://www.cnblogs.com/xuwei1/p/10070849.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Bootstrap使用-1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。