Flask 系列之 Bootstrap-Flask

说明#

操作系统：Windows 10
Python 版本：3.7x
虚拟环境管理器：virtualenv
代码编辑器：VS Code

实验目标#

通过使用 Bootstrap-Flask 来进行页面美化，为网站应用上 Bootstrap4.x 的样式。

由于 Flask-Bootstrap 很久没有更新，并且不支持 BS4，所以这里我们使用支持 BS4 的 Bootstrap-Flask 来进行界面美化

安装#

pip install bootstrap-flask

使用#

修改 todolist\app\__init__.py 文件，示例代码如下所示

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bootstrap import Bootstrap
from config import Config

app = Flask(__name__)
app.config.from_object(Config)
db = SQLAlchemy(app)
bootstrap = Bootstrap(app)

from app import views

在 todolist\app 目录下创建 views.py 文件，示例代码如下所示：

from app import app
from flask import render_template


@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html', title="首页")


@app.route('/login')
def login():
    return render_template('login.html', title='登录')


@app.route('/register')
def register():
    return render_template('register.html', title='注册')

在 todolist\templates 目录下创建一个 nav.html 文件，示例代码如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">愿望清单</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item {% if request.endpoint == 'index' %} active {% endif %}">
                    <a class="nav-link" href="{{ url_for('index') }}">首页<span class="sr-only">(current)</span></a>
                </li>
            </ul>

            <ul class="navbar-nav">
                <li class="nav-item {% if request.endpoint == 'login' %} active {% endif %}">
                    <a class="nav-link" href="{{ url_for('login') }}">登录</a>
                </li>
                <li class="nav-item {% if request.endpoint == 'register' %} active {% endif %}">
                    <a class="nav-link" href="{{ url_for('register') }}">注册</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

在 todolist\templates 目录下创建一个 login.html 文件，示例代码如下所示：

{% extends 'base.html' %} {% block content %}
<h1>登录页面</h1>
{% endblock %}

在 todolist\templates 目录下创建一个 register.html 文件，示例代码如下所示：

{% extends 'base.html' %} {% block content %}
<h1>注册页面</h1>
{% endblock %}

修改 todolist\templates\index.html，示例代码如下所示

{% extends 'base.html' %} {% block content %}
<h1>首页</h1>
{% endblock %}

在 todolist\static 目录下添加一个网站的 ico 格式图片资源，取名 favicon.ico

修改 todolist\templates\base.html，示例代码如下所示

<!doctype html>
<html lang="en">

<head>
    {% block head %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> {% block styles %}
    <!-- Bootstrap CSS -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"> {{ bootstrap.load_css() }} {% endblock %} {% if title %}
    <title>{{title}}</title>
    {% else %}
    <title>愿望清单</title>
    {% endif %} {% endblock %}
</head>

<body>

    {% include "nav.html" %}

    <div class="container">
        <!-- Your page contont -->
        {% block content %}{% endblock%}
    </div>

    {% block scripts %}
    <!-- Optional JavaScript -->
    {{ bootstrap.load_js() }} {% endblock %}

</body>

</html>