1. 程式人生 > >Flask 系列之 Bootstrap-Flask

Flask 系列之 Bootstrap-Flask

管理 ase expand ret pts sql navi info stat

技術分享圖片

說明

  • 操作系統: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>

此時,打開當前項目的 shell 窗口,執行 python manage.py 即可看到 Bootstrap4 的樣式已經被應用到我們的網站頁面上了。

參考

  • bootstrap-flask
  • Bootstrap-Flask
  • Flask-Bootstrap
  • Bootstrap 4.3

Flask 系列之 Bootstrap-Flask