说明

  • 操作系统：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. Windows环境下MySQL 5.6安装与配置

    1将MySQL压缩包解压到自定义目录下. 2.添加环境变量 右键单击我的电脑->属性->高级系统设置(高级)->环境变量. 点击系统变量下的新建按钮 1)    输入变量名:MYSQ ...

  2. 漏洞利用教程：msfpayload 和 Backdooring EXEs

    漏洞利用教程:msfpayload 和 Backdooring EXEs 此版本的PrimalSec漏洞教程系列将介绍如何使用msfpayload创建各种有效负载.msfpayload是Metaspl ...

  3. centos安装discuz论坛

    wget http://download.comsenz.com/DiscuzX/3.3/Discuz_X3.3_SC_UTF8.zip #下载最新版Discuzunzip Dis......zip ...

  4. 2.抽取代码(BaseActivity)

    知识点 俩种退出程序的方法 复制集合 同步的用法 字符数组 工厂模式,生产fatgment,解决了碎片重复创建的问题 全局上下文 actionbar用法 fargmentadapter,当viewpa ...

  5. 抓包工具 Fiddler 使用介绍

    简介 Fiddler是一个抓包工具,可以将网络传输发送与接收的数据包进行截获.重发.编辑等操作.也可以用来检测流量.原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口 ...

  6. lua模块demo（redis，http，mysql，cjson，本地缓存）

    1. lua模块demo(redis,http,mysql,cjson,本地缓存) 1.1. 配置 在nginx.conf中设置lua_shared_dict my_cache 128m; 开启ngi ...

  7. 编码之痛:操作系统迁移后redis缓存无法命中

    前几天一台内网服务器从ubuntu迁移到了centos,检查一切正常后就没有太在意. 今天有同事反馈迁移后的机器上的服务一个缓存总是无法获取,对比了下环境.JVM参数,尝试了war包替换等方式照样复现 ...

  8. ASP.NET Core身份认证服务框架IdentityServer4（2）-整体介绍

    一.整体情况 现代应用程序看起来更像这个: 最常见的相互作用: 浏览器与Web应用程序的通信 Browser -> Web App Web应用程序与Web API通信 基于浏览器的应用程序与We ...

  9. 使用TPC-DS工具生成数据

    1.下载工具 两种渠道 a.官网(建议直接跳过-) 地址:http://www.tpc.org/tpc_documents_current_versions/current_specification ...

  10. 【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...