说明

  • 操作系统：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 的样式已经被应用到我们的网站页面上了。

参考

Flask 系列之 Bootstrap-Flask的更多相关文章

  1. Flask 系列之 部署发布

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过 Windows 的 WSL,将我们的项目网站部署到 ...

  2. python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

    python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...

  3. 【Python】Flask系列-URL和视图笔记

    1.学习目标 熟悉Flask相关知识. 熟悉web开发流程. 能独立开发Flask项目. 2.环境配置 Python虚拟环境安装 因为python的框架更新迭代太快了,有时候需要在电脑上存在一个框架的 ...

  4. flask之Twitter Bootstrap

    一:Twitter Bootstrap是什么? 1.开源框架:提供用户页面组件. 2.可以创建整洁且具有吸引力的网站,并且网站能兼容所有现代的Web浏览器. 特点: Bootstrap 是客户端框架, ...

  5. 实验4、Flask基于Blueprint & Bootstrap布局的应用服务

    1. 实验内容 模块化工程内容能够更好的与项目组内成员合作,Flask Blueprint提供了重要的模块化功能,使得开发过程更加清晰便利.此外,Flask也支持Bootstrap的使用. 2. 实验 ...

  6. Flask 系列之 Migration

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过使用 flask-migrate 实现数据库的迁移操 ...

  7. Flask系列04--Flask的蓝图

    flask蓝图 一.蓝图 蓝图(Blueprint),类似于实现django中路由分发那种感觉, 可以把Blueprint理解为不能被run的Flask对象 Blueprint实例化时需要的参数 基本 ...

  8. 【Python】Flask系列-cookie和session笔记

    cookie: 1.cookie出现的原因:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了 ...

  9. Flask系列(二)Flask基础

    知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi(上线) 2.实例化Flask对象,里面是有参数的 app = F ...

  10. Flask系列（三）蓝图、基于DButils实现数据库连接池、上下文管理

    知识点回顾 1.子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_value,aggr): # Ani ...

随机推荐

  1. [转]linux VLAN配置(vconfig)

    1.安装vlan(vconfig)和加载8021q模块 #aptitude install vlan #modprobe 8021q 2.使用linux vconfig命令配置vlan #vconfi ...

  2. 包建强的培训课程（16）：Android新技术入门和提高

    @import url(/css/cuteeditor.css); Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈 ...

  3. 关于动画的几种状态表示的含义以及能够使用2d动画表述为什么要使用3d动画表述

    transform 四种转换 translate 位置scale 缩放rotate 旋转skew 倾斜 以上四种转换方式是比较特殊的,其实他们都是由matrix 矩阵转换来: animation的五种 ...

  4. 【app】自动化必备之adb使用

    1.1 Adb介绍 adb(android debug bridge)是android sdk自带的一个工具 Adb是用来连接android设备和PC端的桥梁,通过adb工具,用户可以在PC端对手机进 ...

  5. nginx介绍（二） 架构篇

    2. nginx架构总览 传统的基于进程或者基于线程的模型处理并发的方式都是为每个连接单独创建一个处理进程或线程,会在网络传输或者I/O操作上阻塞.而这对应用来说,在内存和 CPU的使用上效率都是非常 ...

  6. Work Queues

    Round-robin dispatching 默认情况下,RabbitMQ按顺序分发消息给下一个消费者.平均每个消费者会得到相同数量的消息. Message acknowledgment 为了确保消 ...

  7. [Web安全之实战] 跨站脚本攻击XSS

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. 文章Points:  1. 认识XSS 2. ...

  8. MFC原理第一讲.MFC的本质.以及手工编写MFC的程序

    MFC原理第一讲.MFC的本质.以及手工编写MFC的程序 PS: 这个博客属于复习知识.从头开始讲解. 在写这篇博客之前.已经写了3篇MFC的本质了.不过掌握知识点太多.所以从简重新开始. 一丶MFC ...

  9. ES6躬行记（3）——解构

    解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是 ...

  10. Perl包相关

    名称冲突问题 假如在sum2.pm中使用require导入了一个代码文件sum1.pm: #!/usr/bin/env perl use strict; use warnings; use 5.010 ...