说明

  • 操作系统：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. 【腾讯Bugly干货分享】职场中脱颖而出的成长秘诀

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/uQKpVg7HMLfogGzzMyc9iQ 导语 时光 ...

  2. 应用篇 = Docker下的Redis

    一.工具介绍 1.1 什么是Docker? Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目.使用 Google 公司推出的 Go 语言 ...

  3. 第77节:Java中的事务和数据库连接池和DBUtiles

    第77节:Java中的事务和数据库连接池和DBUtiles 前言 看哭你,字数:8803,承蒙关照,谢谢朋友点赞! 事务 Transaction事务,什么是事务,事务是包含一组操作,这组操作里面包含许 ...

  4. [Swift]错误提示：Method does not override any method from its superclass

    问题原因:方法名称书写错误! ViewController 生命周期 // 加载视图时会调用该方法 override func loadView() { super.loadView() print( ...

  5. Spring 实现事务的三种方式

    事务:保证数据的运行不会说A给B钱,A钱给了B却没收到. 实现事务的三种方式(重要代码): 1.aspectJ AOP实现事务: <bean id="dataSourceTransac ...

  6. ES6常用特性总览

    以前看过一遍es6,今天面试时被问到了一个很简单的es6特性,竟然没回答上来,特来重温一下es6,做个总结性笔记. 一.什么是es6 es6是新版本JavaScript语言的标准,在2015年6月发布 ...

  7. 【jQuery】(5)---jQuery CSS

    jQuery  CSS      1.jQuery 文档操作方法        1.addClass() 方法: addClass() 方法向被选元素添加一个或多个类.该方法不会移除已存在的 clas ...

  8. logstash常用插件解析

    官方地址:https://www.elastic.co/guide/en/logstash-versioned-plugins/current/index.html 配置文件写法: # 日志导入inp ...

  9. centos7通过yum安装nginx

    centos7通过yum安装nginx nginx不支持centos7通过yum直接安装~~~ 1.查看操作系统位数[root@-jenkins ~]# rpm -aq|grep centos-rel ...

  10. sql server 索引阐述系列七 索引填充因子与碎片

    一.概述 索引填充因子作用:提供填充因子选项是为了优化索引数据存储和性能. 当创建或重新生成索引时,填充因子的值可确定每个叶级页上要填充数据的空间百分比,以便在每一页上保留一些剩余存储空间作为以后扩展 ...