Flask入門之Bootstrap介紹使用和Flask-Nav快速導航欄

一、Bootstrap

　　Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。

　　Python中，同樣可以使用Bootstrap。

　　1. 導入Bootstrap庫

from flask_bootstrap import Bootstrap

　　2. 實例化

Bootstrap(app)

　　Samply.py

# coding:utf-8
from flask import Flask,render_template,request,url_for
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

@app.route('/')
def home():
    return render_template('home.html',title_name = 'welcome')

@app.route('/service')
def service():
    return 'service'

@app.route('/about')
def about():
    return 'about'

if __name__ == '__main__':
    app.run(debug=True)

　　3. 定義塊內容

　　home.html

 

{% extends 'bootstrap/base.html' %}  #聲明繼承
{% import '_macro.html' as ui %}

{% block title %}{{ title_name }}{% endblock %}

{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ self.title() }}</h1>
        </div>
    </div>
    <div class="container">
    {{  ui.input('username') }}
    {{  ui.input('password',type='password') }}
    </div>
{% endblock content %}

{% block head %}
    {{ super() }}
    {% include 'includes/_head.html' %}
{% endblock %}

　　這時候我們看一下，運行出來是什么樣子

 

------------------------------------------------------------------------------------------------

 

　　基本的內容有了，如果我們想要加上一個標題欄

　　可以使用Flask-Nav擴展，如何使用呢？

　　1. 導入庫

 

from flask_nav import Nav
from flask_nav.elements import *

 

　　2. 實例化並注冊一個導航欄

nav=Nav()
nav.register_element('top',Navbar(u'Flask入門',
                                    View(u'主頁','home'),
                                    View(u'關於','about'),
                                    Subgroup(u'項目',
                                             View(u'項目一','about'),
                                             Separator(),
                                             View(u'項目二', 'service'),
                                    ),
))

 

 

　　3. 初始化這個實例

 

nav.init_app(app)

 

　　以上這些都是在Samply.py文件里

　　4. 渲染並定義成塊，home.html

{% block navbar %}
    {{ nav.top.render() }}
{% endblock %}

 

 

　　這時候我們看一下，運行出來是什么樣子

　　5. 增加樣式表

　　這個時候我們發現配色太單調了，這時候我們可以引用 BootstrapCDN （地址）的CSS樣式表，只要把地址填入href中就可以

　　　　不改變原head的情況下，又增加css樣式表

{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}

 

 　　這時候我們看一下，運行出來是什么樣子

 

 

-------------------------------完成@@-----------------------------------

 

參考文檔：

1. Bootstrap中文網

2. Flask-Nav 文檔

3. W3C Bootstrap教程

4. BootstrapCDN頁面

 

附錄：

Sample.py

 

# coding:utf-8
from flask import Flask,render_template,request,url_for
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from flask_nav.elements import *
app = Flask(__name__)
Bootstrap(app)
nav=Nav()
nav.register_element('top',Navbar(u'Flask入門',
                                    View(u'主頁','home'),
                                    View(u'關於','about'),
                                    Subgroup(u'項目',
                                             View(u'項目一','about'),
                                             Separator(),
                                             View(u'項目二', 'service'),
                                    ),
))

nav.init_app(app)
@app.route('/')
def home():
    return render_template('home.html',title_name = 'welcome')

@app.route('/service')
def service():
    return 'service'

@app.route('/about')
def about():
    return 'about'

@app.template_test('current_link')
def is_current_link(link):
    return link == request.path

if __name__ == '__main__':
    app.run(debug=True)

 home.html

{% extends 'bootstrap/base.html' %}
{% import '_macro.html' as ui %}

{% block title %}{{ title_name }}{% endblock %}

{% block content %}
    <div class="page-header">
        <div class="container">
            <h1>{{ self.title() }}</h1>
        </div>
    </div>
    <div class="container">
    {{  ui.input('username') }}
    {{  ui.input('password',type='password') }}
    </div>
{% endblock content %}

{% block head %}
    {{ super() }}
    {% include 'includes/_head.html' %}
{% endblock %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
{% endblock %}

{% block navbar %}
    {{ nav.top.render() }}
{% endblock %}

 

 _macro.html

{# 定義宏 #}
{% macro input(name,value='',type='text',size=20) %}
    <input type="{{ type }}"
        name="{{ name }}"
        value="{{ value }}"
        size="{{ size }}"/>
{% endmacro %}